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 中的控件，选择编辑其他模板并选择DataGridCell来实现。选择创建副本，这将在您的页面中生成默认模板的副本。请注意，您可能必须将StaticResource声明替换为直接资源（SolidColorBrush等）

UWP Toolkit DataGrid删除选定的边框

1 个答案: