当前位置:网站首页 / WPF / 正文

写给自己的WPF4.5 26[DataGrid 2/3 ]

时间:2015年04月28日 | 作者 : aaronyang | 分类 : WPF | 浏览: 9159次 | 评论 2

样式修改

DEMO下载: 链接:http://pan.baidu.com/s/1mgMLEOw 密码:rqjw


列样式修改

例如内容列文字太多,想换行

  <DataGridTextColumn Header="博客内容" Width="1*" Binding="{Binding Content}">
                            <DataGridTextColumn.ElementStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="TextWrapping" Value="Wrap"/>
                                </Style>
                            </DataGridTextColumn.ElementStyle>
                        </DataGridTextColumn>

Image 15.png

关于对应的Edit模板

    <DataGridTextColumn.EditingElementStyle>
                                <Style TargetType="TextBox">
                                    <Setter Property="Foreground" Value="Green"/>
                                </Style>
                            </DataGridTextColumn.EditingElementStyle>

由于DataGridTextColumn对应的textbox模板,所以我设置编辑时候 ,文本框中的字体颜色为绿色.

其他样式

Image 16.png

行样式修改,例如行变色

LoadingRow,加载Row时候才触发事件,所以滚动条滚动时候就会频繁触发,所以不能放置耗时操作

我们在DataGrid中添加LoadingRow事件

  <DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="false" x:Name="dg2" LoadingRow="dg2_LoadingRow" >

后台事件代码如下:

    private SolidColorBrush highlightBrush = new SolidColorBrush(Colors.GreenYellow);
        private SolidColorBrush normalBrush = new SolidColorBrush(Colors.White);

     
        private void dg2_LoadingRow(object sender, DataGridRowEventArgs e)
        {
            AyBlog blog = e.Row.DataContext as AyBlog;
            if (blog != null) {
                if (blog.ReadCount > 500000)
                    e.Row.Background = highlightBrush;
                else
                    e.Row.Background = normalBrush;
            }
        
        }

效果图,大约50万的阅读量的全部黄绿色标记:

1122.gif

当然你也可以用值转换器完成,比如单元格数字,修改样式

行细节模板 RowDetailsTemplate

     <DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="false" x:Name="dg2" LoadingRow="dg2_LoadingRow" >
                    
                    <DataGrid.RowDetailsTemplate>
                        <DataTemplate>
                            <Border Margin="5" Padding="5" BorderBrush="Brown" Background="Brown" BorderThickness="1" CornerRadius="2">
                                <TextBlock Text="{Binding Content}" TextWrapping="Wrap" FontSize="12" MaxWidth="300" Foreground="White" TextAlignment="Left"></TextBlock>
                            </Border>
                        </DataTemplate>
                    </DataGrid.RowDetailsTemplate>

关于DataGrid还有如何显示细节的 选择设置

效果图如下:

冻结列 FrozenColumnCount="2" 从datagrid的左侧开始数, 等于1 就是第一列,2就是冻结第1,2列

由于我们的第二个DataGrid是百分比的宽度,所以横向滚动条很少出来,我们就加在第一个DataGrid上

   <DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="true" x:Name="dg1" FrozenColumnCount="2" >

                </DataGrid>

效果图:

选择  相关的操作

SelectionMode="Extended" 多选,配合shift或者ctrl, 默认Single是单选

选择后如何处理呢?

  private void btnGet1_Click(object sender, RoutedEventArgs e)
        {
            AyBlog selectedRow = dg2.SelectedItem as AyBlog;  
            if(selectedRow!=null){
                MessageBox.Show(selectedRow.Name);
            }

        }

        private void btnGet2_Click(object sender, RoutedEventArgs e)
        {
            var selectedRows = dg2.SelectedItems;
            if (selectedRows != null)
            {
                StringBuilder sb = new StringBuilder();
                foreach (var item in selectedRows)
                {
                    AyBlog ayblog = item as AyBlog;
                    if (ayblog != null) {
                        sb.Append("<<" + ayblog.Name + ">>");
                    }
                   
                }
                MessageBox.Show(sb.ToString());
            }
        }

效果图:

3332.gif

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


选中后变色怎么实现呢?我也不知道为什么粉丝们这么多问题..

这里我先用个不太好的办法实现,使用DataGrid的SelectionChanged事件.当然这里我不用这个事件了,我添加个样式

不起作用的代码,因为cellstyle在它下面遮住了它

          <DataGrid.RowStyle >
                        <Style TargetType="DataGridRow">
                            <Setter Property="Background" Value="White"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="Yellow"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="WhiteSmoke"/>
                                    <Setter Property="Foreground" Value="Red"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>

                    </DataGrid.RowStyle>

这里只是列出有这个代码,你也可以注释掉,我们改下CellStyle

   <DataGrid.CellStyle >
                        <Style TargetType="DataGridCell">
                            <Style.Triggers >
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="Red"></Setter>
                                    <Setter Property="Foreground" Value="Yellow"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </DataGrid.CellStyle>

选中后红色背景,黄色文字

221.gif

选择对象滚动刀视野,这里我在创建数据源的时候,第50个对象时候,赋值给外部的一个AyBlog对象-------ScrollIntoView方法

 for (int i = 1; i <= 100; i++)
            {
                AyBlog ay = new AyBlog();
                ay.Name = "wpf的博客" + i;
                ay.Content = "正在研发Ay.Framework.WPF框架,已经过去了第" + i+"天";
                if (i > 20) {
                    djdjyy += "h";
                    ay.Content += djdjyy;
                }
             
                ay.CreateTime = dt.AddMinutes(i);
                ay.ReadCount = rand.Next(100,1000000);
                ay.Address = string.Format(blogUriTemplate, i);
                ay.IsPublish=rand.Next(100) % 2==0;
                ay.CatagoryId = 3;
                ay.Catagories = catagories;

                if (i == 50) {
                    fiftyBlog = ay; ;
                }

                b.Add(ay);
            }

后台代码:

  private void btnScroll3_Click(object sender, RoutedEventArgs e)
        {
            dg2.ScrollIntoView(fiftyBlog);
        }

效果图:

1222.gif

排序功能-  通过CanUserSortColumns可以禁用排序

如果数据源绑定的是 实现了IList接口的集合,就可以,自动获得排序功能

单击一列,升序或者降序,按住Shift单击列,可以进行第二条件排序,以此类推.

关于模板列DataGridTemplateColumn需要指定SortMemberPath属性,因为模板里面绑定了很多属性,需要指定.

Image 18.png

编辑 列

  1. 双击单元格

  2. DataGrid.IsReadOnly设置为true,全局不可以编辑

  3. DataGridColumn.IsReadOnly指定某列不可编辑

  4. 根据绑定的属性,如果没有set属性器,会自动识别

例如编辑 博客的创建时间

    <DataGridTemplateColumn Header="创建时间" Width="1*">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Margin="4" VerticalAlignment="Center" Text="{Binding Path=CreateTime, StringFormat={}{0:d}}"></TextBlock>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                            <DataGridTemplateColumn.CellEditingTemplate>
                                <DataTemplate>
                                    <DatePicker Margin="4" SelectedDate="{Binding Path=CreateTime}"></DatePicker>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellEditingTemplate>
                        </DataGridTemplateColumn>

效果图:

edit.gif

DataGrid编辑相关的事件

BeginningEdit进入编辑模式之前,检查是否可以编辑,也可以决定是否不进入,类似Command的执行前事件

例如我想拿到被单击的单元格所在的行,然后判断对象的值,决定是否可以进入编辑模式,下面这个例子就是 白色背景行(小于50万的点击数)的是不可以进入编辑模式的

 private void dg2_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)
        {
            var dc = e.Row.DataContext as AyBlog;
            if (dc != null)
            {
                if (dc.ReadCount < 500000)
                {
                    e.Cancel = true;
                }
            }

        }

效果图:

begin.gif

例如模板列,我想拿到模板列中的某个控件的值,也就是具体某个单元格的对象

 private void dg2_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)
        {
            //var dc = e.Row.DataContext as AyBlog;
            //if (dc != null)
            //{
            //    if (dc.ReadCount < 500000)
            //    {
            //        e.Cancel = true;
            //    }
            //}

            //假设这里就是操作文本列
            var preValue = (e.Column.GetCellContent(e.Row) as TextBlock).Text;
            MessageBox.Show(preValue);
        }

效果图就不掩饰了,这里我们单击 博客点击数即可.

PreparingCellForEdit事件 --用于模板列,为编辑控件执行最后的初始化操作

   private void dg2_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e)
        {
            //重新绑定集合
            //catagories.Clear();
            //catagories.Add(new BlogCatagory { CatagoryName = "新版ayjs.net", Id = 1 });
            //catagories.Add(new BlogCatagory { CatagoryName = "WPF分享", Id = 3 });
            //catagories.Add(new BlogCatagory { CatagoryName = "新版WPF技术", Id = 2 });
            //catagories.Add(new Blogatagory { CatagoryName = "新版aaronyang", Id = 4 });

            //这里假设单击的是combo列
            var combobox = e.EditingElement as ComboBox;
            //var combobox=  ele.FindName("blogcatagory") as ComboBox;
            if (combobox != null) {
                MessageBox.Show(combobox.Items.Count.ToString());
            }
        }

如果是combobox列,被编辑的本身单元格就是 Combobox,我们使用EditingElement获得被编辑的元素,如果是模板列,你可以通过可视化叔拿到里面的元素,然后处理都可以.

CellEditEnding -- 正在退出编辑 模式时候触发

例如我们在dg2_BeginningEdit获得编辑之前的值

preValue = (e.Column.GetCellContent(e.Row) as TextBlock).Text;

离开时候

    if (e.EditAction == DataGridEditAction.Commit)
            {
                string newValue = (e.EditingElement as TextBox).Text;
                //如果修改后的值和修改前的值不一样
                if (preValue != newValue)
                {
                
                }
                
             }

e.EditAction用来判断是 提交还是离开

接受编辑(单击其他单元格或者 Enter键)        退出编辑例如按下Esc键

可以使用e.Cancel属性回滚修改

RowEditEnding      当用户在编辑完当前行之后导航到新行时候发生.用于验证或者取消修改,比如日期选择,最后一天不能大于 最小日期.

DataGrid - 分组    -主要是 GroupStyle样式,仅供参考

        <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander IsExpanded="True">
                                            <Expander.Header>
                                                <TextBlock Text="{Binding Path=Name}"/>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <DataGridRowsPresenter/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </DataGrid.GroupStyle>

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

其他属性

RowBackground , AlternatingRowBackground(默认奇数是白色背景,偶数是灰色背景) ,例如设置datagrid的 AlternatingRowBackground="AliceBlue"

效果如下:

Image 19.png

Image 21.png

GridLinesVisibility 用来控制如何显示每行每列的线

Image 22.png


设置 行列 边框颜色  例如: HorizontalGridLinesBrush="Red" VerticalGridLinesBrush="Green"

HeadersVisibility 控制怎么显示datagrid头,HorizontalScrollBarVisibility="Disabled"  VerticalScrollBarVisibility="Auto"滚动条

其他样式修改:     ColumnHeaderStyle 网格顶部列标题头的textblock

RowHeaderStyle 行标题头的Textblock,    DragIndicatorStyle 当用户正在将列标题头拖动到新位置时用于列标题头的Textblock


推荐您阅读更多有关于“WPF4.5,”的文章

猜你喜欢

已有2位网友发表了看法:

1#访客  2015-05-07 16:50:08 回复该评论
很不错,博主威武啊!
1#aaronyang  2015-05-08 09:16:30 回复该评论
能留个qq就好了

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表