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

[Aaronyang] 写给自己的WPF4.5 笔记8[复杂数据处理三步曲，数据视图精讲1/3]

时间：2015-01-29 19:14:21      阅读：557      评论：0      收藏：0      [点我收藏+]

标签：

真的好累了 ，笑了。做回自己吧       -------------      Aaronyang技术分享 www.ayjs.net

博文摘要：

  1. 详细介绍了WPF中视图的种类和开始学之前的准备工作
  2. 视图的 分页视图导航 DEMO1
  3. 详细讲解了 视图中xaml的声明方式，以及xaml的排序和分组 DEMO2
  4. 实例讲解了DataTable的BindingListCollectionView的类似操作 DEMO3
  5. 讲解了LINQ中的过滤 Predicate委托，以及过滤的几种方式
  6. 讲解了 视图中后台的排序和分组以及过滤，GroupStyle,GroupItem的讲解 
  7. 全方位的推广了WPF4.5的实时成型的知识，动态更新界面上的分组，排序，过滤的数据的方式，而非手动后台Refresh     DEMO4
  8. 其他的细节的讲解

 

知识引入：

　　所有视图都继承自CollectionView类，其中有2个特殊的子类：ListCollectionView和BindingListCollectionView。

     视图选择：如果数据源实现了IBindingList接口，就会创建BindingListCollectionView，当绑定ADO.NET中的DataTable对象时会创建该视图。

                   如果实现了IList接口，就会创建ListCollectionView，当绑定到ObservableCollection集合就会创建该视图

                   如果以上都没实现，但实现了IEnumerable接口，就会得到基本的CollectionView，如果有大量的更删改不推荐使用该视图，使用ObservableCollection最简单。

学之前的准备

1. 基本的DEMO布局

<Window x:Class="TemplateDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="数据视图DEMO" Width="1000" Height="600">
    <UniformGrid Columns="2" Rows="2">
        <DockPanel Grid.Column="0" Grid.Row="0" Background="#FFF7F6F6" LastChildFill="True" x:Name="demo1">
            <Grid DockPanel.Dock="Top" Background="AliceBlue" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO1 阅读Ay的博客</TextBlock>
            </Grid>

            <Grid DockPanel.Dock="Bottom" Height="28"  HorizontalAlignment="Stretch"  Background="AliceBlue" >
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                    <TextBlock x:Name="tbPageInfo" VerticalAlignment="Center" Margin="0,0,5,0"> 1/20 </TextBlock>
                    <Button Width="100" Margin="2">上一个</Button>
                    <Button Width="100" Margin="2">下一个</Button>
                </StackPanel>
            </Grid>
            
            <Canvas>
                <TextBlock>内容</TextBlock>
            </Canvas>
        </DockPanel>


        <DockPanel Grid.Column="0" Grid.Row="1">

        </DockPanel>
        <DockPanel Grid.Column="1" Grid.Row="0">

        </DockPanel>
        <DockPanel Grid.Column="1" Grid.Row="1" Background="#FFF7F6F6">

        </DockPanel>
    </UniformGrid>
</Window>

大致图：

技术分享

后台创建数据源：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Shapes;

namespace TemplateDemo
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //创建数据源
            DateTime dt=DateTime.Now.AddHours(-12);
            BlogCollection b = new BlogCollection();
            for (int i = 1; i <= 100; i++)
            {
                AyBlog ay = new AyBlog();
                ay.Name = "wpf的博客" + i;
                ay.Content = "wpf是window上最好的桌面技术，真的很好" + i;
                ay.CreateTime = dt.AddMinutes(i);
                b.Add(ay);
            }
            demo1.DataContext = b;
        }



    }


    public class AyBlog{
        public string Name { get; set; }
        public string Content { get; set; }
        public DateTime CreateTime { get; set; }
    }

    public class BlogCollection : ObservableCollection<AyBlog>
    { 
        
    }

}

 

 =============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

 

到目前为止：准备工作已经完成，开始吧

1. DEMO1 数据导航

