wpf 网格线 - 改变样式

Question

有没有办法改变wpf网格中网格线的样式？ 我需要将网格划分为 4 个单元格。为此，我使用了 RowDefinitions 和 ColumnDefinitions。但是我需要用户区分哪个单元格是哪个单元格，这就是为什么我需要更改网格线的颜色。

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>

例如，可以给出棋盘图案：

这绝不是一个全面的答案——你可能可以写满一本书。这只是为了表明有很多方法可以满足您的要求，并且如果这就是您所需要的，那么有一些非常快速且简单的解决方案。

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>