一个Silverlight的可视化图的DataBinding的Demo

    看了不少DataBinding的Demo都是商务应用的,这里做一个图的可视化的DataBinding的小Demo。这里为了简单,只是绘制简单的点和线:将图的相关信息GraphLayoutVM(点和边的位置)DataBinding到UI 显示。

   一个Silverlight的可视化图的DataBinding的Demo_第1张图片

    下面是具体的实现。

    先是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");

                }

            }

       }

   }

}

 

 

拓扑图的LayoutViewModel,就是存储边和点的位置。

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里面选择CanvasLayout

                </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里面选择CanvasLayout

                </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;

       }

   }

}

 

 

你可能感兴趣的:(UI,String,layout,Path,silverlight,binding)