由于创建的是ObservableCollection，所以视图选择是ListCollectionView，我们在窗口后台代码的顶部声明。我们还要记下view中的count

  private ListCollectionView view;    int maxCount = 0;

并在窗体加载时候，获得视图CollectionViewSource.GetDefaultView(数据源)

  private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //创建数据源
            DateTime dt=DateTime.Now.AddHours(-12);
            BlogCollection b = new BlogCollection();
            for (int i = 1; i <= 100; i++)
            {
                AyBlog ay = new AyBlog();
                ay.Name = "wpf的博客" + i;
                ay.Content = "wpf是window上最好的桌面技术，真的很好" + i;
                ay.CreateTime = dt.AddMinutes(i);
                b.Add(ay);
            }
            demo1.DataContext = b;

            view = (ListCollectionView)CollectionViewSource.GetDefaultView(demo1.DataContext);
            view.CurrentChanged += view_CurrentChanged;
            maxCount = view.Count;
        }

        void view_CurrentChanged(object sender, EventArgs e)
        {
            throw new NotImplementedException();
        }

我们继续view.  出来东西，发现貌似分页的东西，第一个，最后一个，下一个，上一个，移动到指定位置，移动到指定对象，OK，我们继续修改前台代码，让分页更复杂

技术分享

 <DockPanel Grid.Column="0" Grid.Row="0" Background="#FFF7F6F6" LastChildFill="True" x:Name="demo1">
            <Grid DockPanel.Dock="Top" Background="AliceBlue" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO1 阅读Ay的博客</TextBlock>
            </Grid>

            <Grid DockPanel.Dock="Bottom" Height="28"  HorizontalAlignment="Stretch"  Background="AliceBlue" >
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                    <TextBox Width="30" Height="20" x:Name="txtCurrentPosition" Text="1" TextAlignment="Center"></TextBox>
                    <TextBlock VerticalAlignment="Center" Margin="5,0,5,0">/</TextBlock>
                    <TextBlock x:Name="tbPageCount"  VerticalAlignment="Center" Margin="0,0,5,0">100</TextBlock>
                    <Button Width="30" Height="20" x:Name="btnMoveTo"  Margin="0,0,15,0" Click="btnMoveTo_Click">前往</Button>
                    <Button Width="60" Margin="2" x:Name="btnFirst" Click="btnFirst_Click">第一个</Button>
                    <Button Width="60" Margin="2" x:Name="btnPreview" Click="btnPreview_Click">上一个</Button>
                    <Button Width="60" Margin="2" x:Name="btnNext" Click="btnNext_Click">下一个</Button>
                    <Button Width="60" Margin="2" x:Name="btnEnd" Click="btnEnd_Click">最后一个</Button>
                </StackPanel>
            </Grid>
            
            <Canvas>
                <StackPanel Orientation="Horizontal">
                    <TextBlock>标题：</TextBlock>
                    <TextBlock Text="{Binding Path=Name}"></TextBlock>
                    <TextBlock Margin="10,0,0,0" Text="{Binding Path=CreateTime,StringFormat={}{0:yyyy-MM-dd HH:mm:ss}}"></TextBlock>
                </StackPanel>
                <TextBlock Text="{Binding Content}" Canvas.Top="30" TextWrapping="Wrap">
                </TextBlock>
            </Canvas>
        </DockPanel>

 

修改后前台的样子：

技术分享

接下来点击前往，我们要判断文本框是否数字，而后面的4个按钮要该改变文本框的值，我们可以在view的CurrentChanged事件后更改文本框的值。并且那个100在后台 tbPageCount.Text = maxCount.ToString();

   void view_CurrentChanged(object sender, EventArgs e)
        {
            txtCurrentPosition.Text = (view.CurrentPosition+1).ToString();
            //第一项等于0的时候，禁用上一个，最后一个，禁用下一个按钮
            btnPreview.IsEnabled = view.CurrentPosition > 0;
            btnNext.IsEnabled = view.CurrentPosition < view.Count - 1;
            if (view.CurrentPosition == 0)
            {
                btnFirst.Visibility = Visibility.Collapsed;
            }else{
               btnFirst.Visibility = Visibility.Visible;
            }


            if (view.CurrentPosition == view.Count - 1)
            {
                btnEnd.Visibility = Visibility.Collapsed;
            }
            else {
                btnEnd.Visibility = Visibility.Visible;
            }
        }

OK,接下来实现其他几个按钮：

  private void btnMoveTo_Click(object sender, RoutedEventArgs e)
        {
            string a=txtCurrentPosition.Text;
            if(a.Length==0){
                MessageBox.Show("请输入位置号");
                txtCurrentPosition.Focus();
                return;
            }
            int p;
            if(int.TryParse(a,out p)){
                if (p > maxCount) {
                    MessageBox.Show("指定位置不能大于"+maxCount);
                    txtCurrentPosition.Focus();
                    return;
                }
                view.MoveCurrentToPosition(p-1);
            }
        }

        private void btnFirst_Click(object sender, RoutedEventArgs e)
        {
            view.MoveCurrentToFirst();
        }

        private void btnPreview_Click(object sender, RoutedEventArgs e)
        {
            view.MoveCurrentToPrevious();
        }

        private void btnNext_Click(object sender, RoutedEventArgs e)
        {
            view.MoveCurrentToNext();
        }

        private void btnEnd_Click(object sender, RoutedEventArgs e)
        {
            view.MoveCurrentToLast();
        }

效果图：

技术分享

OK到目前位置，我们的大致初步认识了视图的作用，接下来，我们继续了解导航中的MoveCurrentTo方法，参数是一个对象，所以演示最好的就是ComboBox了，绑定对象集合，SelectedItem正好最为他的参数

我们增加combobox，并只显示name,我们可以在它的选择改变事件中，添加

<ComboBox x:Name="cboBlogName" ItemsSource="{Binding ElementName=demo1,Path=DataContext}" Width="80" DisplayMemberPath="Name" Height="20" Margin="0,0,5,0" SelectionChanged="cboBlogName_SelectionChanged"></ComboBox>
        private void cboBlogName_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            view.MoveCurrentTo(cboBlogName.SelectedItem);
        }

当然还有更简单的办法，只要在combobox上加上IsSynchronizedWithCurrentItem=true，那么后台代码都不要了

 <ComboBox x:Name="cboBlogName" ItemsSource="{Binding ElementName=demo1,Path=DataContext}" Width="80" DisplayMemberPath="Name" Height="20" Margin="0,0,5,0" IsSynchronizedWithCurrentItem="True"></ComboBox>

简单效果图：其实这里的下拉，我们可以显示ID，只要对象里有ID号

技术分享

 

 =============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

 

2. xaml中定义视图方式，排序，分组，过滤

为了演示分组和排序，我们修改ayblog的创建CreateTime的方式

    //demo2
            DateTime dt2 = DateTime.Now.AddMonths(-13);
            Random monthRandom = new Random();
            Random dayRandom = new Random();
            Random minRandom = new Random();
            BlogCollection b2 = new BlogCollection();
            for (int i = 1; i <= 100; i++)
            {
                AyBlog ay = new AyBlog();
                ay.Name = "wpf的博客" + i;
                ay.Content = "wpf是window上最好的桌面技术，真的很好" + i;
                ay.CreateTime = dt2.AddMonths(monthRandom.Next(1, 14)).AddDays(dayRandom.Next(-30, 60)).AddMinutes(minRandom.Next(-60,120));
                b2.Add(ay);
            }

前面第二个demo基本布局

   <DockPanel Grid.Column="0" Grid.Row="1" LastChildFill="True" x:Name="demo2">
            <Grid DockPanel.Dock="Top" Background="YellowGreen" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO2 博客按月份分组</TextBlock>
            </Grid>
            <Canvas>
                <ListBox x:Name="bloglist">
                    
                </ListBox>
            </Canvas>

        </DockPanel>

接下来，我们需要在xaml中定义个视图，关于 CollectionViewSource有2个属性：View封装了视图对象，Source封装了数据源，还有其他的属性，例如排序，分组，过滤事件。WPF对Listbox绑定的CollectionViewSource对象自动进行了处理，不需要指定CollectionViewSource.View

  <Window.Resources>
        <CollectionViewSource x:Key="BlogView">
            
        </CollectionViewSource>
    </Window.Resources>

