You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

UWP CommunityToolkit DataGrid选中行颜色设置方法咨询

修改UWP CommunityToolkit DataGrid选中行颜色的解决方案

嘿Jeroen,我刚好在UWP项目里折腾过这个DataGrid的选中样式,给你两个实用的解决办法,按需选就行:

方法一:直接设置DataGrid的内置属性(最简单)

如果你的CommunityToolkit版本是6.0及以上,DataGrid控件本身提供了直接修改选中行颜色的属性,不用复杂的模板修改。直接在XAML里给DataGrid加上这两个属性就行:

<controls:DataGrid x:Name="YourDataGrid"
                   ItemsSource="{Binding YourDataSource}"
                   <!-- 替换成你想要的浅色背景 -->
                   SelectedRowBackground="#E0F2F7"
                   <!-- 可选:修改选中行的文字颜色 -->
                   SelectedRowForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"/>

记得把controls:换成你项目里实际引用的命名空间,一般是xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"。这个方法最省心,能快速搞定。

方法二:重写DataGridRow的样式(兼容旧版本/自定义更多状态)

如果你的Toolkit版本比较老,或者需要自定义选中时的更多视觉状态(比如鼠标悬停在选中行上的颜色),那就重写DataGridRow的Style模板:

<Page.Resources>
    <Style TargetType="controls:DataGridRow">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:DataGridRow">
                    <Grid x:Name="RootGrid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <!-- 鼠标悬停未选中的状态 -->
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <!-- 选中状态(有焦点) -->
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="#E0F2F7"/>
                                        <Setter Target="RootGrid.Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <!-- 选中状态(无焦点) -->
                                <VisualState x:Name="SelectedUnfocused">
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="#E0F2F7"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <!-- 选中且鼠标悬停的状态 -->
                                <VisualState x:Name="SelectedPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="RootGrid.Background" Value="#B2EBF2"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

你可以把代码里的#E0F2F7(浅蓝色)换成你想要的任何浅色,同时还能调整其他状态的样式,比如选中且悬停时的颜色,灵活性更高。

试试这两种方法,应该能完美替换掉默认的蓝色选中行啦!

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

火山引擎 最新活动