UWP 工具包 DataGrid 删除选定边框

Question

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

下面是我的示例代码。

<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"/>

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

如果您想要更多控制，可以复制默认模板并进行修改。为此，您可以右键单击设计器或文档大纲中的控件，选择编辑其他模板，然后选择DataGridCell。选择创建副本，这将在您的页面中生成默认模板的副本。请注意，您可能必须用直接资源(SolidColorBrush 等)替换 StaticResource 声明