wpf - Customize the grid lines for original wpf Grid control

最新推荐文章于 2019-08-09 19:29:34 发布

原创最新推荐文章于 2019-08-09 19:29:34 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c# #wpf

C# 同时被 2 个专栏收录

76 篇文章

订阅专栏

WPF

46 篇文章

订阅专栏

本文介绍如何在WPF中自定义网格线条样式，并详细解释了如何应用这些样式来绘制网格线。通过使用ResourceDictionary和Style元素，可以实现个性化且高度定制化的网格线效果。

The System.WIndows.Controls.Grid classes does provide a ShowGridLines method, while it does not provide means to override the style of the grid lines.

Ian Oakes has shows some good ways to use the grid lines and his post is available at "Displaying Grid Lines"

While it does show the quitessence of programming with styles, so here is what is the most important of the styles.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Style x:Key="lineStyle" TargetType="Line">

        <Setter Property="Stroke" Value="Gray" />
        <Setter Property="Stretch" Value="Fill" />
        <Setter Property="Grid.ZIndex" Value="100" />
        <Setter Property="StrokeDashArray" Value="1,2" /> <!-- DoubleValueCollection-->
    </Style>
    
    
    <Style x:Key="horizontalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}" >
        <Setter Property="X2" Value="1" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
        <Setter Property="Grid.ColumnSpan" Value="{Binding Path=ColumnDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}" />
    </Style>

    <Style x:Key="verticalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}" >
        <Setter Property="Y2" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="Grid.RowSpan" Value="{Binding Path=RowDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}" />
    </Style>

    <Style x:Key="verticalLineStyleLeft" TargetType="Line" BasedOn="{StaticResource verticalLineStyle}" >
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>

    <Style x:Key="horizontalLineStyleTop" TargetType="Line" BasedOn="{StaticResource horizontalLineStyle}" >
        <Setter Property="VerticalAlignment" Value="Top" />
    </Style>
    

</ResourceDictionary>

and how it is used? how will the styles be applied to draw the grid lines?

<Window x:Class="GridLines.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid
        x:Name="Grid" Margin="20"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        
        
        <Line Grid.Column="0" Style="{StaticResource verticalLineStyleLeft}" />
        <Line Grid.Column="0" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="2" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="3" Style="{StaticResource verticalLineStyle}" />
        
        <Line Grid.Row="0" Style="{StaticResource horizontalLineStyleTop}" />
        <Line Grid.Row="0" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="2" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}" />

    </Grid>
</Window>