• 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) 

  • 相关阅读:
    LVDS DP等显示器接口简介
    Eclipse智能感知及快捷键
    Error deploying web application directory D:apache-tomcat-8.0.26webappsservlet
    把tomcat默认的8080段口改成80端口
    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.jee.server did not find a matching property.
    软件危机
    SQL Server——热备份
    mysql热备份
    Oracle——热备份
    Nodejs基础
  • 原文地址:https://www.cnblogs.com/sunjunlin/p/2021877.html
Copyright © 2020-2023  润新知