将ObservableCollection(Of T) 数据 绑定到 Canvas

初识 Wpf ，感觉其功能的强大，所以着手做一个MindMap（脑图）工具，

构思将自定义控件Node节点，放入一个Canvas容器中，表示脑图的主题节点。

 

将Node装入Canvas并不难，但是仍然考虑用绑定的方式，使UI与Model解耦。

继承自ItemsControl的Listbox当然可以轻松绑定以ObservableCollection形式储存的模型数据。

但是Canvas并不是继承自ItemsContorl的，无法直接绑定ObservableCollection对象。

 

上午请教了@{Prism}兄弟，了解到将Canvas装入ItemsControl.ItemsPanel的方式，遂

动手做了一个实验。

 

上代码

Xaml文件

<Window x:Class="MainWindow" x:Name="mainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ItemsControl Name="ic" ItemsSource="{Binding ElementName=mainWindow, Path=NodeList}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
   9:        <TextBlock Margin="{Binding Left}" Background="Red" Text="{Binding Title}"></TextBlock>
  10:                  </DataTemplate>
            </ItemsControl.ItemTemplate>

  13:              <ItemsControl.ItemsPanel>
  14:                  <ItemsPanelTemplate>
  15:                      <Canvas Background="LightBlue"/>
  16:                  </ItemsPanelTemplate>
  17:              </ItemsControl.ItemsPanel>
        </ItemsControl>
        <Button Margin="203,223,219,67" Click="Button_Click">Move</Button>
    </Grid>
</Window>

在Xaml文件中，黄色部分是ItemsControl的数据模版，其中绑定Node类的Title属性。

另将Margin属性绑定到Left是为了实验，单个控件的移动。因为我要做的是脑图。

 

绿色部分，就是关键所在了，将Canvas装入ItemsPanel。

 

主窗口后台代码

Imports System.Collections.ObjectModel

Class MainWindow
    '
    'NodeList As ObservableCollection(Of Node)
    '
    Private mNodeList As ObservableCollection(Of Node)
    Public ReadOnly Property NodeList() As ObservableCollection(Of Node)
        Get
            If mNodeList Is Nothing Then
                Return New ObservableCollection(Of Node)
            End If
            Return mNodeList
        End Get

    End Property

    Public Sub New()
        mNodeList = New ObservableCollection(Of Node)
        mNodeList.Add(New Node("Hello"))
        ' 此调用是设计器所必需的。
        InitializeComponent()

        ' 在 InitializeComponent() 调用之后添加任何初始化。

    End Sub

    Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        mNodeList.Item(0).Left = 100.0
    End Sub
End Class

并没有出奇的地方，正常设定。

 

Node类的代码

Public Class Node
    Inherits DependencyObject


#Region "   Title  DependencyProperty "
    ''' <summary>
    ''' PropertyComment
    ''' </summary>
    ''' <remarks></remarks>
    Public Shared ReadOnly TitleProperty As DependencyProperty = _
        DependencyProperty.Register(
            "Title", GetType(String), GetType(Node), New UIPropertyMetadata(""))

    Public Property Title() As String
        Get
            Return GetValue(TitleProperty)
        End Get
        Set(ByVal Value As String)
            SetValue(TitleProperty, Value)
        End Set
    End Property
#End Region

#Region "   Left  DependencyProperty "
    ''' <summary>
    ''' PropertyComment
    ''' </summary>
    ''' <remarks></remarks>
    Public Shared ReadOnly LeftProperty As DependencyProperty = _
        DependencyProperty.Register(
            "Left", GetType(Double), GetType(Node), New PropertyMetadata( _
                0.0, New PropertyChangedCallback(AddressOf LeftPropertyChanged_CallBack)))

    Public Property Left() As Double
        Get
            Return GetValue(LeftProperty)
        End Get
        Set(ByVal Value As Double)
            SetValue(LeftProperty, Value)
        End Set
    End Property

    Public Shared Sub LeftPropertyChanged_CallBack(ByVal dp As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)

    End Sub
#End Region

    Public Sub New(ByVal t As String)
        Title = t
    End Sub

End Class

定义了两个依赖属性用于绑定。

 

通过本例，实现了Canvas容器的集合数据绑定，希望跟大家交流。也希望对于有同样疑问的朋友有所帮助。