zoukankan      html  css  js  c++  java
  • 使用WPF绑定层次结构数据

          本文讲述WPF中单层次数据和多层次数据的绑定方法,主要阐述数据绑定的显示层面,其中涉及了ListBox和Treeview控件。并说明它们之间的差异。

      在实际项目应用中会存在多种类型的层次结构数据,WPF提供了良好的数据绑定机制。其中运用最频繁的就是ListBox和TreeView控件。

          一、ListBox和TreeView控件的区别

      1.ListBox显示单层次数据集合,TreeView可以显示单层次和多层次数据集合;

      2.通过ListBox在UI层面可以展示良好的数据显示效果,对数据集合可以进行排序、分组、过滤操作;

      3.TreeView显示为一个多层次的数据集合为树形结构,通过Templete和Style属性同样可以为其定义良好的数据显示效果;

      二、ListBox控件示例

      1.ListBox绑定数据进行分组:

      使用ListBox.GridStyle标签,定义HeaderTemplate属性用来定义组头的外观:

      

    代码
    1 <ListBox ItemSource="{Binding Path=Data}">
    2  <ListBox.GridStyle>
    3 <GroupStyle.HeaderTemplate>
    4 <DataTemplate>
    5 <Stackpanel>
    6 <Image Source="xxx.jpg"/>
    7 <Label Content="C:"/>
    8 <Stackpanel>
    9 </DataTemplate>
    10 </GroupStyle.HeaderTemplate>
    11  </ListBox.GridStyle>
    12 ......
    13  </ListBox>

      这样就可以创建出类似WINDOWS 文件管理器的效果:

        

         2.Listbox一些使用经验:

      /1 如果要实现类似WINDOWS的漂亮的界面效果并进行分组,需要自定义GroupStyle的样式,否则WPF会使用内建的GroupStyle,也可以引用GroupStyle.Default静态属性。

         /2 ListBox只能定义一层数据结构,在ListBox中的Item里再次使用ListBox,后ListBox里的ItemSource不会继承上一层ListBox的Item源中的数据集合,如有如下数据集合:

          

    public List<Groups> groups = new List<Groups>();
    groups.Add(
    new Group);
    ........
    public class Group {
    public int Id { get; set; }
    public string Name { get; set; }
    private List<Box> boxes = new List<Box>();

    public List<Box> Boxes {
    get { return boxes; }
    }
    }

       Listbox的ItemSource Binding List<Groups>的数据集合,其Item中的ListBox Binding List<Box>,则Item中的ListBox是无法获取List<Box>这个数据集合的;

      三、TreeView控件示例

      1.有如上数据集合,使用TreeView绑定多层数据集合:

      

    代码
    1 <TreeView x:Name="maintree" FocusVisualStyle="{x:Null}" ItemsSource="{Binding Groups}">
    2 <TreeView.ItemContainerStyle>
    3 <Style TargetType="{x:Type TreeViewItem}">
    4 <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
    5 <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
    6 <Setter Property="FontWeight" Value="Normal" />
    7 <Style.Triggers>
    8 <Trigger Property="IsSelected" Value="True">
    9 <Setter Property="FontWeight" Value="Bold"/>
    10 </Trigger>
    11 </Style.Triggers>
    12 </Style>
    13 </TreeView.ItemContainerStyle>
    14 <TreeView.Resources>
    15 <HierarchicalDataTemplate DataType="{x:Type m:GroupVO}" ItemsSource="{Binding Boxes}">
    16 <StackPanel Orientation="Horizontal">
    17 <Label Content="{Binding Path=FriendlyName}"></Label>
    18 <CheckBox VerticalAlignment="Center" IsChecked="{Binding Path=IsSelected}"></CheckBox>
    19 </StackPanel>
    20 </HierarchicalDataTemplate>
    21
    22 <DataTemplate DataType="{x:Type m:BoxVO}">
    23 <Grid Margin="0,5,5,10" MouseDown="maintree_MouseDown" Loaded="Grid_Loaded">
    24 <Grid.RowDefinitions>
    25 <RowDefinition></RowDefinition>
    26 </Grid.RowDefinitions>
    27 <Grid.ColumnDefinitions>
    28 <ColumnDefinition Width="*"></ColumnDefinition>
    29 <ColumnDefinition Width="6*"></ColumnDefinition>
    30 </Grid.ColumnDefinitions>
    31 <Image Source="/Resources/Images/shgbit.png" Width="50" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0"></Image>
    32 <Label Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Margin="5,5,0,0" Content="{Binding Path=FriendlyName}"></Label>
    33 </DataTemplate>
    34 </TreeView.Resources>
    35 </TreeView>

      HierarchicalDataTemplate属性为层级数据模板,它继承数据集合的层级结构,要表示树的层级依赖关系必须使用HierarchicalDataTemplate。

      属性绑定数据使用TwoWay是为双向属性,当源数据或目标被改变是更新另一方的数据。在层次树表示中的典型应用就是:用CheckBox进行子节点的选中和未选中的状态传递。

      转载时,请注明本文来源:www.cnblogs.com/tmywu

       

      作者: 淘米部落

      联系邮箱:tommywu23@gmail.com 

  • 相关阅读:
    LeetCode 189. Rotate Array
    LeetCode 965. Univalued Binary Tree
    LeetCode 111. Minimum Depth of Binary Tree
    LeetCode 104. Maximum Depth of Binary Tree
    Windows下MySQL的安装与配置
    LeetCode 58. Length of Last Word
    LeetCode 41. First Missing Positive
    LeetCode 283. Move Zeroes
    《蚂蚁金服11.11:支付宝和蚂蚁花呗的技术架构及实践》读后感
    删除docker下的镜像
  • 原文地址:https://www.cnblogs.com/tmywu/p/1763270.html
Copyright © 2011-2022 走看看