xaml Grid outlining

Question

First I want to let you know that I am not really into all of the XAML features. I am creating one of my first applications in the Windows 8 .Xaml area.

Right now I'm creating a legend in which all the points that can be found in the application are explained. For this legend I am using the Grid defenitions to define the rows and columns that are being displayed.

My question is, does someone know how to outline the defined rows and columns in the grid?

(Some of the code I used to create the legend:

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="7*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
            <TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
            <TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
            <TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
            <TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>

)

Answer 1

The easiest way is to set ShowGridLines property of your Grid to True

ShowGridLines="True"

There are other options, depending on how you want the outlines be displayed exactly. Some of those options are explained in this SO post.

UPDATE :

Since you develop on Win RT platform which doesn't have ShowGridLines property, you should make outlines on your own. The minimum effort I can think is to add Rectangle for each Row spanning through all columns, and add Rectangle for each column spanning through all rows. That way will need less Rectangles than if you create it for each cell as shown in above link. Check this other SO post for example. And example for your case :

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>

<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>

<!-- Horizontal Lines -->
<Rectangle Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="3" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="4" Grid.ColumnSpan="2" 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"/>

Answer 2

Just add ShowGridLines="True" to your grid

For example

<Grid Name="grdValues"  Height="155"  ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
</Grid>

Update

<Border  BorderThickness="1" Grid.Column="1" Grid.Row="0" Name="brdUsrName"  HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBlock x:Name="lText1"  Text="Definition 1" FontSize="33"/>
</Border>