将 ObservableCollection(Of T) 绑定到 Canvas （3)

书接上回，话说为了模仿 Bubble 脑图，费劲心思将Node对象绑定到Canvas上，

实现简单的Left Top 定位。采用了ItemsContorl 装 Canvas的方式。不曾想

虽然装入，并不能使用Canvas.Left 和 Canvas.Top 属性来定位Node。

 

如果想要定位Node的具体位置，还要加入<ControlTemplate>和<ItemsControl.ItemContainerStyle>

代码如下

 1 <ItemsControl.Template>
 2     <ControlTemplate TargetType="{x:Type ItemsControl}">
 3         <ItemsPresenter/>
 4     </ControlTemplate>
 5 </ItemsControl.Template>
 6 <ItemsControl.ItemContainerStyle>
 7     <Style TargetType="{x:Type ContentPresenter}">
 8         <Setter Property="Canvas.Left" 
 9                 Value="{Binding Path=Left}"></Setter>
10         <Setter Property="Canvas.Top" 
11                 Value="{Binding Path=Top}"></Setter>
12     </Style>
13 </ItemsControl.ItemContainerStyle>

并且，将Left和Top属性绑定在Setter上。

这时再定义Left和Top属性，效果就出来了。

 

完整的Xaml代码如下

 1 <Window x:Class="MainWindow"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:ct="clr-namespace:AMindMapControls;assembly=AMindMapControls"
 5     Title="MainWindow" Height="350" Width="525">
 6     <Grid>
 7         <ItemsControl ItemsSource="{Binding NodeList}">
 8             <ItemsControl.Template>
 9                 <ControlTemplate TargetType="{x:Type ItemsControl}">
10                     <ItemsPresenter/>
11                 </ControlTemplate>
12             </ItemsControl.Template>
13             <ItemsControl.ItemContainerStyle>
14                 <Style TargetType="{x:Type ContentPresenter}">
15                     <Setter Property="Canvas.Left" Value="{Binding Path=Left}"></Setter>
16                     <Setter Property="Canvas.Top" Value="{Binding Path=Top}"></Setter>
17                 </Style>
18             </ItemsControl.ItemContainerStyle>
19             <ItemsControl.ItemTemplate>
20                 <DataTemplate>
21                     <ct:ANode Text="{Binding Text}" Left="{Binding Left}"  Top="{Binding Top}"/>
22                 </DataTemplate>
23             </ItemsControl.ItemTemplate>
24             <ItemsControl.ItemsPanel>
25                 <ItemsPanelTemplate>
26                     <Canvas/>
27                 </ItemsPanelTemplate>
28                 </ItemsControl.ItemsPanel>
29         </ItemsControl>
30         <Button Canvas.Left="386" Canvas.Top="278" Content="Button" Height="23" Name="Button1" Width="75" />
31     </Grid>
32 </Window>
33 

至此，关于集合绑定到Canvas，就告一段略了，稍后，写一个详细的开发过程。