WPF里ItemsControl的分組實現 --listbox 實現分組


我們在用到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已放群里,需要的可以下載來看。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM