WPF DataGrid控件绑定数据(包含关闭列标题、显示内容居中)
效果图:
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>