带有网格线的冬季自定义网格控件答案

【问题标题】：Winrt custrom grid control with gridlines带有网格线的冬季自定义网格控件
【发布时间】：2012-09-14 11:40:30
【问题描述】：

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

     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 中没有绘图上下文。那么我怎样才能在我的网格上绘制网格线呢？感谢您的帮助！

【问题讨论】：

标签： c# xaml grid microsoft-metro winrt-xaml

【解决方案1】：

如果您不想在每个元素周围设置边框，我所做的基本上就是您所做的，但在 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】：

来自Microsoft documentation：

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

因此，metro 不支持网格线（仅限设计工具），因此根据 Microsoft 文档，我假设您必须在子元素上设置边框。

【讨论】：

我知道我不能使用它（实际上 winrt 完全缺少 showgridlines 属性，我也不能将它用于设计工具），这就是我想自定义创建它的原因比在每个单元格中添加边框更简单。
这取决于您的单元格的内容，但是在单元格上带有边距的Grid.BackgroundColor（这比添加边框更容易）可以解决问题吗？请提供更多信息以获得更具体的答案，因为显然没有简单/直接的方法来实现这一点。