You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 09:10:46