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

概述    看了不少DataBinding的Demo都是商务应用的，这里做一个图的可视化的DataBinding的小Demo。这里为了简单，只是绘制简单的点和线：将图的相关信息GraphLayoutVM（点和边的位置）DataBinding到UI 显示。        下面是具体的实现。     先是DataBinding里最常用的的类ViewModelBase，实现INotifyPropertyCh

    看了不少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;

       }

   }

}

总结

以上是内存溢出为你收集整理的一个Silverlight的可视化图的DataBinding的Demo全部内容，希望文章能够帮你解决一个Silverlight的可视化图的DataBinding的Demo所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。