码迷，mamicode.com
首页 > Windows程序 > 详细

wpf CollectionViewSource与ListBox的折叠、分组显示，及输入关键字 Filter的筛选

时间：2015-03-31 00:21:02      阅读：656      评论：0      收藏：0      [点我收藏+]

标签：

   在wpf中虽然ObservableCollection<T>作为ListBox的Itemsource，很好，很强大！但是CollectionViewSource与ListBox才是天作之合！

wpf中ListBox支持分组显示，CollectionViewSource.GroupDescriptions为其实现了分组。废话不多说，下面上ListBox分组显示的Demo代码：

XAML:

技术分享 
<Window x:Class="WpfListGroup.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
         xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <CollectionViewSource x:Key="employeeCollectionViewSource" Filter="employeeCollectionViewSource_Filter">
            <CollectionViewSource.SortDescriptions>
                <!--排序描述-->
                <scm:SortDescription PropertyName="Num"/>
            </CollectionViewSource.SortDescriptions>
            <CollectionViewSource.GroupDescriptions>
                <!--分组描述-->
                <PropertyGroupDescription PropertyName="Title"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
        <Style x:Key="nocheckedButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid Width="29.72">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="contentPresenter">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="90"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FF2CA50B"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse x:Name="ellipse" Fill="#FF75AB80" Margin="0" Stroke="{x:Null}" VerticalAlignment="Stretch" Width="16" Height="16"/>
                            <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome"  SnapsToDevicePixels="true"  >
                                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
                                    <ContentPresenter.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Microsoft_Windows_Themes:ButtonChrome>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Row="0" LastChildFill="True" >
            <TextBlock VerticalAlignment="Center" DockPanel.Dock="Left" Text="搜索:"/>
            <Button  Content="  ×  " VerticalAlignment="Center" DockPanel.Dock="Right" 
                   Background="White" BorderBrush="{x:Null}" Margin="0" 
                      Style="{DynamicResource nocheckedButtonStyle}"
                     HorizontalAlignment="Right" 
                     FontFamily="Forte" Foreground="White" ToolTip="清空"
                    Click="btnClearKeyword_Click"/>
            <TextBox x:Name="txtEmployeeKeyword"  VerticalAlignment="Center" TextChanged="txtEmployeeKeyword_TextChanged" />
        </DockPanel>
        <ScrollViewer x:Name="scv1" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <ListBox x:Name="lbx1" SelectionMode="Extended"  ItemsSource="{Binding Source={StaticResource ResourceKey=employeeCollectionViewSource}}">
                <!--分组样式-->
                <ListBox.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Expander>
                                                <Expander.Header>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition/>
                                                        </Grid.ColumnDefinitions>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition/>
                                                        </Grid.RowDefinitions>
                                                        <StackPanel Orientation="Horizontal" Margin="0,0,10,0">
                                                            <!--分组的组名-->
                                                            <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" />
                                                            <!--该分组元素(员工)的总和数-->
                                                            <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount, StringFormat=(共{0}条)}"/>
                                                        </StackPanel>
                                                        <Line Grid.Column="1" SnapsToDevicePixels="true"  X1="0" X2="1" Stretch="Fill"  StrokeThickness="1"/>
                                                    </Grid>
                                                </Expander.Header>
                                                <ItemsPresenter />
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ListBox.GroupStyle>
                <!--右键菜单-->
                <ListBox.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Show" Click="MenuItem_Click"/>
                    </ContextMenu>
                </ListBox.ContextMenu>
                <!--“没有”绑定ListBox.ItemTemplate，是因为在Employee类重写了ToString()方法-->
            </ListBox>
        </ScrollViewer>
        <ScrollViewer x:Name="scv2" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Visibility="Collapsed">
            <ListBox Name="lbx2" ItemsSource="{Binding Source={StaticResource employeeCollectionViewSource}}" SelectionMode="Extended">   <!--按Ctrl键可多选-->
                <ListBox.ContextMenu>
                    <ContextMenu>
                        <!--右键菜单-->
                        <MenuItem Header="Show" Click="MenuItem_Click"/>
                    </ContextMenu>
                </ListBox.ContextMenu>
            </ListBox>
        </ScrollViewer>
    </Grid>
</Window>
View Code

 


C#:

技术分享 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace WpfListGroup
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            #region 基础数据(员工集合)
            ObservableCollection<Employee> employeeList = new ObservableCollection<Employee>
            { 
               new Employee{EmployeeNum="0027",EmployeeName="张三",Sex="男",Title="副经理"},
               new Employee{EmployeeNum="1086",EmployeeName="春丽",Sex="女",Title="秘书"},
               new Employee{EmployeeNum="1031",EmployeeName="王五",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1211",EmployeeName="赵阳",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1201",EmployeeName="孙迪",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1416",EmployeeName="李玥玥",Sex="女",Title="秘书"},
               new Employee{EmployeeNum="0017",EmployeeName="钱哆哆",Sex="男",Title="副经理"},
               new Employee{EmployeeNum="1016",EmployeeName="周畅",Sex="女",Title="秘书"},
               new Employee{EmployeeNum="1231",EmployeeName="郑超",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1131",EmployeeName="王思聪",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1871",EmployeeName="李文",Sex="男",Title="普通员工"},
               new Employee{EmployeeNum="1266",EmployeeName="周琪妹",Sex="女",Title="秘书"}
            }; 
            #endregion

            CollectionViewSource employeeCvs = (CollectionViewSource)this.FindResource("employeeCollectionViewSource");
            employeeCvs.Source = employeeList;
        }
        /// <summary>
        /// 右键菜单、按住Ctrl键可多选
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            //获取关键字
            string keyword = txtEmployeeKeyword.Text.Trim();
            if (string.IsNullOrEmpty(keyword))//如果没有关键字
            {
                if (lbx1.SelectedItem != null)//判断lbx1有没有选中项
                {
                    foreach (var item in lbx1.SelectedItems)
                    {
                        Employee employee = item as Employee;
                        string msg = string.Format("姓名：{0},工号:{1},性别:{2},职位:{3}", employee.EmployeeName, employee.EmployeeNum, employee.Sex, employee.Title);
                        MessageBox.Show(msg);
                    }
                }
            }
            else
            {
                if (lbx2.SelectedItem != null)//有关键字的话，显示lbx2
                {
                    foreach (var item in lbx2.SelectedItems)//判断lbx2有没有选中项
                    {
                        Employee employee = item as Employee;
                        string msg = string.Format("姓名：{0},工号:{1},性别:{2},职位:{3}", employee.EmployeeName, employee.EmployeeNum, employee.Sex, employee.Title);
                        MessageBox.Show(msg);
                    }
                }
            }
        }

        /// <summary>
        /// 关键字改变时触发
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void txtEmployeeKeyword_TextChanged(object sender, TextChangedEventArgs e)
        {
            string keyword = txtEmployeeKeyword.Text.Trim();
            if (string.IsNullOrEmpty(keyword))//无关键字，显示scv1下的listbox(有分组)
            {

                scv1.Visibility = Visibility.Visible;
                scv2.Visibility = Visibility.Collapsed;
            }
            else//有关键字，显示scv2下的listbox(无分组)
            {
                scv1.Visibility = Visibility.Collapsed;
                scv2.Visibility = Visibility.Visible;
            }
            CollectionViewSource employeeCvs = (CollectionViewSource)this.FindResource("employeeCollectionViewSource");
            employeeCvs.View.Refresh();//刷新View
        }
        /// <summary>
        /// 根据关键字(工号或姓名)筛选员工
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void employeeCollectionViewSource_Filter(object sender, FilterEventArgs e)
        {
            string keyword = txtEmployeeKeyword.Text.Trim();
            Employee employee = e.Item as Employee;
            if (employee != null)
            {
                if (string.IsNullOrEmpty(keyword))//无关键字，直接Accept
                {
                    e.Accepted = true;
                }
                else
                {
                    //有关键字、筛选员工号或姓名中包含关键字的员工
                    e.Accepted = employee.EmployeeNum.Contains(keyword) || employee.EmployeeName.Contains(keyword);
                }
            }
        }
        /// <summary>
        /// 清空关键字
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnClearKeyword_Click(object sender, RoutedEventArgs e)
        {
            this.txtEmployeeKeyword.Clear();
        }
    }

    public class Employee:INotifyPropertyChanged
    {
        #region 实现更改通知
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        } 
        #endregion

        /// <summary>
        /// 重载ToString()方法
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return this.EmployeeNum + "  " + this.EmployeeName;
        }

        private string title;
        /// <summary>
        /// 职位
        /// </summary>
        public string Title
        {
            get { return title; }
            set { title = value;
            RaisePropertyChanged("Title");
            }
        }
        
        private string employeeName;
        /// <summary>
        /// 姓名
        /// </summary>
        public string EmployeeName
        {
            get { return employeeName; }
            set { employeeName = value;
            RaisePropertyChanged("EmployeeName");
            }
        }
        private string employeeNum;
        /// <summary>
        /// 工号
        /// </summary>
        public string EmployeeNum
        {
            get { return employeeNum; }
            set { employeeNum = value;
            RaisePropertyChanged("EmployeeNum");
            }
        }
        private string sex;
        /// <summary>
        /// 性别
        /// </summary>
        public string Sex
        {
            get { return sex; }
            set { sex = value;
            RaisePropertyChanged("Sex");
            }
        }

    }
}
View Code

运行效果：

技术分享

右键菜单点击“Show” 弹出选中项的员工信息：

技术分享

 

输入关键字"同步"筛选模糊查询员工：

技术分享

 

点击清空按钮清空关键字，“恢复”分组数据：

技术分享

 

总结核心xaml:

①资源CollectionViewSource， CollectionViewSource.GroupDescriptions:分组描述(依据),CollectionViewSource.SortDescriptions：分组排序(描述)

在资源中：

技术分享 
  <CollectionViewSource x:Key="employeeCollectionViewSource" Filter="employeeCollectionViewSource_Filter">
            <CollectionViewSource.SortDescriptions>
                <!--排序描述-->
                <scm:SortDescription PropertyName="Num"/>
            </CollectionViewSource.SortDescriptions>
            <CollectionViewSource.GroupDescriptions>
                <!--分组描述-->
                <PropertyGroupDescription PropertyName="Title"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
View Code

②绑定到ListBox的Itemsource上，设置分组样式，使用Expander控件使分组可以折叠：

技术分享 
    <ScrollViewer x:Name="scv1" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <ListBox x:Name="lbx1" SelectionMode="Extended"  ItemsSource="{Binding Source={StaticResource ResourceKey=employeeCollectionViewSource}}">
                <!--分组样式-->
                <ListBox.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Expander>
                                                <Expander.Header>
                                                    <Grid>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition/>
                                                        </Grid.ColumnDefinitions>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition/>
                                                        </Grid.RowDefinitions>
                                                        <StackPanel Orientation="Horizontal" Margin="0,0,10,0">
                                                            <!--分组的组名-->
                                                            <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" />
                                                            <!--该分组元素(员工)的总和数-->
                                                            <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount, StringFormat=(共{0}条)}"/>
                                                        </StackPanel>
                                                        <Line Grid.Column="1" SnapsToDevicePixels="true"  X1="0" X2="1" Stretch="Fill"  StrokeThickness="1"/>
                                                    </Grid>
                                                </Expander.Header>
                                                <ItemsPresenter />
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ListBox.GroupStyle>
                <!--右键菜单-->
                <ListBox.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Show" Click="MenuItem_Click"/>
                    </ContextMenu>
                </ListBox.ContextMenu>
                <!--“没有”绑定ListBox.ItemTemplate，是因为在Employee类重写了ToString()方法-->
            </ListBox>
        </ScrollViewer>
View Code


总结核心C#:

①CollectionViewSource的筛选器Filter的方法：

技术分享 
 /// <summary>
        /// 根据关键字(工号或姓名)筛选员工
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void employeeCollectionViewSource_Filter(object sender, FilterEventArgs e)
        {
            string keyword = txtEmployeeKeyword.Text.Trim();
            Employee employee = e.Item as Employee;
            if (employee != null)
            {
                if (string.IsNullOrEmpty(keyword))//无关键字，直接Accept
                {
                    e.Accepted = true;
                }
                else
                {
                    //有关键字、筛选员工号或姓名中包含关键字的员工
                    e.Accepted = employee.EmployeeNum.Contains(keyword) || employee.EmployeeName.Contains(keyword);
                }
            }
        }
View Code

②关键字文本框的文本发生改变时触发的事件：

技术分享 
/// <summary>
        /// 关键字改变时触发
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void txtEmployeeKeyword_TextChanged(object sender, TextChangedEventArgs e)
        {
            string keyword = txtEmployeeKeyword.Text.Trim();
            if (string.IsNullOrEmpty(keyword))//无关键字，显示scv1下的listbox(有分组)
            {

                scv1.Visibility = Visibility.Visible;
                scv2.Visibility = Visibility.Collapsed;
            }
            else//有关键字，显示scv2下的listbox(无分组)
            {
                scv1.Visibility = Visibility.Collapsed;
                scv2.Visibility = Visibility.Visible;
            }
            CollectionViewSource employeeCvs = (CollectionViewSource)this.FindResource("employeeCollectionViewSource");
            employeeCvs.View.Refresh();//刷新View
        }
View Code

总结：以上就是ListBox的分组、折叠、筛选显示的Demo。日积月累，水滴石穿！

 

wpf CollectionViewSource与ListBox的折叠、分组显示，及输入关键字 Filter的筛选

标签：

原文地址：http://www.cnblogs.com/527289276qq/p/4379494.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！