快捷導(dǎo)航

解析WPF綁定層次結(jié)構(gòu)數(shù)據(jù)的應(yīng)用詳解

更新時(shí)間：2013年05月15日 15:01:57 作者：

本文講述WPF中單層次數(shù)據(jù)和多層次數(shù)據(jù)的綁定方法，主要闡述數(shù)據(jù)綁定的顯示層面，其中涉及了ListBox和Treeview控件。并說(shuō)明它們之間的差異

在實(shí)際項(xiàng)目應(yīng)用中會(huì)存在多種類(lèi)型的層次結(jié)構(gòu)數(shù)據(jù)，WPF提供了良好的數(shù)據(jù)綁定機(jī)制。其中運(yùn)用最頻繁的就是ListBox和TreeView控件。

一、ListBox和TreeView控件的區(qū)別
1.ListBox顯示單層次數(shù)據(jù)集合，TreeView可以顯示單層次和多層次數(shù)據(jù)集合；
2.通過(guò)ListBox在UI層面可以展示良好的數(shù)據(jù)顯示效果，對(duì)數(shù)據(jù)集合可以進(jìn)行排序、分組、過(guò)濾操作；
3.TreeView顯示為一個(gè)多層次的數(shù)據(jù)集合為樹(shù)形結(jié)構(gòu)，通過(guò)Templete和Style屬性同樣可以為其定義良好的數(shù)據(jù)顯示效果；

二、ListBox控件示例
1.ListBox綁定數(shù)據(jù)進(jìn)行分組：
使用ListBox.GridStyle標(biāo)簽，定義HeaderTemplate屬性用來(lái)定義組頭的外觀：

復(fù)制代碼代碼如下:

代碼 
 <ListBox ItemSource="{Binding Path=Data}">
  <ListBox.GridStyle>
      <GroupStyle.HeaderTemplate>
           <DataTemplate>
                 <Stackpanel>
                          <Image Source="xxx.jpg"/>
                           <Label Content="C:"/>
                  <Stackpanel>
           </DataTemplate>
      </GroupStyle.HeaderTemplate>
  </ListBox.GridStyle>
 ......
  </ListBox>

這樣就可以創(chuàng)建出類(lèi)似WINDOWS 文件管理器的效果：

2.Listbox一些使用經(jīng)驗(yàn)：
/1 如果要實(shí)現(xiàn)類(lèi)似WINDOWS的漂亮的界面效果并進(jìn)行分組，需要自定義GroupStyle的樣式，否則WPF會(huì)使用內(nèi)建的GroupStyle，也可以引用GroupStyle.Default靜態(tài)屬性。
/2 ListBox只能定義一層數(shù)據(jù)結(jié)構(gòu)，在ListBox中的Item里再次使用ListBox，后ListBox里的ItemSource不會(huì)繼承上一層ListBox的Item源中的數(shù)據(jù)集合，如有如下數(shù)據(jù)集合：

復(fù)制代碼代碼如下:

public List<Groups> groups = new List<Groups>();groups.Add(new Group);........

復(fù)制代碼代碼如下:

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>的數(shù)據(jù)集合，其Item中的ListBox Binding List<Box>,則Item中的ListBox是無(wú)法獲取List<Box>這個(gè)數(shù)據(jù)集合的;

三、TreeView控件示例
1.有如上數(shù)據(jù)集合，使用TreeView綁定多層數(shù)據(jù)集合：

復(fù)制代碼代碼如下:

代碼 
 <TreeView x:Name="maintree" FocusVisualStyle="{x:Null}" ItemsSource="{Binding Groups}">
             <TreeView.ItemContainerStyle>
                 <Style TargetType="{x:Type TreeViewItem}">
                     <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                     <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
                     <Setter Property="FontWeight" Value="Normal" />
                     <Style.Triggers>
                         <Trigger Property="IsSelected" Value="True">
                             <Setter Property="FontWeight" Value="Bold"/>
                         </Trigger>
                     </Style.Triggers>
                 </Style>
             </TreeView.ItemContainerStyle>
             <TreeView.Resources>
                 <HierarchicalDataTemplate DataType="{x:Type m:GroupVO}" ItemsSource="{Binding Boxes}">
                     <StackPanel Orientation="Horizontal">
                         <Label Content="{Binding Path=FriendlyName}"></Label>
                         <CheckBox VerticalAlignment="Center" IsChecked="{Binding Path=IsSelected}"></CheckBox>
                     </StackPanel>                 
                 </HierarchicalDataTemplate>               

                 <DataTemplate DataType="{x:Type m:BoxVO}">
                     <Grid Margin="0,5,5,10" MouseDown="maintree_MouseDown" Loaded="Grid_Loaded">
                         <Grid.RowDefinitions>
                             <RowDefinition></RowDefinition>
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*"></ColumnDefinition>
                             <ColumnDefinition Width="6*"></ColumnDefinition>
                         </Grid.ColumnDefinitions>
                         <Image Source="/Resources/Images/shgbit.png" Width="50" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0"></Image>
                             <Label Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Margin="5,5,0,0" Content="{Binding Path=FriendlyName}"></Label>
                 </DataTemplate>
             </TreeView.Resources>
         </TreeView>

HierarchicalDataTemplate屬性為層級(jí)數(shù)據(jù)模板，它繼承數(shù)據(jù)集合的層級(jí)結(jié)構(gòu)，要表示樹(shù)的層級(jí)依賴(lài)關(guān)系必須使用HierarchicalDataTemplate。
屬性綁定數(shù)據(jù)使用TwoWay是為雙向?qū)傩?，?dāng)源數(shù)據(jù)或目標(biāo)被改變是更新另一方的數(shù)據(jù)。在層次樹(shù)表示中的典型應(yīng)用就是：用CheckBox進(jìn)行子節(jié)點(diǎn)的選中和未選中的狀態(tài)傳遞。

您可能感興趣的文章: