Question

我想制作自定义网格控件，因为默认情况下不支持显示网格线。我找到了一个wpf解决方案，但winrt缺少wpf支持的一些功能。 wpf soulution中的代码是这样的：

     protected override void OnRender(DrawingContext dc)
    {
        if (ShowCustomGridLines)
        {
            foreach (var rowDefinition in RowDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
            }

            foreach (var columnDefinition in ColumnDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
            }
            dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
        }
        base.OnRender(dc);
    }

但是我无法覆盖onrender方法，winrt中没有drawcontext。那么如何在网格中绘制网格线？谢谢你的帮助！

Answer 1

来自Microsoft documentation：

启用网格线会在所有元素周围创建虚线在网格内。由于此属性，只有虚线可用旨在作为调试布局问题的设计工具，而不是旨在用于生产质量代码。如果你想要内线一个网格，将网格中的元素设置为具有边框。

由于这个原因，地铁不支持网格线（仅限设计工具），因此我假设您必须在子元素上添加边框，根据Microsoft文档。

Answer 2

如果你不想在每一个元素周围放置边框，我所做的基本上就是你所做的，但在xaml中只是基本上就像它们那样绘制;

<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>    
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>        
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <!-- Horizontal Lines -->
        <Rectangle Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="1" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="2" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="3" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="4" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <!-- Vertical Lines -->
        <Rectangle Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="2" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="3" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
    </Grid>
</Border>

通过这种方式，您可以根据自己的喜好排列细胞，并且可以减少必须将所有内容嵌套在边框中。希望能帮助到你。干杯！

冬季自定义网格控制与网格线

2 个答案: