为WPF的Grid添加网格边框线

七的不是海

已于 2024-11-06 14:38:02 修改

阅读量4k

点赞数 4

分类专栏： WPF 文章标签： wpf

于 2024-05-22 19:32:25 首次发布

本文链接：https://blog.csdn.net/weixin_50478033/article/details/139126518

版权

在WPF中使用Grid绘制表格的时候，如果元素较多、排列复杂的话，界面会看起来很糟糕，没有层次，这时用网格或边框线分割各元素（标签或单元格）将会是页面看起来整齐有条理。

默认没有边框线的如下图所示：

<Window x:Class="GridLineTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GridLineTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
    </Grid>
</Window>

一、使用ShowGridLines属性

Grid控件自带属性：ShowGridLines，只需将它设为True即可显示网格线，效果如下：

<Window x:Class="GridLineTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GridLineTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400" ShowGridLines="True">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Propert

最低0.47元/天解锁文章