C# WPF，DataGrid将边框添加到特定字段

Question

我正试着做一个数独游戏。

我把这些数字加到了一个GridView上。

这是我在WPF的代码。

<DataGrid x:Name="lst" ItemsSource="{Binding SudokoField, UpdateSourceTrigger=PropertyChanged}"</DataGrid>

我想在3-6-9行和3-6-9列中添加边框。

​

​

​

​

这是怎么做的？

// 列中的红线已完成，但我无法在行中得到它们。这就是现在的代码：

 <DataGrid x:Name="lst" ItemsSource="{Binding SudokoField, UpdateSourceTrigger=PropertyChanged}"  GridLinesVisibility="None" CanUserResizeColumns="False" CanUserResizeRows="False" CanUserSortColumns="False" AutoGenerateColumns="True" CanUserAddRows="False" ColumnWidth="*" CanUserReorderColumns="False" HeadersVisibility="None" >
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="DataGridCell">
                                <Border Name="cellBorder" BorderBrush="Black">
                                    <Border.Style>
                                        <Style TargetType="Border">
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding RelativeSource=          {RelativeSource TemplatedParent}, Path=Column.DisplayIndex}" Value="2">
                                                    <Setter Property="BorderThickness">
                                                        <Setter.Value>
                                                            <Thickness Left="0" Right="1" Top="0" Bottom="0"/>
                                                        </Setter.Value>
                                                    </Setter>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding RelativeSource=          {RelativeSource TemplatedParent}, Path=Column.DisplayIndex}" Value="5">
                                                    <Setter Property="BorderThickness">
                                                        <Setter.Value>
                                                            <Thickness Left="0" Right="1" Top="0" Bottom="0"/>
                                                        </Setter.Value>
                                                    </Setter>
                                                </DataTrigger>
         this part    --->>                        <DataTrigger Binding="{Binding RelativeSource=          {RelativeSource TemplatedParent}, Path=Row.DisplayIndex}" Value="2">
                                                    <Setter Property="BorderThickness">
                                                        <Setter.Value>
                                                            <Thickness Left="1" Right="1" Top="1" Bottom="1"/>
                                                        </Setter.Value>
                                                    </Setter>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Border.Style>
                                    <ContentPresenter Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.CellStyle>
        </DataGrid>

Answer 1

您可以重写DataGrid.CellStyle并根据行索引或列索引设置单元格边框，例如：

<DataGrid ItemsSource="{Binding}">
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridCell">
                        <Border Name="rowBorder" BorderBrush="Red">
                            <Border Name="columnBorder" BorderBrush="Red">
                                <Border.Style>
                                    <Style TargetType="Border">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Column.DisplayIndex}" Value="2">
                                                <Setter Property="BorderThickness">
                                                    <Setter.Value>
                                                        <Thickness Left="1" Right="0" Top="0" Bottom="0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </DataTrigger>
                                            <!--put column related triggers here-->
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>
                                <ContentPresenter Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
                            </Border>
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGridRow}, Converter={x:Static local:RowToIndexConverter.Instance}}" Value="1">
                                            <Setter Property="BorderThickness">
                                                <Setter.Value>
                                                    <Thickness Left="0" Right="0" Top="1" Bottom="0"/>
                                                </Setter.Value>
                                            </Setter>
                                        </DataTrigger>
                                        <!--put row related triggers here-->
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>                                    
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.CellStyle>
</DataGrid>

此外，还必须定义RowToIndexConverter：

public class RowToIndexConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (value as DataGridRow).GetIndex();
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }

    private static RowToIndexConverter _instance = new RowToIndexConverter(); 
    public static RowToIndexConverter Instance { get { return _instance; } }
}

Answer 2

我不认为有一个简单的解决方案，您所要求的，但这是一个不完整的解决方案，可以为您工作，代码不是完整的，但它可能会给您一个如何进行的想法，但我不确定它是否会成功。

对于这些列，除了文本列之外，还需要另外两个模板化的列:一个带有左色边框，另一个带有右边框以获取更多信息，请查看DataGridTemplateColumn类作为示例。然后，可以根据如何设计视图模型或如何映射列，将每个列分别绑定到SudokuRow.Colmn1、SudokuRow.Colmn2等。

行：

创建这样的转换器资源，此转换器将取一行并在数据网格中返回其索引：

public class RowToIndexConverter : DependencyObject, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, 
                             System.Globalization.CultureInfo culture)
    {
        return (value as DataGridRow).GetIndex();
    }

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

要更改行边框，可以使用DataTriggers，它将根据行索引触发。

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="DataGridTemplateColumnWithLeftBorder" >
            <Border BorderBrush="RED" BorderThickness="0,1,0,0">
                <TextBlock Text={Binding }/>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="DataGridTemplateColumnWithRightBorder" >
            <Border BorderBrush="RED" BorderThickness="1,0,0,0">
                <TextBlock Text={Binding }/>
            </Border>
        </DataTemplate>
        //add RowToIndexConverter resource here so ... 
    </Grid.Resources>
    <DataGrid x:Name="lst" ItemsSource="{Binding SudokoField, UpdateSourceTrigger=PropertyChanged} >
        //columns with each mapped to a property
        <DataGrid.Columns>
            <DataGridTemplateColumn Binding={Column1} CellTemplate="{StaticResource DataGridTemplateColumnWithLeftBorder}" />
            <DataGridTextColumn Binding={Column2}>
            <DataGridTextColumn addbinding>
            <DataGridTemplateColumn addbinding CellTemplate="{StaticResource DataGridTemplateColumnWithLeftBorder}" />
            <DataGridTextColumn addbinding>
            <DataGridTextColumn addbinding/>
            <DataGridTemplateColumn addbinding CellTemplate="{StaticResource DataGridTemplateColumnWithLeftBorder}" />
            <DataGridTextColumn addbinding>
            <DataGridTemplateColumn addbinding CellTemplate="{StaticResource DataGridTemplateColumnWithRightBorder}" />
        </DataGrid.Columns>
        //Add RowStyle which defines DataTriggers that trigger depending on the row index: here row 0,3,6, and 8 will trigger. 
        <DataGrid.RowStyle>
            <Style TargetType="DataGridRow">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RowToIndexConverter}" Value="0">
                       <Setter Property="BorderThickness" Value="0,1,0,0"/>
                       <Setter Property="BorderBrush" Value="Red"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RowToIndexConverter}" Value="3">
                       <Setter Property="BorderThickness" Value="0,1,0,0"/>
                       <Setter Property="BorderBrush" Value="Red"/>                
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RowToIndexConverter}" Value="6">
                       <Setter Property="BorderThickness" Value="0,1,0,0"/>
                       <Setter Property="BorderBrush" Value="Red"/>              
                    </DataTrigger>          
                    <DataTrigger Binding="{Binding RowToIndexConverter}" Value="8">
                       <Setter Property="BorderThickness" Value="1,0,0,0"/>
                       <Setter Property="BorderBrush" Value="Red"/>              
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DataGrid.RowStyle>
    </DataGrid>
</Grid>