WPF DataGrid控件绑定数据(包含关闭列标题、显示内容居中)

发布时间 2023-11-09 09:43:41作者: 青丝·旅人

效果图:

 

1、设计DataGrid展示数据模型类

    public class DataRecord
    {
        public bool IsChecked { get; set; }
        public DateTime Time { get; set; }
        public string Title { get; set; }
        public double Size { get; set; }
        public bool IsTooLarger => Size > 100;
        public override string ToString()
        {
            return Title;
        }
    }

 

2、创建模型的数据集合

    public class Songs
    {
        #region    DataGrid的使用
        /// <summary>
        /// DataGrid使用对象集合
        /// </summary>
        public List<DataRecord> DataRecordList { get; set; } = InitList();
        /// <summary>
        /// DataGrid选中对象
        /// </summary>
        public DataRecord SelectedDataRecord { get; set; }
        /// <summary>
        /// 创建示例对象集合
        /// </summary>
        /// <returns>返回示例对象集合</returns>
        private static List<DataRecord> InitList()
        {
            List<DataRecord> result = new List<DataRecord>()
            {
                new DataRecord()
                {
                    Title="Hello",
                    Time=DateTime.Now,
                    IsChecked = true,
                    Size=0.334
                },
                new DataRecord()
                {
                    Title="World",
                    Time=DateTime.Now,
                    IsChecked=false,
                    Size=4.54
                },
                new DataRecord()
                {
                    Title="Hehe",
                    Time=DateTime.Now,
                    IsChecked = true,
                    Size=83.5
                }
            };
            return result;
        }
        #endregion
    }

 

3、UI添加数据绑定,添加样式源(前端代码)

    <!--添加自定一数据绑定-->
    <Window.DataContext>
        <local:Songs/>
    </Window.DataContext>


    <!--设置DataGrid标题、单元格属性-->
    <Window.Resources>
        <!--设置单元格内容居中-->
        <Style x:Key="HorizontalAlignedData"
           BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        
        <!--设置标题样式-->
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontWeight" Value="DemiBold"/>
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!--设置单元选中样式-->
        <Style TargetType="DataGridCell">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="0.6"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="FontSize" Value="14"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Gray" />
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="False">
                    <Setter Property="Background" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

 

4、数据绑定(前端代码)

                    <Border CornerRadius="4" BorderThickness="0" BorderBrush="Black" Height="120">
                        <DataGrid ItemsSource="{Binding DataRecordList}" Width="422" Height="77" Background="White"
                                  SelectedItem="{Binding SelectedDataRecord}"
                                  AutoGenerateColumns="False" BorderBrush="Black" BorderThickness="1"
                                  GridLinesVisibility="None" HeadersVisibility="None"
                                  CanUserAddRows="False" RowHeaderWidth="0"
                                  CanUserSortColumns="True"
                                  CanUserReorderColumns="False"
                                  IsReadOnly="False"
                                  CanUserResizeColumns="False"
                                  CanUserResizeRows="False"
                                  SelectionUnit="FullRow"
                                  RowBackground="White"
                                  FlowDirection="LeftToRight"
                                  FontSize="18"
                                  FrozenColumnCount="3">
                            <DataGrid.Columns>
                                <DataGridTextColumn Width="100" Header="标题" Binding="{Binding Title}" IsReadOnly="True" ElementStyle="{StaticResource HorizontalAlignedData}"/>
                                <DataGridTextColumn Width="200" Header="时间" Binding="{Binding Time,StringFormat='yyyy-MM-dd HH:mm:ss'}" IsReadOnly="True"/>
                                <DataGridCheckBoxColumn Width="60" Header="选中" Binding="{Binding IsChecked}"/>
                                <DataGridTextColumn Width="60" Header="大小" Binding="{Binding Size}"/>
                            </DataGrid.Columns>
                        </DataGrid>
                    </Border>