我得全局样式都写在了App.XAML文件下的ResourceDictionary里,方便全局引用
DataGrid样式和点击改变行背景色的触发器(BasedOn继承的是UI框架的样式,若无则删除,触发器还有鼠标移动事件等,按需自行修改添加)
<Style x:Key="MyDataGrid" TargetType="DataGrid" BasedOn="{StaticResource MaterialDesignDataGrid}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/tb_1.png"/>
</Setter.Value>
</Setter>
<!--网格线颜色-->
<Setter Property="HorizontalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="LightBlue"/>
</Setter.Value>
</Setter>
<Setter Property="VerticalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="LightBlue"/>
</Setter.Value>
</Setter>
<!--行点击事件样式触发-->
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="DataGridRow" BasedOn="{StaticResource MaterialDesignDataGridRow}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<!--行点击后背景色改变,也可改变其他行属性。可添加其他事件触发器-->
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#2368DE" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="IsReadOnly" Value="True"/>
</Style>
单元格内容居中:
<!--单元格样式触发,得单独出来写在DataGrid样式下无效-->
<Style TargetType="DataGridCell" x:Key="MyDataGridCell" BasedOn="{StaticResource MaterialDesignDataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#2368DE"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=Content.Text}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" />
<!--核心在这,若直接设置DataGridCell的VerticalAlignment的属性居中,则会出现下划线-->
<ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
头部居中:
<Style x:Key="MyDataGridColumnHeader" TargetType="DataGridColumnHeader" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
头部样式和单元格样式写在DataGrid样式下Setter设置其相应的属性无效的原因知道的麻烦留一下言。
使用:
<DataGrid Grid.Row="2"
ColumnHeaderStyle="{StaticResource MyDataGridColumnHeader}"
CellStyle="{StaticResource MyDataGridCell}"
Style="{StaticResource MyDataGrid}"
AutoGenerateColumns="False"
x:Name="MyDataGrid"
CanUserAddRows="False"
ScrollViewer.CanContentScroll="True"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
ItemsSource="{Binding 自己的集合}">
<DataGrid.Columns>
<DataGridCheckBoxColumn Binding="{Binding 自己的对象属性}" Header="选择">
<DataGridCheckBoxColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGridCheckBoxColumn.HeaderStyle>
</DataGridCheckBoxColumn>
<DataGridTextColumn Binding="{Binding 自己的对象属性}" Header="ID" Visibility="Collapsed" Width="1*" />
<DataGridTemplateColumn Header="图片">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding 自己的对象属性}" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center">
<ToolTipService.ToolTip>
<Image Source="{Binding 自己的对象属性}" Width="100" Height="100"/>
</ToolTipService.ToolTip>
</Image>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="UserAction" Header="操作" Width="160">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="删除" BorderBrush="Transparent" Click="Delete"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Background>
<ImageBrush ImageSource="/Images/btn1.png"/>
</Button.Background>
</Button>
<Button Margin="12,0,0,0" Content="编辑" BorderBrush="Transparent" Click="Edit"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Background>
<ImageBrush ImageSource="/Images/btn1.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
效果: