WPF控件之ListView控件

緊接上一篇《WPF筆記匯總之列表類控件與DataGrid控件》，這篇主要總結WPF中最復雜的控件之一，ListView控件，它類似ListBox和DataGrid，它可以實現上面兩個控件的功能，但自定義制定的方式更加自由。

文章目錄

• • WPF控件之ListView控件
  • • 1 ListView簡單使用
    • 2 ListView數據綁定和ItemTemplate
    • 3 GridView模板
    • 4 數據對齊與分組展示
    • 5 排序與過濾

1 ListView簡單使用

默認的ListView實際上只是一個ListBox，具有不同的選擇模式，ListViewItem派生自ContentControl類，所以可以指定WPF控件作為其內容。

<!--簡單使用--> <ListView Margin="10"><ListViewItem>A ListView</ListViewItem><ListViewItem IsSelected="True">with several</ListViewItem><ListViewItem>items</ListViewItem> </ListView> <!--有圖片的ListViewItem--> <ListView Margin="10"><ListViewItem><StackPanel Orientation="Horizontal"><Image Source="/images/file.png" Margin="0,0,5,0" /><TextBlock>Green</TextBlock></StackPanel></ListViewItem><ListViewItem><StackPanel Orientation="Horizontal"><Image Source="/images/file.png" Margin="0,0,5,0" /><TextBlock>Blue</TextBlock></StackPanel></ListViewItem><ListViewItem IsSelected="True"><StackPanel Orientation="Horizontal"><Image Source="/images/file.png" Margin="0,0,5,0" /><TextBlock>Red</TextBlock></StackPanel></ListViewItem> </ListView>

2 ListView數據綁定和ItemTemplate

<!--簡單數據綁定--> <ListView Margin="10" Name="lvDataBinding"></ListView> <TextBlock></TextBlock> <!--自定義模板--> <ListView Margin="10" Name="lvDataBinding2"><ListView.ItemTemplate><DataTemplate><WrapPanel><TextBlock Text="Name: " /><TextBlock Text="{Binding Name}" FontWeight="Bold" /><TextBlock Text=", " /><TextBlock Text="Age: " /><TextBlock Text="{Binding Age}" FontWeight="Bold" /><TextBlock Text=" (" /><TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" /><TextBlock Text=")" /></WrapPanel></DataTemplate></ListView.ItemTemplate> </ListView> public MainWindow() {InitializeComponent();List<User> items = new List<User>();items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com" });lvDataBinding.ItemsSource = items;lvDataBinding2.ItemsSource = items; }public class User {public string Name { get; set; }public int Age { get; set; }public string Mail { get; set; }public override string ToString(){return this.Name + ", " + this.Age + " years old";} }

3 GridView模板

WPF內置了一個專門的視圖：GridView，通過使用GridView，您可以在ListView中展示多列數據。Header屬性用于指定列顯示的文本，DisplayMemberBinding屬性將值綁定到自定義數據類的屬性。此外指定CellTemplate屬性，可以完全控制內容在特定列單元格中的呈現方式。

<!--GridView簡單使用--> <ListView Margin="10" Name="lvUsers"><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /><GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" /></GridView></ListView.View> </ListView><!--CellTemplate屬性--> <ListView Margin="10" Name="lvUsers2"><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /><GridViewColumn Header="Mail" Width="150"><GridViewColumn.CellTemplate><DataTemplate><TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" /></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn></GridView></ListView.View> </ListView> public MainWindow() {InitializeComponent();List<User> items = new List<User>();items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com" });lvUsers.ItemsSource = items;lvUsers2.ItemsSource = items; }public class User {public string Name { get; set; }public int Age { get; set; }public string Mail { get; set; } }

4 數據對齊與分組展示

Horizo??ntalAlignment屬性負責設置對齊方式。默認為Center，可以將其更改為Left等。CollectionView包含許多可能性，包括對項目進行分組的功能。通過向視圖的GroupDescriptions添加所謂的PropertyGroupDescription來實現分組。

<!--更改數據對齊方式--> <ListView Margin="10" Name="lvUsers"><ListView.Resources><Style TargetType="{x:Type GridViewColumnHeader}"><Setter Property="HorizontalContentAlignment" Value="Left" /></Style></ListView.Resources><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /><GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" /></GridView></ListView.View> </ListView> <!--分組展示--> <ListView Name="lvUsers2"><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /></GridView></ListView.View><ListView.GroupStyle><GroupStyle><GroupStyle.HeaderTemplate><DataTemplate><TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Name}"/></DataTemplate></GroupStyle.HeaderTemplate></GroupStyle></ListView.GroupStyle> </ListView> <TextBlock></TextBlock> <!--折疊和擴展組--> <ListView Name="lvUsers3"><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /></GridView></ListView.View><ListView.GroupStyle><GroupStyle><GroupStyle.ContainerStyle><Style TargetType="{x:Type GroupItem}"><Setter Property="Template"><Setter.Value><ControlTemplate><Expander IsExpanded="True"><Expander.Header><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="18" VerticalAlignment="Bottom" /><TextBlock Text="{Binding ItemCount}" FontSize="18" Foreground="Green" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" /><TextBlock Text=" item(s)" FontSize="18" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" /></StackPanel></Expander.Header><ItemsPresenter /></Expander></ControlTemplate></Setter.Value></Setter></Style></GroupStyle.ContainerStyle></GroupStyle></ListView.GroupStyle> </ListView> public MainWindow() {InitializeComponent();List<User> items = new List<User>();items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com", Sex = SexType.Male });items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com", Sex = SexType.Female });items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com", Sex = SexType.Male });lvUsers.ItemsSource = items;lvUsers2.ItemsSource = items;lvUsers3.ItemsSource = items;CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvUsers2.ItemsSource);PropertyGroupDescription groupDescription = new PropertyGroupDescription("Sex");view.GroupDescriptions.Add(groupDescription); }public enum SexType { Male, Female };public class User {public string Name { get; set; }public int Age { get; set; }public string Mail { get; set; }public SexType Sex { get; set; } }

5 排序與過濾

<TextBox DockPanel.Dock="Top" Margin="0,0,0,10" Name="txtFilter" TextChanged="txtFilter_TextChanged" /> <ListView Name="lvUsers"><ListView.View><GridView><GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" /><GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" /></GridView></ListView.View> </ListView> public MainWindow() {InitializeComponent();List<User> items = new List<User>();items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com", Sex = SexType.Male });items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com", Sex = SexType.Female });items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com", Sex = SexType.Male });items.Add(new User() { Name = "Mike", Age = 13, Mail = "mike.doe@gmail.com", Sex = SexType.Male });lvUsers.ItemsSource = items;// 先使用年齡進行排序，當年齡相同時，使用名稱排序。CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvUsers.ItemsSource);view.SortDescriptions.Add(new SortDescription("Age", ListSortDirection.Ascending));view.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));// 過濾view.Filter = UserFilter;}private bool UserFilter(object item) {if (String.IsNullOrEmpty(txtFilter.Text))return true;elsereturn ((item as User).Name.IndexOf(txtFilter.Text, StringComparison.OrdinalIgnoreCase) >= 0); }private void txtFilter_TextChanged(object sender, System.Windows.Controls.TextChangedEventArgs e) {CollectionViewSource.GetDefaultView(lvUsers.ItemsSource).Refresh(); }public enum SexType { Male, Female }; public class User {public string Name { get; set; }public int Age { get; set; }public string Mail { get; set; }public SexType Sex { get; set; } }

總結

以上是生活随笔為你收集整理的WPF笔记汇总之ListView控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。