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

)

@Klyner apparently, WinRT doesn't have ShowGridLines property. So you need to create it manually as shown in my updated answer. — har07, Jan 21 '14 at 10:39

score 2 · Accepted Answer · edited May 23 '17 at 10:24

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

Praveen · Answer 2 · 2014-01-21T10:39:16.457

1

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>

edited Jan 21 '14 at 10:39

answered Jan 21 '14 at 10:07

Praveen

267
1
9

1

I am using Windows 8 XAML, I think I should have admit that. When I just add those words to the grid, xaml tells me that "ShowGridLines is not recognized or is not accessible." I think Windows 8 doesn't support "ShowGridLines". – Klyner Jan 21 '14 at 10:15
Does the Grid have property ShowGridLines ? – Praveen Jan 21 '14 at 10:19
Unfortunately it doesn't. – Klyner Jan 21 '14 at 10:20
Which type of application you are building ? – Praveen Jan 21 '14 at 10:21
1

For my study I am building a C#/Xaml application for Windows 8 tablets. – Klyner Jan 21 '14 at 10:26
In case of WPF applications and WP7/WP8 application Grid have the above property. I am not pretty much sure about Windows 8 tablet application. – Praveen Jan 21 '14 at 10:31
I just found this site where they say that Windows 8 does not have this property. http://connect.microsoft.com/VisualStudio/feedback/details/769336/showgridlines-and-label-not-recognized-as-being-valid-xaml – Klyner Jan 21 '14 at 10:34
I have updated my answer.If u use textbox inside a border i think your job can be done. – Praveen Jan 21 '14 at 10:40
Thanks for your help! I will try both of your methods. – Klyner Jan 21 '14 at 10:45

xaml Grid outlining

2 Answers2