接着在listbox指定使用这个视图

        <ListBox x:Name="bloglist" ItemsSource="{Binding Source={StaticResource BlogView}}">

接下来，我们需要在后台给这个视图赋值

技术分享

运行项目，效果如下：

技术分享

接下来，我们简单设置listbox模板，并调整宽高，这个我们在上一篇博客讲过了，这里不讲解了

  <ListBox x:Name="bloglist" ItemsSource="{Binding Source={StaticResource BlogView}}"  Height="252">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Name="bd" Width="460">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}"></TextBlock>
                                    <TextBlock Margin="10,0,0,0" Text="{Binding Path=CreateTime,StringFormat={}{0:yyyy-MM-dd HH:mm:ss}}"></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

技术分享

此时博客还没有按照时间排序，只是根据集合的添加顺序显示的，接下来我们排序下，但这次不在后台排序集合

我们需要使用 SortDescription，但这个命名空间在别的地方，我们需要引入空间

 xmlns:component="clr-namespace:System.ComponentModel;assembly=WindowsBase"

修改视图细节

   <CollectionViewSource x:Key="BlogView">
            <CollectionViewSource.SortDescriptions>
                <component:SortDescription PropertyName="CreateTime" Direction="Descending"/>
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>

技术分享

接着，我们按照年月分组，我们需要使用GroupDescriptions

但是分组没那么简单，我们需要一个分组规则，就是保证创建的组名都一致，这样listbox就可以分组显示了，接着我们处理下组名的样式，表明这不是个选择项，是一个组名字，这个demo就完成了

在上篇博客中，我们说到了 binding的二次处理，其中有个思路就是 值转换器，WPF的分组中提供了Converter参数，所以我们可以试着新建一个实现IValueConverter类，以达到产生很多组名，就好比每个视图中的每个对象有了新属性组名字，这样listbox指定了分组样式后就知道了如何进行分组，从而显示了

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace TemplateDemo
{
    public class BlogMonthGroupConverter:IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            DateTime dt=(DateTime)value;
            return dt.Year + "年-" + dt.Month+"月";
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

    }
}

转换器的使用，都是先声明资源，然后使用

  <local:BlogMonthGroupConverter x:Key="blogMonthConverter" />

        <CollectionViewSource x:Key="BlogView">
            <CollectionViewSource.SortDescriptions>
                <component:SortDescription PropertyName="CreateTime" Direction="Descending"/>
            </CollectionViewSource.SortDescriptions>
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="CreateTime" Converter="{StaticResource blogMonthConverter}"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

此时视图已经自动处理了数据，貌似加了分组的组名新特性，让使用者可以分组显示了，但是让使用者，例如本demo中使用者是listbox，所以我们还要指定组样式，不然组那一条信息显示不出来。

  <ListBox x:Name="bloglist" ItemsSource="{Binding Source={StaticResource BlogView}}"  Height="252">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Name="bd" Width="460">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}"></TextBlock>
                                    <TextBlock Margin="10,0,0,0" Text="{Binding Path=CreateTime,StringFormat={}{0:yyyy-MM-dd HH:mm:ss}}"></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="White" Background="#9ACD32" Margin="0,5,0,0" Padding="3"/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListBox.GroupStyle>
                </ListBox>

效果图：

技术分享

 接下来就是演示过滤的用法，需求：只要大于2014年的博客

技术分享

view的filter对象 需要的是一个Predicate委托

技术分享

Predicate委托跟Func差不多，内置常用委托，一个输入参数，返回bool的委托，所以你定义个结构一样的方法作为参数传进去就行了。

view的过滤方法中，每次都把本质是Ayblog对象的listboxitem的对象作为参数传入FilterBlog，如果返回true，就显示，否则剔除

效果图:

技术分享

predicate的等效方法

  view2.Filter = delegate(object obj)
            {
                AyBlog ay = (AyBlog)obj;
                if (ay.CreateTime.Year > 2014)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            };

