一个Silverlight的可视化图的DataBinding的Demo
看了不少DataBinding的Demo都是商务应用的，这里做一个图的可视化的DataBinding的小Demo。这里为了简单，只是绘制简单的点和线：将图的相关信息GraphLayoutVM（点和边的位置）DataBinding到UI 显示。
下面是具体的实现。
先是DataBinding里最常用的的类ViewModelBase，实现INotifyPropertyChanged接口来获取图的变量或者UI发生变化等事件。
ViewModelBase.cs:
usingSystem.ComponentModel;
namespacetestHierarchicalBinding
{
public classViewModelBase:INotifyPropertyChanged
{
public voidOnPropertyChanged(string properyName)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(properyName));
}
}
public eventPropertyChangedEventHandler PropertyChanged;
}
}
拓扑图的边的ViewModel，就是边的两端点的位置和一些相关信息。
LinkVM.cs：
using System.Windows;
namespacetestHierarchicalBinding
{
public classLinkVM:ViewModelBase
{
private Pointstart;
public PointStart
{
get
{
returnstart;
}
set
{
if(start != value)
{
start=value;
OnPropertyChanged("Start");
}
}
}
private Pointend;
public PointEnd
{
get
{
returnend;
}
set
{
if(end != value)
{
end = value;
OnPropertyChanged("End");
}
}
}
}
}
拓扑图的点的ViewModel，就是点的位置
PointVM.cs：
using System.Windows;
namespacetestHierarchicalBinding
{
public classPointVM:ViewModelBase
{
private PointmPoint;
public PointMPoint
{
get
{
returnmPoint;
}
set
{
if(mPoint != value)
{
mPoint = value;
OnPropertyChanged("MPoint");
}
}
}
}
}
拓扑图的Layout的ViewModel，就是存储边和点的位置。
GraphLayout.cs：
using System.Windows;
usingSystem.Collections.ObjectModel;
namespacetestHierarchicalBinding
{
public classGraphLayout:ViewModelBase
{
public GraphLayout()
{
LinesVM = newObservableCollection<LinkVM>();
PointsVM = newObservableCollection<PointVM>();
Names = newObservableCollection<string>();
LinkVMline1 = new LinkVM();
line1.Start = new Point(20, 10);
line1.End = new Point(150, 250);
LinesVM.Add(line1);
PointVMpoint1 = new PointVM();
point1.MPoint = new Point(10,210);
PointsVM.Add(point1);
PointVMpoint2 = new PointVM();
point2.MPoint = new Point(120,310);
PointsVM.Add(point2);
Names.Add("Whatis");
Names.Add("Hello");
}
public ObservableCollection<LinkVM> LinesVM {get;set; }
//public ObservableCollection<Line>Lines { get; set; }
public ObservableCollection<PointVM> PointsVM {get;set; }
public ObservableCollection<string> Names {get;set; }
}
}
XAML 代码：
MainPage.xaml：
<UserControl x:Class="testHierarchicalBinding.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data ="clr-namespace:testHierarchicalBinding"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500">
<Canvas x:Name="LayoutRoot" Background="White">
<ItemsControl x:Name="LineItemsControl" ItemsSource="{Binding Path=LinesVM}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/> //注意在ItemsPanelTemplate里面选择Canvas的Layout
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>//决定如何绘制绑定的ItemsSource里面的每一条边
<Line X1="{Binding Start.X}" Y1="{Binding Start.Y}" X2="{Binding End.X}" Y2="{Binding End.Y}" Stroke="Black"StrokeThickness="2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl x:Name="PointItemsControl" ItemsSource="{Binding Path=PointsVM}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>//注意在ItemsPanelTemplate里面选择Canvas的Layout
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>//决定如何绘制ItemsSource里面绑定的每一个点
<Path Fill="Gold" Stroke="Black"StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="{Binding MPoint}" RadiusX="5" RadiusY="5"/>
</Path.Data>
</Path>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</UserControl>
在Xaml后面的代码
MainPage.xaml.cs：
usingSystem.Windows.Controls;
namespacetestHierarchicalBinding
{
public partialclassMainPage: UserControl
{
public MainPage()
{
InitializeComponent();
GraphLayoutmyLayout = new GraphLayout();
LayoutRoot.DataContext = myLayout;
}
}
}