#578 – Grid Row and Column Size Use GridLength Object

June 12, 2012 Leave a comment

When you create a Grid in XAML, you typically specify the rows and columns at design-time, along with the height of each row and width of each column.  Recall that there are three ways to set the height of a row or width of a column–explicit size, automatic or evenly distributed using remaining space in the Grid.

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="140"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

Within the RowDefinition and ColumnDefinition objects, the row height and column width are stored within a GridLength object.  GridLength has the three boolean properties IsAbsolute, IsAuto and IsStar indicating how the height or width is specified and then a Value property that contains the actual value.

 

Advertisement

Filed under Layout Tagged with , , , , ,

#412 – Three Ways to Set Row Height or Column Width in a Grid

October 20, 2011 3 Comments

You can set the height/width of rows/columns in a Grid using the Height and Width properties of the RowDefinition and ColumnDefinition elements.  You can specify these values in one of three different ways.

  • Auto – set height/width to fit the size of the contained element
  • numeric value – explicitly set height/width to specified number of device independent units (1/96th in)
  • * or n* – distribute remaining space proportionately across all rows/columns that set their height/width using the * mechanism

Below is an example showing these methods to set the width of four columns in a grid.

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- Contents of Grid go here -->
    </Grid>


The Chico column is set to 100 units wide, Harpo column set to fit content and all remaining space is split up between the Groucho and Zeppo columns.

Filed under Layout Tagged with , , , , , ,

#410 – Default Grid Row and Column Sizes

October 18, 2011 Leave a comment

By default, all rows in a Grid are set to the same height, distributing the entire height of the Grid among all of its rows.  This is true if you do not explicitly set the height for any of the rows.

Similarly, if you don’t specify the width of any of the columns in the Grid, the entire width of the Grid is distributed evenly across all of its columns, so that each column is the same width.

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Larry" Margin="5" Background="Lavender"/>
        <Label Grid.Row="0" Grid.Column="1" Content="Moe" Margin="5" Background="Magenta"/>
        <Label Grid.Row="0" Grid.Column="2" Content="Curly" Margin="5" Background="Cornsilk"/>

        <Button Grid.Row="1" Grid.Column="1" Margin="5" Content="Do Eye Poke" />
    </Grid>

Filed under Layout Tagged with , , , ,