BindingListCollectionView的过滤，典型的从DataTable的DataView获取。

OK，我们创建DEMO3，写一个DataTable的过滤的例子，复制demo2的代码，修改部分name属性，防止重复名字报错

 <DockPanel Grid.Column="1" Grid.Row="0" LastChildFill="True" x:Name="demo3">
            <Grid DockPanel.Dock="Top" Background="YellowGreen" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO3 博客按月份分组(DataTable过滤)</TextBlock>
            </Grid>
            <Canvas>
                <ListBox x:Name="bloglist3" Height="252">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Name="bd" Width="460">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}"></TextBlock>
                                    <TextBlock Margin="10,0,0,0" Text="{Binding Path=CreateTime,StringFormat={}{0:yyyy-MM-dd HH:mm:ss}}"></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="White" Background="#9ACD32" Margin="0,5,0,0" Padding="3"/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListBox.GroupStyle>
                </ListBox>
            </Canvas>
        </DockPanel>

在这段代码中，我没有使用xaml中的视图CollectionViewSource，因为我想演示后台view怎样才能增加分组和排序的代码。DataTable的过滤不是使用Filter而是使用CustomFilter，写法跟Sql的where的条件差不多

在后台，第一步，我们需要创建一个DataTable的数据源才行，然后绑定listbox的ItemsSource，从而得到View

      //DEMO3 aaronyang 二〇一五年一月二十九日 15:05:16
            //创建空表
            DataTable datatable = new DataTable("AyBlog");
            //创建列
            datatable.Columns.Add("Name", System.Type.GetType("System.String"));
            datatable.Columns.Add("Content", System.Type.GetType("System.String"));
            datatable.Columns.Add("CreateTime", System.Type.GetType("System.DateTime"));
            for (int i = 1; i <= 100; i++)
            {
                DataRow dr = datatable.NewRow();
                dr["Name"] = "wpf的博客" + i;
                dr["Content"] = "wpf是window上最好的桌面技术，真的很好" + i;
                dr["CreateTime"] = dt2.AddMonths(monthRandom.Next(1, 14)).AddDays(dayRandom.Next(-30, 60)).AddMinutes(minRandom.Next(-60, 120));
                datatable.Rows.Add(dr);
            }
           
            //指定listbox的ItemsSource
            bloglist3.ItemsSource = datatable.DefaultView;
            ////获得视图
            ICollectionView cv = CollectionViewSource.GetDefaultView(this.bloglist3.ItemsSource);
            //添加排序和分组
            cv.SortDescriptions.Add(new SortDescription("CreateTime", ListSortDirection.Descending));
            cv.GroupDescriptions.Add(new PropertyGroupDescription("CreateTime", new BlogMonthGroupConverter()));

此时运行项目已经可以了，就是不带过滤而已，接着增加过滤的代码

   ////添加过滤
            BindingListCollectionView view3 = cv as BindingListCollectionView;
            if (view3 != null)
            {
                view3.CustomFilter = "CreateTime>‘2014-12-31 23:59:59‘";
            }

到目前为止，效果图：

技术分享

接下来，我们来显示每组的数量，我们在DEMO3的listbox，修改GroupStyle的数据模板。

 <ListBox.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                                        <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="White" Background="#9ACD32" Margin="0,5,0,0" Padding="3"/>
                                        <TextBlock Text="{Binding Path=ItemCount,StringFormat=‘    共{0}篇‘}" FontWeight="Bold" Foreground="White" Background="#9ACD32" Margin="0,5,0,0" Padding="3"/>
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListBox.GroupStyle>

效果图：

技术分享

这里绑定的Name属性是PorpertyGroupDescription对象的Name属性。

提示1：

DataTable方式的过滤和排序的细节是存在DataTable的DataView中的，所以共享一个DataTable值时候，效果是同步的。ListCollectionView的CustomSort排序支持一个类，继承IComparer的类，类似LINQ中的比较器，对象的某个属性怎么和另一个对象的某个属性比，返回int的比较。

 

=============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

 

分组补充：当使用分组时候，列表为每个分组创建了单独的GroupItem对象，并且为列表添加了这些GroupItem对象。GroupItem是内容控件，所以每个Group对象都包含了一个适当的具有实际数据的容器（例如ListBoxItem），显示分组就需要格式化GroupItem元素。例如上例中使用了GroupStyle

关于分组虚拟化，就是分组后，有的组中的数据很多，即使ListBox控件支持了虚拟化，但也不会在启用虚拟化时候使用，我们需要在容器中使用VirtualizingPanel.IsVirtualizingWhenGrouping

     <ListBox x:Name="bloglist3" Height="252"  VirtualizingPanel.IsVirtualizingWhenGrouping="True">

此时，我们把DEMO3，创建10万个数据，然后分组，前提我们使用了VirtualizingPanel.IsVirtualizingWhenGrouping="true"，时间大约2-3秒加载完了，还算是可以的

技术分享

 

 =============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

DEMO4 实时成型（WPF4.5）

需求：例如DEMO2，如果，如果此时在后台修改了某条已经被过滤掉的博客的时间到2015年，而视图是有过滤器的，此时是不会立即变化的，不会重新归组，排序等，你需要增加一个按钮，然后单击按钮，执行ICollectionViewSource.Refresh()方法刷新视图。才会有变化。

那么在WPF4.5中，增加了实时成型的知识，就是说 当后台修改某条博客的时间，前台会自动变化。或者增加一个博客到集合中，也会自动分组和排序和过滤等。

要使用实时成型，需要满足3个条件：

  1. 数据对象必须实现INotifyPropertyChanged

        public class AyBlogLive:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, e);
            }
        }
        private string name;
        public string Name
        {
            get { return name; }
            set { 
                name = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Name"));
            }
        }
        private string content;
        public string Content
        {
            get { return content; }
            set
            {
                content = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Content"));
            }
        }

        private DateTime createTime;
        public DateTime CreateTime
        {
            get { return createTime; }
            set
            {
                createTime = value;
                OnPropertyChanged(new PropertyChangedEventArgs("CreateTime"));
            }
        }
    }

  2. 集合必须实现ICollectionViewLiveShaping，而ListCollectionView和BindingListCollectionView已经实现了。

        public class BlogCollectionLive : ObservableCollection<AyBlogLive>
    {

    }
  3. 明确启用实时成型，设置视图的IsLiveFiltering，IsLiveSorting，IsLiveGrouping,都是bool的，比如IsLiveFiltering设置true，集合将会检查那些影响当前设置的过滤条件的变化，启用后指定监视哪些属性LiveFilteringProperties，LiveGroupingProperties，LiveSortingProperties

  =============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

 2.开始练习

在上面讲解标准中，我已经单独创建新的集合BlogCollectionLive，新的博客类AyBlogLive

前台界面，我们拷贝DEMO2的部分代码，更改Key的名字为BlogViewLive

  <CollectionViewSource x:Key="BlogViewLive">
            <CollectionViewSource.SortDescriptions>
                <component:SortDescription PropertyName="CreateTime" Direction="Descending"/>
            </CollectionViewSource.SortDescriptions>
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="CreateTime" Converter="{StaticResource blogMonthConverter}"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

拷贝DEMO2的前台代码并修改，指定新的BlogViewLive视图，调整宽高，底部加上2个按钮

  <DockPanel Grid.Column="0" Grid.Row="1" LastChildFill="True" x:Name="demo4" Background="#FFF7F6F6">
            <Grid DockPanel.Dock="Top" Background="#E5D411" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO4 博客按月份分组(实时成型)</TextBlock>
            </Grid>

            <Grid DockPanel.Dock="Bottom" Height="28"  HorizontalAlignment="Stretch"  Background="#E5D411" >
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                    <Button Height="20" x:Name="btnLiveTestInsert"  Margin="0,0,15,0" Click="btnLiveTestInsert_Click">增加一篇3月博客</Button>
                    <Button Height="20" x:Name="btnLiveTestUpdate"  Margin="0,0,15,0" Click="btnLiveTestUpdate_Click">修改一篇2014的文章</Button>
                </StackPanel>
            </Grid>
            <Canvas>
                <ListBox x:Name="bloglist4" ItemsSource="{Binding Source={StaticResource BlogViewLive}}"  Height="228">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Name="bd" Width="460">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}"></TextBlock>
                                    <TextBlock Margin="10,0,0,0" Text="{Binding Path=CreateTime,StringFormat={}{0:yyyy-MM-dd HH:mm:ss}}"></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ListBox.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="White" Background="#9ACD32" Margin="0,5,0,0" Padding="3"/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListBox.GroupStyle>
                </ListBox>
            </Canvas>
        </DockPanel>

