zoukankan      html  css  js  c++  java
  • 使用HandyControl实现多选的DataGrid

    本文在MVVM模式先实现了基于HandyControl的DataGrid多选,同时展示了为DataGrid单元格显示不同颜色的方法,开发环境为:WPF + Prism + HandyControl。

      1、添加多选列

    <DataGridTemplateColumn Width="Auto">
        <DataGridTemplateColumn.HeaderStyle>
            <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridColumnHeaderStyle}">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <CheckBox Content="全选" IsChecked="{Binding DataContext.CheckAll, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGridTemplateColumn.HeaderStyle>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                          HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

    2、为Model添加IsSelected属性

    public class Student : BindableBase
    {
        public string Name { get; set; }
        public int Score { get; set; }
        public Brush ScoreBrush => Score >= 60 ? PassedBrush : NotPassedBrush;
    
        public bool IsSelected
        {
            get => _isSelected;
            set => SetProperty(ref _isSelected, value);
        }
    
        private bool _isSelected;
    
        private static readonly Brush PassedBrush = new SolidColorBrush(Colors.Green);
        private static readonly Brush NotPassedBrush = new SolidColorBrush(Colors.Red);
    }

    3、为ViewModel添加全选响应代码

    public class StudentWindowViewModel : BindableBase
    {
        public ObservableCollection<Student> StudentList { get; }
    
        public bool CheckAll
        {
            get => _checkAll;
            set
            {
                SetProperty(ref _checkAll, value);
                foreach (var item in StudentList)
                {
                    item.IsSelected = value;
                }
            }
        }
    
        private bool _checkAll; //全选
    
        public StudentWindowViewModel()
        {
            StudentList = new ObservableCollection<Student>()
            {
                new Student() {Name = "Student1", Score = 80},
                new Student() {Name = "Student2", Score = 60},
                new Student() {Name = "Student3", Score = 57}
            };
        }
    }

    4、DataGrid完整代码

    <DataGrid ItemsSource="{Binding StudentList}"
              Background="Transparent" BorderThickness="1"
              hc:DataGridAttach.CanUnselectAllWithBlankArea="True" 
              hc:DataGridAttach.ShowRowNumber="True"
              HeadersVisibility="All" RowHeaderWidth="40" AutoGenerateColumns="False" 
              SelectionMode="Single" SelectionUnit="FullRow">
        <DataGrid.Columns>
            <DataGridTemplateColumn Width="Auto">
                <DataGridTemplateColumn.HeaderStyle>
                    <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridColumnHeaderStyle}">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <CheckBox Content="全选" IsChecked="{Binding DataContext.CheckAll, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </DataGridTemplateColumn.HeaderStyle>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                  HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn IsReadOnly="True" CanUserSort="False" Binding="{Binding Name}" Header="姓名"/>
            <!--DataGridCheckBoxColumn IsReadOnly="False" CanUserSort="False" Binding="{Binding IsSelected, Mode=TwoWay}" Header="选中"/-->
            <DataGridTemplateColumn IsReadOnly="True" CanUserSort="False" Header="分数">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Score}" Foreground="{Binding ScoreBrush}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
  • 相关阅读:
    《移动Web前端高效开发实战》笔记4--打造单页应用SPA
    《移动Web前端高效开发实战》笔记3--代码检查任务
    《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
    《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
    Node.js 历史
    《超实用的Node.js代码段》连载三:Node.js深受欢迎的六大原因
    《超实用的Node.js代码段》连载二:正确拼接Buffer
    《超实用的Node.js代码段》连载一:获取Buffer对象字节长度
    换个地方写博客
    【转一篇出处不明的文章】 Windows多线程通信方式
  • 原文地址:https://www.cnblogs.com/xhubobo/p/15746780.html
Copyright © 2011-2022 走看看