UWP Toolkit DataGrid 删除选定的边框

Question

我想删除 datagrid 选定的单元格边框。 我尝试了很多方法，但我无法删除选定的单元格边框。

以下是我的示例代码。

<Page.Resources>
   <Style TargetType="controls:DataGridCell">
        <Setter Property="BorderThickness" Value="0,0,1,0"/>
        <Setter Property="BorderBrush" Value="Red"></Setter>
        <Setter Property="FocusVisualPrimaryThickness" Value="0"></Setter>
        <Setter Property="FocusVisualSecondaryThickness" Value="0"></Setter>

        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="5,0,10,10"/>
    </Style>
    <Style TargetType="controls:DataGrid">
        <Setter Property="FontSize" Value="25" />
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="FocusVisualPrimaryThickness" Value="0"></Setter>
        <Setter Property="FocusVisualSecondaryThickness" Value="0"></Setter>
    </Style></Page.Resources>

<controls:DataGrid x:Name="dataGrid1" 
        Height="600" Margin="12" FrozenColumnCount="2"
        AutoGenerateColumns="False" GridLinesVisibility="Horizontal"  
        AlternatingRowBackground="LightGray"
        HeadersVisibility="None"
        FocusVisualPrimaryThickness="0"
        FocusVisualSecondaryThickness="0"
        BorderThickness="1" SelectionMode="Extended" AllowFocusOnInteraction="False"
        CanUserReorderColumns="False" CanUserResizeColumns="False" SelectionChanged="dataGrid1_SelectionChanged"
        >
        <controls:DataGrid.Columns>
            <controls:DataGridTemplateColumn Header="Name" Width="300">
                <controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate x:DataType="local:Customer" >
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                            <TextBlock Padding="5,0,5,0" Text="{x:Bind FirstName}"/>
                            <TextBlock Text="{x:Bind LastName}"/>
                        </StackPanel>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>
            <controls:DataGridTemplateColumn Header="Address">
                <controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate x:DataType="local:Customer">
                            <TextBlock Padding="5,0,5,0" Text="{x:Bind Address}" />
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>
        </controls:DataGrid.Columns>
    </controls:DataGrid>

Remove selected cell border

我也为数据网格单元格和数据网格行设置了样式。请查看随附的屏幕截图以获取示例演示。

谢谢 我

Answer 1

如果您查看DataGrid source code on GitHub，您会看到单元格焦点视觉是硬编码的：

<Grid x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0">    
    <Rectangle Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}"
               StrokeThickness="2" 
               Fill="Transparent" 
               HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" 
               IsHitTestVisible="False"/>    
    <Rectangle Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}" 
               StrokeThickness="1" 
               Fill="Transparent"
               HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" 
               IsHitTestVisible="False" 
               Margin="2"/>
</Grid>

它正在使用DataGridCellFocusVisualPrimaryBrush 和DataGridCellFocusVisualSecondaryBrush 资源。所以如果你想改变边框，你能做的最简单的事情就是覆盖这两个资源。

<SolidColorBrush x:Key="DataGridCellFocusVisualPrimaryBrush" Color="Transparent"/>
<SolidColorBrush x:Key="DataGridCellFocusVisualSecondaryBrush" Color="Transparent"/>

注意 - 焦点边框的存在是有原因的 - 使用键盘和辅助功能设备的用户需要它知道当前焦点所在的单元格。如果您完全移除边框，可能会使应用难以为他们使用。

如果您想要更多控制权，您可以复制默认模板并进行修改。您可以通过右键单击 Designer 或 Document Outline 中的控件，选择 Edit additional template 并选择 DataGridCell 来执行此操作。选择创建副本，这将在您的页面中生成默认模板的副本。请注意，您可能必须将 StaticResource 声明替换为直接资源（SolidColorBrush 等）