My Master's Thesis Problems and solutions encountered…

11Apr/101

Grid Controls – Rows with Variable Height

When making the layout for your application you will most often use Grid Controls and/or WrapPanels. I needed a layout to be a single box that was always centered vertically and had a variable sized height, depending on the amount of text inside the box.

Initially, you need to define the basic grid layout. Open your new Silverlight project, and select the MainPage.xaml. It probably looks something like this (depending on your Visual Studio version):


<UserControl x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

  </Grid>
</UserControl>

You will need to add some measurements to the Grid definition, so it says:


<Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="Auto" ShowGridLines="True">

This only sets the color of the background and makes sure the size of the grid changes with the size of the window. Also, the ShowGridlines makes sure you can see the changes you will make next. When you are finished, you can set it to false.

With the grid control we create a 3 x 3 grid, and we need to specify the number and width/height of the columns and the rows. This is done in the Grid.RowDefinitions and Grid.ColumnDefinitions::

<UserControl x:Class="QM_v1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <!--Background layout-->
   <Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="auto" ShowGridLines="True">

       <!--We define the grid, ie. number of rows and number of columns-->
        <Grid.RowDefinitions>
            <RowDefinition Height="130"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="500"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

    </Grid>
</UserControl>

As it can be seen, we have defined three columns, where only the middle as a fixed size. The first and third column will just occupy the space left in the window. The first two rows have initially a fixed height, while the last just occupies the remaining. If you run your program, it will look something like this:

The cell in the middle is where we will place our text (and eventually the whole application). You are maybe asking yourself why we defined a fixed height to the second row, when want it to be variable... This was just to show you how the grid works, and in the following, we set the second row height to auto. But we need to insert some text into this cell, otherwise the cell height i set to 0, and can therefore not be seen.

Changes to be noted in the code below:

  • RowDefinition Height has been changed for the second row, so it's now set to auto.
  • We have added a border that defines where the textblock is to be placed ( Grid.Column="1" & Grid.Row="1">), and a StackPanel, that defines the margin.
  • The new textblock inserts the texts, and its TextWrapping = "Wrap" ensures that the text is wrapped by the border.

<UserControl x:Class="QM_v1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <!--Background layout-->
   <Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="auto" ShowGridLines="true">

       <!--We define the grid, ie. number of rows and number of columns-->
        <Grid.RowDefinitions>
            <RowDefinition Height="130"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="500"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>


<!--the border-->
        <Border BorderThickness="2"
                    BorderBrush="#D1CACA"
                    Margin="10"
                    CornerRadius="10"
                    Background="#E8E8E8"
                    Grid.Column="1"
                    Grid.Row="1">
            <!--The text-->
            <StackPanel Margin="10">
                <TextBlock Text="The height of this row depends on the amount of text to be wrapped. Make sure you have your middle row set to 'auto' and the TextWrapping set to 'Wrap'."
                           Margin="5"
                           TextWrapping="Wrap"
                 /><!--Important to wrap the text!-->
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

If you run this code, you'll see something like this:

Grid, variable row size

As said before, you can just set the ShowGridlines to false when you are finished.

So, by using the code above you have created a grid, where the middle cells has fixed width, but the height depends on the amount of text you have inserted into the Textblock.

Comments (1) Trackbacks (0)
  1. gridcontrol? frontpage used to spray the entire page with tags, quotes and bugs.


Leave a comment


three × = 18

No trackbacks yet.