WPF网格线-更改样式

Question

有没有办法在WPF网格中更改网格线的样式？ 我需要将网格分成4个单元格。为此，我使用了RowDefinitions和ColumnDefinitions。但是我需要用户能够区分哪个单元格是哪个，这就是我需要更改网格线颜色的原因。

- wpfnewbie

Answer 1

这取决于你希望获得什么样的外观。在WPF中，几乎任何事情都有不同的实现方式。以下是几种比较简单的方法之一。

最简单的方法是设置ShowGridlines="True"：

    <Grid HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch" 
          Margin="5"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" 
                   Grid.Row="0"
                   Text="(0,0)" />
        <TextBlock Grid.Column="1" 
                   Grid.Row="0"
                   Text="(1,0)" />
        <TextBlock Grid.Column="0" 
                   Grid.Row="1"
                   Text="(0,1)" />
        <TextBlock Grid.Column="1" 
                   Grid.Row="1"
                   Text="(1,0)" />
    </Grid>

这将给你一个类似于以下网格：

你还可以在网格的每个单元格中使用矩形来获得不同的效果。 在这里，填充是透明的，边框为蓝色：

<Grid HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Margin="5">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Rectangle Grid.Column="0"
               Grid.Row="0"  
               Stroke="Blue"
               Fill="Transparent" />
    <TextBlock Grid.Column="0" 
               Grid.Row="0"
               Text="(0,0)" />
    <Rectangle Grid.Column="1"
               Grid.Row="0"  
               Stroke="Blue"
               Fill="Transparent" />
    <TextBlock Grid.Column="1" 
               Grid.Row="0"
               Text="(1,0)" />
    <Rectangle Grid.Column="0"
               Grid.Row="1"  
               Stroke="Blue"
               Fill="Transparent" />
    <TextBlock Grid.Column="0" 
               Grid.Row="1"
               Text="(0,1)" />
    <Rectangle Grid.Column="1"
               Grid.Row="1"  
               Stroke="Blue"
               Fill="Transparent" />
    <TextBlock Grid.Column="1" 
               Grid.Row="1"
               Text="(1,0)" />
</Grid>

这样会产生这样的结果：

或者，您可以填充矩形而不给它们描边：

    <Grid HorizontalAlignment="Stretch" 
          VerticalAlignment="Stretch" 
          Margin="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Grid.Column="0"
                   Grid.Row="0"  
                   Fill="LightBlue" />
        <TextBlock Grid.Column="0" 
                   Grid.Row="0"
                   Text="(0,0)" />
        <Rectangle Grid.Column="1"
                   Grid.Row="0"  
                   Fill="LightYellow" />
        <TextBlock Grid.Column="1" 
                   Grid.Row="0"
                   Text="(1,0)" />
        <Rectangle Grid.Column="0"
                   Grid.Row="1"  
                   Fill="LightYellow" />
        <TextBlock Grid.Column="0" 
                   Grid.Row="1"
                   Text="(0,1)" />
        <Rectangle Grid.Column="1"
                   Grid.Row="1"  
                   Fill="LightBlue" />
        <TextBlock Grid.Column="1" 
                   Grid.Row="1"
                   Text="(1,0)" />
    </Grid>

例如，可以生成一个棋盘格图案：

这并不是一份全面的答案 - 你可能需要写一本书。它只是想说明有很多方法可以做到你所要求的事情，并且如果那是你唯一需要的，有一些非常快速和简单的解决方案。

- Wonko the Sane

---

那么，如何获得一像素宽的网格线？ - Anders Lindén

但这将使内边框具有双倍宽度。 - Anders Lindén

@WonkotheSane: 那行不通。StrokeThickness 是一个简单的 double 类型。要实现类似的效果，可以使用 Border 代替 Rectangle：<Border Grid.Column="2" Grid.Row="0" BorderBrush="Black" BorderThickness="0,1,1,1" Background="Transparent" />。 - Daniel Hilgarth

@DanielHilgarth - 你是正确的 - 我已经删除了我的错误评论，以消除任何困惑。 - Wonko the Sane

Answer 2

我采用了以下方法：通过利用网格的背景颜色和放置在其中的控件，来创建可见的线条。通过对这些控件应用一种设置边距的样式，我有效地创建了一个透明的“边框”，使得控件周围暴露出网格的背景颜色，从而产生了线条效果。具体操作如下：

<Window.Resources>
    <Style x:Key="RowTitleLabelsSytel" TargetType="Label">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="#62d0a6"/>
        <Setter Property="Margin" Value="1,2,1,1"/>
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>

    <Style x:Key="ColumnTitleLabelsSytel" BasedOn="{StaticResource RowTitleLabelsSytel}" TargetType="Label">
        <Setter Property="Background" Value="#62d0a6"/>
        <Setter Property="Margin" Value="1,1,1,1"/>
    </Style>

    <Style x:Key="TextBoxStyle" TargetType="TextBox">
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="#FFD5FFE0"/>
        <Setter Property="Margin" Value="1,1,1,1"/>
    </Style>

    <Style x:Key="TextBoxOddRow"  BasedOn="{StaticResource TextBoxStyle}" TargetType="TextBox">
        <Setter Property="Background" Value="#CAEFE1"/>
    </Style>

</Window.Resources>

<Grid HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Background="Black">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Grid.Row="0"  Style="{StaticResource RowTitleLabelsSytel}"/>
    <!--Column titles-->
    <Label Grid.Column="1" Grid.Row="0" Content="Col1" Style="{StaticResource RowTitleLabelsSytel}"/>
    <Label Grid.Column="2" Grid.Row="0" Content="Col2" Style="{StaticResource RowTitleLabelsSytel}"/>

    <!--Rows titles-->
    <Label Grid.Column="0" Grid.Row="1" Content="Row1"   Style="{StaticResource ColumnTitleLabelsSytel}" />
    <Label Grid.Column="0" Grid.Row="2" Content="Row2"   Style="{StaticResource ColumnTitleLabelsSytel}"/>

    <TextBox Grid.Column="1" Grid.Row="1" Text="1_1" Style="{StaticResource TextBoxStyle}"/>
    <TextBox Grid.Column="2" Grid.Row="1" Text="1_2" Style="{StaticResource TextBoxStyle}"/>
    
    <TextBox Grid.Column="1" Grid.Row="2" Text="2_1" Style="{StaticResource TextBoxOddRow}"/>
    <TextBox Grid.Column="2" Grid.Row="2" Text="2_2" Style="{StaticResource TextBoxOddRow}"/>
            
</Grid>

- Amit Lipman