WPF 控件 (十七、DataGrid)

该文章展示了如何在WPF中使用DataGrid控件来展示用户信息,包括数据绑定、ObservableCollection的使用以及后台代码的实现。同时,详细介绍了DataGrid的列定义,如CheckBoxColumn、TextColumn和ComboBoxColumn,并提供了自定义的性别选择列表。此外,还涵盖了DataGrid的样式设置,如背景色、网格线颜色以及标题栏和单元格的样式定制。
摘要由CSDN通过智能技术生成

一、效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、后台代码

  public partial class DataGridUserControl : UserControl
    {
        public ObservableCollection<UserInfo> UserInfos { get; set; } = new ObservableCollection<UserInfo>();
        public ObservableCollection<string> SexList { get; set; } = new ObservableCollection<string>() { "男", "女" };
        public DataGridUserControl()
        {
            InitializeComponent();
            
            this.DataContext = this;

            Init();
        }

        private void Init()
        {
            Random random = new Random();
            var img = new BitmapImage(new Uri("../bird1.png", UriKind.Relative));
            foreach (var s in Enumerable.Range(0, 10)) {
                UserInfos.Add(new UserInfo() { 
                    Check = Convert.ToBoolean( random.Next(0, 2)),
                    Index = s,
                    Name ="lr"+s,
                    Sex= random.Next(0,2)==0?"男":"女",
                    Age= random.Next(0,80),
                    Image = img
                });
            }
        }
    }

三、UserInfo

 public class UserInfo : INotifyPropertyChanged {

        public event PropertyChangedEventHandler PropertyChanged;


        private bool _check;

        public bool Check
        {
            get { return _check; }
            set
            {
                _check = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }

        private int _index;

        public int Index
        {
            get { return _index; }
            set {
                _index = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }

        private string _name;

        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }


        private string _sex;

        public string Sex
        {
            get { return _sex; }
            set
            {
                _sex = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }

        private int _age;

        public int Age
        {
            get { return _age; }
            set
            {
                _age = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }

        private BitmapImage _img;

        public BitmapImage Image
        {
            get { return _img; }
            set
            {
                _img = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(""));
            }
        }

    }

四、xaml

 <UserControl.Resources>
        <CollectionViewSource x:Key="ItemsCVS" Source="{Binding SexList}" />
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <DataGrid ItemsSource="{Binding UserInfos}" AutoGenerateColumns="False" Margin="10" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="选中" Binding="{Binding Check}" Width="50" />
                <DataGridTextColumn Header="序号" Binding="{Binding Index}"  Width="50"/>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}"  Width="50"/>
                <DataGridComboBoxColumn Header="姓别"  Width="50"
                                        ItemsSource="{Binding Source={StaticResource ItemsCVS} }" SelectedItemBinding="{Binding Sex}"/>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}"/>
                <DataGridTemplateColumn Header="头像" Width="50">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}" Stretch="Uniform" Width="40" Height="40"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        <DataGrid ItemsSource="{Binding UserInfos}" AutoGenerateColumns="False" Margin="10" Grid.Column="1" 
                  Style="{StaticResource DataGridStyle}" DataGrid.CellStyle="{StaticResource DataGridCellStyle}" DataGrid.RowStyle ="{StaticResource DataGridRowStyle}"  DataGrid.ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="选中" Binding="{Binding Check}" Width="50" />
                <DataGridTextColumn  Header="序号" Binding="{Binding Index}"  Width="50"/>
                <DataGridTextColumn Header="姓名" Binding="{Binding Name}"  Width="50"/>
                <DataGridComboBoxColumn Header="姓别"  Width="50"
                                        ItemsSource="{Binding Source={StaticResource ItemsCVS} }" SelectedItemBinding="{Binding Sex}"/>
                <DataGridTextColumn Header="年龄" Binding="{Binding Age}"/>
                <DataGridTemplateColumn Header="头像" Width="80">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}" Stretch="Uniform" Width="30" Height="30"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

五、Style

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--DataGrid样式-->
    <Style TargetType="DataGrid" x:Key="DataGridStyle">
        <!--网格线颜色-->
        <Setter Property="CanUserResizeColumns" Value="false"/>
        <Setter Property="Background" Value="#FFF7EDAD" />
        <Setter Property="BorderBrush" Value="#FFF5F7F5" />
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
    </Style>

    <!--标题栏样式-->
    <Style TargetType="DataGridColumnHeader" x:Key="DataGridColumnHeaderStyle">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="MinHeight" Value="28" />
        <Setter Property="Foreground" Value="#323433" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1" 
                             BorderBrush="#e6dbba" 
                              Width="Auto">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0" 
                            VerticalAlignment="Center" RenderTransformOrigin="1,1" />
                            <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Height" Value="25"/>
    </Style>
    <!--行样式触发-->
    <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
    <Style  TargetType="DataGridRow" x:Key="DataGridRowStyle">
        <Setter Property="Background" Value="#F2F2F2" />
        <Setter Property="Height" Value="25"/>
        <Setter Property="Foreground" Value="Black" />
        <Style.Triggers>
            <!--隔行换色-->
            <Trigger Property="AlternationIndex" Value="0" >
                <Setter Property="Background" Value="#e7e7e7" />
            </Trigger>
            <Trigger Property="AlternationIndex" Value="1" >
                <Setter Property="Background" Value="#f2f2f2" />
            </Trigger>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
                <!--<Setter Property="Foreground" Value="White"/>-->
            </Trigger>

            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--单元格样式触发-->
    <Style TargetType="DataGridCell" x:Key="DataGridCellStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <TextBlock TextAlignment="Center" VerticalAlignment="Center"  >
                           <ContentPresenter />
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF自定义DataGrid控件是通过继承现有的DataGrid类,并在其基础上进行修改和扩展来实现的。 自定义DataGrid控件的步骤如下: 1. 创建一个自定义的类,继承自DataGrid。例如,可以命名为CustomDataGrid。 2. 在CustomDataGrid类中,可以添加额外的属性、依赖属性或附加属性,用于自定义DataGrid控件的特定行为或外观。 3. 重写或扩展DataGrid的现有方法、事件和样式,以满足自定义需求。例如,可以重写OnApplyTemplate()方法以应用自定义样式。 4. 根据需要,可以添加新的功能或控件,例如自定义列、单元格、行、排序、筛选、分页等等。 5. 在CustomDataGrid类中,可以通过编写自定义的模板(Template)来修改DataGrid的外观。例如,可以通过修改DataGrid的ControlTemplate来改变整个DataGrid的显示风格。 6. 编写完自定义类后,可以在XAML中使用自定义DataGrid控件,通过添加命名空间引用并将CustomDataGrid作为一个控件使用。可以设置自定义属性、事件和样式,达到期望的效果。 通过自定义DataGrid控件,可以根据实际需求对其进行扩展和修改,以满足特定的业务需求。由于WPF提供了强大的样式、模板和继承机制,因此可以轻松地自定义DataGrid控件,并且可以实现高度的灵活性和可扩展性。这样,可以根据项目的需求和用户的喜好来创建独特的、具有个性化的DataGrid控件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值