我們在用到ItemsControl時,有時會用到分組,如ListBox,ListView,DataGrid。WPF的ItemsControl可以實現分組,是依托於GroupStyle,以ListBox為例,他的分組效果圖為:
以下為前台:
1 <ListBox Name="lbMain"> 2 <ListBox.ItemTemplate> 3 <DataTemplate> 4 <StackPanel Orientation="Horizontal"> 5 <TextBlock Text="{Binding FileName}" 6 Width="150" /> 7 <TextBlock Text="{Binding AuthorName}" 8 Width="100" /> 9 <TextBlock Text="{Binding UpTime}" 10 Width="100" /> 11 </StackPanel> 12 </DataTemplate> 13 </ListBox.ItemTemplate> 14 <ListBox.GroupStyle> 15 <GroupStyle> 16 <GroupStyle.ContainerStyle> 17 <Style TargetType="{x:Type GroupItem}"> 18 <Setter Property="Template"> 19 <Setter.Value> 20 <ControlTemplate TargetType="{x:Type GroupItem}"> 21 <Expander IsExpanded="True" 22 ExpandDirection="Down"> 23 <Expander.Header> 24 <StackPanel Orientation="Horizontal"> 25 <TextBlock Text="{Binding Path=Name}" 26 VerticalAlignment="Center" /> 27 <TextBlock Text="{Binding Path=ItemCount, StringFormat=數量:{0}}" 28 VerticalAlignment="Center" 29 Margin="5,0,0,0" /> 30 <Button Content="Sale" 31 Margin="5,0,0,0" /> 32 </StackPanel> 33 </Expander.Header> 34 <ItemsPresenter /> 35 </Expander> 36 </ControlTemplate> 37 </Setter.Value> 38 </Setter> 39 </Style> 40 </GroupStyle.ContainerStyle> 41 </GroupStyle> 42 </ListBox.GroupStyle> 43 </ListBox>
從16行可以看出,GroupStyle定義的是控件內部樣式,所以有人嘗試在這里綁實體數據屬性的話肯定是失敗的,注意25行只能是Name,不管分組的屬性叫什么名,這都只能是Name,我寫了個Button在里面,如果想知道為什么只能是Name,寫個Click處理,把Button的DataContext打印出來就什么都知道了。如果想在這里做更多的處理,比如進行一些負責的運算,可以寫加轉換器。
這里只是弄了一個原始的Expander裝載分組控件,需要美化可以另寫樣式。
以下是后台:
1 public class ModelFile 2 { 3 public string FileName { get; set; } 4 public string AuthorName { get; set; } 5 public string UpTime { get; set; } 6 } 7 8 public partial class MainWindow : Window 9 { 10 public ObservableCollection<ModelFile> CollectionModelFile = new ObservableCollection<ModelFile>(); 11 12 public MainWindow() 13 { 14 InitializeComponent(); 15 16 CollectionModelFile.Add(new ModelFile() { FileName = "WPF進化史", AuthorName = "王鵬", UpTime = "2014-10-10" }); 17 CollectionModelFile.Add(new ModelFile() { FileName = "WPF概論", AuthorName = "大飛", UpTime = "2014-10-10" }); 18 CollectionModelFile.Add(new ModelFile() { FileName = "WPF之美", AuthorName = "小蟲", UpTime = "2014-10-11" }); 19 CollectionModelFile.Add(new ModelFile() { FileName = "WPF之道", AuthorName = "青草", UpTime = "2014-11-11" }); 20 CollectionModelFile.Add(new ModelFile() { FileName = "WPF之禪", AuthorName = "得瑟鬼", UpTime = "2014-11-11" }); 21 CollectionModelFile.Add(new ModelFile() { FileName = "WPF入門", AuthorName = "今晚吃什么", UpTime = "2014-11-11" }); 22 CollectionModelFile.Add(new ModelFile() { FileName = "WPF神技", AuthorName = "無間道王二", UpTime = "2014-12-12" }); 23 CollectionModelFile.Add(new ModelFile() { FileName = "WPF不為人知之密", AuthorName = "星期八", UpTime = "2014-12-12" }); 24 CollectionModelFile.Add(new ModelFile() { FileName = "WPF之革命", AuthorName = "兩把刀", UpTime = "2014-12-12" }); 25 26 lbMain.ItemsSource = CollectionModelFile; 27 28 ICollectionView cv = CollectionViewSource.GetDefaultView(lbMain.ItemsSource); 29 cv.GroupDescriptions.Add(new PropertyGroupDescription("UpTime")); 30 } 31 }
重點是28、29行,有了這兩句,ListBox就能准確得分組顯示了,其他ItemsControl的分組類同。
至此一個簡單的ListBox分組顯示就完成了,Demo已放群里,需要的可以下載來看。