WPF的DataGrid简单使用

  简单做个记录。有时候会忘记某个样式怎么调整;

 首先写一个DataGridAlternatingRowBackground表示隔行更改背景色;AlternationCount表示隔的行数;:

1 <DataGrid Grid.Row="1"
2           AlternatingRowBackground="Snow"
3           AlternationCount="2"
4           ItemsSource="{Binding Students}">
5 </DataGrid>       

再写ID列,Width是宽度比例,后面几列写法一样,更改下Header和Binding:

复制代码
1 <DataGridTemplateColumn Width="*" Header="ID">
2     <DataGridTemplateColumn.CellTemplate>
3         <DataTemplate>
4             <Border BorderThickness="0 0 1 0" BorderBrush="LightGray">
5                 <TextBlock Text="{Binding ID}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
6             </Border>
7         </DataTemplate>
8     </DataGridTemplateColumn.CellTemplate>
9 </DataGridTemplateColumn>
复制代码

这个是输入框列这里注意下Text的Binding需要指定UpdateSourceTrigger,否则不会立即更改,但是我记得单独写TextBox默认就是立马触发的:

1 <DataGridTemplateColumn Width="1.2*" Header="Score">
2     <DataGridTemplateColumn.CellTemplate>
3         <DataTemplate>
4             <TextBox Text="{Binding Score,UpdateSourceTrigger=PropertyChanged}" FontWeight="Light" VerticalAlignment="Center" Margin="3 0 3 0"/>
5         </DataTemplate>
6     </DataGridTemplateColumn.CellTemplate>
7 </DataGridTemplateColumn>

这个是Edit列,里面是个Button,Command绑定的全局的委托命令,注意指定RelativeSource:

复制代码
 1 <DataGridTemplateColumn Width="1*" Header="Edit">
 2     <DataGridTemplateColumn.CellTemplate>
 3         <DataTemplate>
 4             <Button Content="🖊" 
 5                     BorderThickness="0"
 6                     Background="Transparent"
 7                     VerticalAlignment="Center" 
 8                     HorizontalAlignment="Center" 
 9                     Command="{Binding DataContext.EditCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl} }}"
10                     />
11         </DataTemplate>
12     </DataGridTemplateColumn.CellTemplate>
复制代码

最后写Style,美化下外观:

复制代码
 1 <Style TargetType="DataGrid">
 2     <Setter Property="Width" Value="500"/>
 3     <Setter Property="VerticalAlignment" Value="Top"/>
 4     <Setter Property="AutoGenerateColumns" Value="False"/>
 5     <Setter Property="BorderThickness" Value="0"/>
 6     <Setter Property="RowHeaderWidth" Value="0"/>
 7     <Setter Property="CanUserAddRows" Value="False"/>
 8     <Setter Property="GridLinesVisibility" Value="None" />
 9     <Setter Property="Cursor" Value="Hand"/>
10     <Setter Property="SelectedIndex" Value="{Binding SelectedIndex}"/>
11 </Style>
复制代码
AutoGenerateColumns:这个改为false就不会自动生成列了;RowHeaderWidth:改成0最左边的行标题就会消失;CanUserAddRows:改为false,最下面的空白行消失;GridLinesVisibility:默认的行列分割线消失;
复制代码
 1 <Style TargetType="DataGridRow">
 2     <Setter Property="BorderThickness" Value=" 0 0 0 1"/>
 3     <Setter Property="BorderBrush" Value="LightGray"/>
 4     <Setter Property="Height" Value="25"/>
 5     <Setter Property="VerticalAlignment" Value="Center"/>
 6     <Style.Triggers>
 7         <Trigger Property="IsMouseOver" Value=" true">
 8             <Setter Property="Background" Value="#F0F8FF"/>
 9         </Trigger>
10     </Style.Triggers>
11 </Style>
复制代码
这里设置鼠标移动后每行的颜色变化效果;
复制代码
 1 <Style TargetType="DataGridCell">
 2     <Setter Property="BorderThickness" Value="0"/>
 3     <Style.Triggers>
 4         <Trigger Property="IsSelected" Value=" true">
 5             <Setter Property="Background" Value="LightCyan"/>
 6             <Setter Property="Foreground" Value="Blue"/>
 7             <Setter Property="FontWeight" Value="Bold"/>
 8         </Trigger>
 9     </Style.Triggers>
10 </Style>
复制代码
这里设置选中某行后的效果,原来的蓝色太丑了;
复制代码
 1 <Style TargetType="DataGridColumnHeader">
 2     <Setter Property="Height" Value="50"/>
 3     <Setter Property="Template">
 4         <Setter.Value>
 5             <ControlTemplate>
 6                 <Border Background="SkyBlue" BorderThickness="0 0 1 0" BorderBrush="LightGray">
 7                     <TextBlock Text="{Binding}" 
 8                                FontSize="15" 
 9                                FontWeight="Bold"
10                                Foreground="White"
11                                FontFamily="Times New Roman"
12                                VerticalAlignment="Center" 
13                                HorizontalAlignment="Center"/>
14                 </Border>
15             </ControlTemplate>
16         </Setter.Value>
17     </Setter>
18 </Style>
复制代码
这里美化列标题样式,对模板进行编辑;

以上,在VM中写对应的Model即可;

posted @   [春风十里]  阅读(87)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示