Winrt custrom grid control with gridlines

Question

I want to make a custom grid control, because the default doesn't support showing grid lines. I found a wpf solution for this, but the winrt lacks few features that the wpf supports. The code in the wpf soulution is something like this :

     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);
    }

However I can't override the onrender method, and there is no drawingcontext in winrt. So how can I draw gridlines to my grid? Thanks for the help!

Answer 1

If you want to not have to put borders around every single element what I do is basically what you do but in xaml just essentially draw them kind of like for example;

<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>

This way you can have cells arranged however you like and you can cut down on having to nest everything in borders. Hope it helps. Cheers!

Answer 2

From Microsoft documentation :

Enabling grid lines creates dotted lines around all the elements within a Grid. Only dotted lines are available because this property is intended as a design tool to debug layout problems and is not intended for use in production quality code. If you want lines inside a Grid, style the elements within the Grid to have borders.

Grid lines are not supported by metro for this reason (design tool only), so I assume you have to put borders on your child elements, according to Microsoft documentation.