Silverlight 在MVVM模式下使用TreeView

1.在mvvm模式下如何使用treeview,这个问题比较复杂,毕竟我们一些用习惯了code-behind的方法,不愿意改变一些原来的思路。但是为什么我们要用MVVM呢?

  答:

优点:在WPF/Silverlight中应用MVVM模式,View主要用于界面呈现,ViewModel用于逻辑实现,Model用于数据的构造,而这三者能够进行通信,最重要的是通过WPF/Silverlight中强大的数据绑定机制,将View和ViewModel有效的联系起来。

对比: 传统的WinForm和ASP.NET应用程序是基于事件驱动开发的,以ASP.NET为例,在实际开发中,*.aspx页面用于渲染HTML,*.aspx.cs页面用于实现服务端逻辑,在开发初期,这种方式显得方便快捷,但是这种高耦合性导致了后期维护的复杂性,一旦aspx变化,aspx.cs的代码同时需要改变,比如将aspx中的GridView控件以FormView控件进行替换,对应的aspx.cs文件中不得不进行大量修改。而MVVM模式在WPF/SL应用程序中得以广泛应用的原因是,WPF/Siverlight应用程序是基于数据驱动的开发的,网上曾有研究者在WinForm下实现MVVM模式与WPF进行对比,得出结论:WinForm项目中大规模运用MVVM模式开发效率很低。

 使用MVVM架构最大的好处是:开发人员在写程序的时候不需要做UI,而设计人员可以使用Microsoft Expression Blend 4+设计全部的UI并且不需要写任何代码。

  主要的好处如下:

  1、设计人员可以用设计工具很容易的设计UI,而且不需要写任何代码

  2、你可以更好的设计UI,而且可以让即使不是开发人员使用。

  3、可以先设计UI或者与开发同时设计。

  4、当UI全部改变时,代码可以不改变。

clip_image002

详细可以看:http://www.cnblogs.com/626498301/archive/2011/04/08/2009404.html

                http://blog.csdn.net/rise51/archive/2011/03/08/6231418.aspx

以下是个人的一个实践例子:

首先:这个是UI代码,注意红色的字体代表相关的命名空间。

<controls:ChildWindow x:Class="ClientPortal.Views.VM.ChildWindowSnapShot"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:common
="clr-namespace:System.Windows;assembly=System.Windows.Controls"
xmlns:jjdata
="clr-namespace:ClientPortal.ViewModel"
xmlns:TreeViewExtended
="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:local
="clr-namespace:ViewModelTreeControl"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Behaviors="clr-namespace:Behaviors"

Width
="1035" Height="630"
Title
="">

第二:引入相关的资源,主要提供给下面的控件使用,相当于数据源的来源

<controls:ChildWindow.Resources>

<jjdata:CheckPointViewModel x:Key="jjCheckPointViewModel"></jjdata:CheckPointViewModel>

<Style x:Key="RedItemStyle" TargetType="controls:TreeViewItem">
<Setter Property="HeaderTemplate">
<Setter.Value>

<DataTemplate>
<StackPanel Orientation="Horizontal">
<!--<CheckBox />-->
<Image Source="http://www.cnblogs.com/Images/t.png"/>

<TextBlock Text="{Binding}" Foreground="Black" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsExpanded" Value="True" />
</Style>



</controls:ChildWindow.Resources>

第三:树形控件的代码:

<controls:TreeView x:Name="TreeOfLife" Margin="5" Height="455" ItemsSource="{Binding colCheckPoints}" >
<i:Interaction.Triggers>
<i:EventTrigger SourceObject="{Binding ElementName=btnDelete}" EventName="Click">
<Behaviors:TreeExpandBehavior SelectedCheckPoint="{Binding SelectedCheckPoint}" ExpandOnLoad="False"/>
</i:EventTrigger>
</i:Interaction.Triggers>

<controls:TreeView.ItemContainerStyle>
<Style TargetType="controls:TreeViewItem">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="IsExpanded" Value="True"></Setter>

</Style>
</controls:TreeView.ItemContainerStyle>
<controls:TreeView.ItemTemplate>
<common:HierarchicalDataTemplate ItemsSource="{Binding CKChildren}">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
<TextBlock Text="{Binding CkName}"/>
</StackPanel>
</common:HierarchicalDataTemplate>

</controls:TreeView.ItemTemplate>

</controls:TreeView>

第四:在MVVM中的使用

public CheckPointViewModel()
        {
            if (!DesignerProperties.IsInDesignTool)
            {
                NewVMCheckPointCommand = new RelayCommand(NewVMCheckPointMethod);
                DeleteVMCheckPointCommand = new RelayCommand(DeleteCheckPointByCkpointIdMethod);
                this.VMName = ViewModelHelper.vmName;
                this.VMDescription = ViewModelHelper.vmDescription;

                this.IsBusy = true;
                colCheckPoints = new ObservableCollection<VMCheckPointInfo>();
                SelectNodes = new ObservableCollection<string>();
                LoadData();
            }
        }

其实数据源是通过WCF RIA读取过来的,这里涉及到后端的一系列操作就不在这里展示了。

大概思路就是这样:

View(Silverlight UI )---ViewModel---Model(WCF RIA) 

原文地址:https://www.cnblogs.com/sunjunlin/p/2021877.html