如何为WPF DataGrid的行设置圆角(而非整个DataGrid)
实现DataGrid行的圆角效果
当然可以实现!要给DataGrid的单独行添加圆角效果,核心是自定义DataGridRow的样式——默认的行模板没有圆角设置,我们需要通过修改ControlTemplate来实现。下面是具体的实现方案:
步骤1:定义自定义DataGridRow样式
在你的Window/UserControl的<Resources>标签中添加以下样式,它会替换默认的DataGridRow模板,给行添加圆角:
<Style x:Key="RoundedDataGridRowStyle" TargetType="{x:Type DataGridRow}"> <Setter Property="Background" Value="{Binding RowBackground, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/> <Setter Property="AlternationCount" Value="2"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridRow}"> <!-- 用带圆角的Border包裹行内容 --> <Border x:Name="DGR_Border" CornerRadius="8" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <SelectiveScrollingGrid> <SelectiveScrollingGrid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </SelectiveScrollingGrid.ColumnDefinitions> <SelectiveScrollingGrid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </SelectiveScrollingGrid.RowDefinitions> <DataGridCellsPresenter Grid.Column="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/> <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/> </SelectiveScrollingGrid> </Border> <!-- 处理行选中/悬停状态,保持圆角 --> <ControlTemplate.Triggers> <Trigger Property="IsAlternationIndex" Value="1"> <Setter TargetName="DGR_Border" Property="Background" Value="{Binding AlternatingRowBackground, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="DGR_Border" Property="Background" Value="#3A3A3A"/> <!-- 可自定义选中行背景色 --> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="DGR_Border" Property="Background" Value="#2D2D2D"/> <!-- 可自定义鼠标悬停背景色 --> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
步骤2:将样式应用到你的DataGrid
修改你原来的DataGrid标签,添加RowStyle属性引用上面定义的样式,同时设置AlternationCount="2"来启用交替行背景(和你原来的设置对应):
<DataGrid x:Name="Tasks" CanUserDeleteRows="True" IsReadOnly="False" AutoGenerateColumns="False" HorizontalAlignment="Left" Height="413" VerticalAlignment="Top" Width="1100" Background="Transparent" HorizontalGridLinesBrush="Transparent" VerticalGridLinesBrush="Transparent" RowBackground="#202020" AlternatingRowBackground="#262626" AlternationCount="2" <!-- 启用交替行 --> RowStyle="{StaticResource RoundedDataGridRowStyle}"> <!-- 应用自定义行样式 --> <!-- 你的列定义保持不变 --> <DataGrid.Columns> <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/> <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/> <DataGridTextColumn Header="Colour" Binding="{Binding Colour, UpdateSourceTrigger=PropertyChanged}"/> <!-- 其他列... --> <DataGridTemplateColumn Header="..."> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Click="Start_Task_Click"> <materialDesign:PackIcon Kind="Play" Foreground="White"/> </Button> <Button Margin="5,0,0,0" Click="Stop_Button_Click"> <materialDesign:PackIcon Kind="Stop" Foreground="White"/> </Button> <Button Margin="5,0,0,0" Click="Edit_Task"> <materialDesign:PackIcon Kind="Pencil" Foreground="White"/> </Button> <Button Margin="5,0,0,0" Click="Delete_Button_Click"> <materialDesign:PackIcon Kind="Delete" Foreground="White"/> </Button> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
关键说明
- 圆角大小由
Border的CornerRadius属性控制,你可以根据需求修改数值(比如改成CornerRadius="6"或CornerRadius="10")。 - 样式中绑定了DataGrid的
RowBackground和AlternatingRowBackground,所以你原来设置的行背景颜色依然会生效。 - 我们添加了鼠标悬停和选中状态的Trigger,确保这些状态下的行依然保持圆角效果,你可以根据自己的UI需求修改这些状态的背景色。
内容的提问来源于stack exchange,提问作者lobster123
相关产品推荐
相关产品推荐