后台-- 由于要增加新的数据测试界面是否实时过滤分组和排序，我们需要把BlogCollectionLive集合声明在外面

       private ListCollectionView view;
        int maxCount = 0;
        //demo4
        BlogCollectionLive b4 = new BlogCollectionLive();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
         ...
        ｝

在窗口的Loaded中，我们新增DEMO4的代码

            //demo4
            for (int i = 1; i <= 100; i++)
            {
                AyBlogLive ay = new AyBlogLive();
                ay.Name = "Live Ay的WPF博客" + i;
                ay.Content = "Live Ay的WPF是window上最好的桌面技术，真的很好" + i;
                ay.CreateTime = dt2.AddMonths(monthRandom.Next(1, 14)).AddDays(dayRandom.Next(-30, 60)).AddMinutes(minRandom.Next(-60, 120));
                b4.Add(ay);
            }
            CollectionViewSource cvs4 = (CollectionViewSource)this.FindResource("BlogViewLive");
            //拿到视图对象，对它的Source进行赋值
            cvs4.Source = b4;
            ListCollectionView view4 = cvs4.View as ListCollectionView;
            //版本1 Filter
            view4.Filter = new Predicate<object>(FilterBlogLive);
            view4.IsLiveFiltering = true;
            //view4.IsLiveSorting = true;
            //view4.IsLiveGrouping = true;
            view4.LiveFilteringProperties.Add("CreateTime");

因为老的FilterBlog方法中，转换类型是AyBlog，所以我们索性重新写个过滤的方法，只是更换过滤时候强制转换的类型

    private bool FilterBlogLive(object obj)
        {
            AyBlogLive ay = (AyBlogLive)obj;
            if (ay.CreateTime.Year > 2014)
            {
                return true;
            }
            else
            {
                return false;
            }
        }

到目前为止的界面如下：

技术分享

接下来，我们实现一个增加一篇3月博客的事件

      private void btnLiveTestInsert_Click(object sender, RoutedEventArgs e)
        {
            DateTime d=DateTime.Now;
            DateTime n=new DateTime(d.Year,3,d.Day,d.Hour,d.Minute,d.Second);
            b4.Add(new AyBlogLive { Name="aaronyang测试WPF实时成型",Content="测试啦",CreateTime=n});
        }

然后修改一篇2014的文章，因为由于2014年的文章被过滤过了，所以我们修改他为2015年的，看会不会显示

    private void btnLiveTestUpdate_Click(object sender, RoutedEventArgs e)
        {
            var findone2014blog = b4.FirstOrDefault(x => x.CreateTime.Year == 2014);
            findone2014blog.Name = "Ay动态修改2014的WPF文章版变成2015年实时成型测试";
            DateTime dt = findone2014blog.CreateTime;
            findone2014blog.CreateTime = new DateTime(2015, dt.Month, dt.Day, dt.Hour, dt.Minute, dt.Second);
        }

整体效果图演示：

技术分享

 

aaronyang 数据视图 案例下载：下载

  =============潇洒的版权线==========www.ayjs.net===== Aaronyang ========= AY =========== 安徽 六安 杨洋 ==========   未经允许不许转载 =========

[Aaronyang] 写给自己的WPF4.5 笔记8[复杂数据处理三步曲，数据视图精讲1/3]

标签：

原文地址：http://www.cnblogs.com/AaronYang/p/4256558.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
迷上了代码！