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

如何根据DataGrid列值修改DataGridRow的BorderBrush属性

问题需求

根据DataGrid行数据中的TypeOfAlert值,修改行模板内DGR_Border组件的BorderBrush颜色(预期效果:当告警类型为High时,行边框呈现对应颜色)。已在App.xaml的DataGridRow样式中标记出需要修改的BorderBrush位置。

已尝试的方案

方案一(未生效)

直接在DataGrid上绑定BorderBrush并设置DataContext为转换器,未达到预期效果:

<DataGrid 
    RowStyle="{DynamicResource DataGridRowStyle2}"
    Name="AlertTable"
    Grid.Row="5"
    BorderBrush="{Binding TypeOfAlert , Converter={StaticResource CellConverter}}" <!-- 未生效 -->
    IsReadOnly="True"
    BorderThickness="0"
    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
    ScrollViewer.VerticalScrollBarVisibility="Viditelný"
>
    <DataGrid.DataContext>
        <local1:CellConverter/>
    </DataGrid.DataContext>
<!-- ---- -!>
</DataGrid>

方案二(仅TextBlock生效)

仅实现了Type of Alert列的TextBlock背景色根据TypeOfAlert变化,未影响行边框:

<DataGridTextColumn
    Header="Type of Alert "
    Width="*"
    Binding="{Binding TypeOfAlert}"
>
    <DataGridTextColumn.ElementStyle>
        <Style 
            TargetType="{x:Type TextBlock}"
        >
            <Setter
                Property="Background"
                Value="{Binding TypeOfAlert , Converter={StaticResource CellConverter}}"
            >
            </Setter>
        </Style>
    </DataGridTextColumn.ElementStyle>
</DataGridTextColumn>

App.xaml中的DataGridRow样式(待修改位置已标注)

<Style x:Key="DataGridRowStyle2" TargetType="{x:Type DataGridRow}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="ValidationErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <TextBlock Foreground="Transparent" Margin="2,0,0,0" Text="!" VerticalAlignment="Center"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="DGR_Border"  
                    CornerRadius="5" 
                    <!-- 要修改这里的BorderBrush -->
                    Background="{TemplateBinding Background}" BorderThickness="2" BorderBrush="Red" SnapsToDevicePixels="True">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </SelectiveScrollingGrid.ColumnDefinitions>
                        <SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </SelectiveScrollingGrid.RowDefinitions>
                        <DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <DataGridDetailsPresenter Visibility="{TemplateBinding DetailsVisibility}"/>
                        <DataGridRowHeader Visibility="{Binding HeadersVisibility, Converter={x:Static DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                    </SelectiveScrollingGrid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

解决方案

步骤1:确保转换器已注册为静态资源

在App.xaml或当前页面的资源节点中,提前注册CellConverter:

<local1:CellConverter x:Key="CellConverter"/>

步骤2:修改行模板中的BorderBrush绑定

将DGR_Border的固定BorderBrush值,改为绑定当前行的TypeOfAlert并使用转换器:

<Border x:Name="DGR_Border"  
    CornerRadius="5" 
    Background="{TemplateBinding Background}" 
    BorderThickness="2" 
    BorderBrush="{Binding TypeOfAlert, Converter={StaticResource CellConverter}}" 
    SnapsToDevicePixels="True">

步骤3:清理冗余代码

删除方案一中DataGrid上错误的BorderBrush绑定和DataContext设置(这些是针对整个表格的边框,不是行边框):

<!-- 移除以下无效代码 -->
BorderBrush="{Binding TypeOfAlert , Converter={StaticResource CellConverter}}"
<DataGrid.DataContext>
    <local1:CellConverter/>
</DataGrid.DataContext>

转换器实现示例

确保CellConverter正确实现IValueConverter接口,根据TypeOfAlert返回对应颜色:

public class CellConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string alertType)
        {
            return alertType.ToLower() switch
            {
                "high" => Brushes.Red,
                "medium" => Brushes.Orange,
                "low" => Brushes.Green,
                _ => Brushes.Transparent
            };
        }
        return Brushes.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

内容的提问来源于stack exchange,提问作者Shawn_Medinsky

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.25 15:57:20