Winrt custrom網格控制與網格線

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文檔 ：

啟用網格線會在網格中的所有元素周圍創建虛線。 只有虛線可用，因為此屬性旨在用作調試布局問題的設計工具，不適用於生產質量代碼。 如果您想要網格內的線條，請將網格中的元素設置為具有邊框。

因此，地鐵不支持網格線（僅限設計工具），因此我假設您必須在子元素上添加邊框，根據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>

通過這種方式，您可以按照自己的喜好排列單元格，並且可以減少必須將所有內容嵌套在邊框中。 希望能幫助到你。 干杯!