#1,049 – How the GridSplitter Behaves when Cells Use Star Sizing

April 11, 2014 Leave a comment

Recall that a GridSplitter in its own column and with its HorizontalAlignment set to Center will resize columns on either side of it.  In the example below, columns 0 and 2 are resized, but the width of column 3 is not changed.

1049-001

1049-002

If all of the content columns are sized using star sizing, the GridSplitter will leave them as star sized, but change the coefficients to match the final size after moving the GridSplitter.  We can see this by dumping out the column widths before and after our sizing operation.

Before resizing, columns 0, 2 and 3 are all “1*” (or just “*”).  They take up equal space.

1049-003

After resizing, the coefficients change.  Columns are still proportionally sized, but the proportions are different.

1049-004

We can verify that the columns are sized proportionally by resizing the entire Grid (containing window).  The columns retain their post-GridSplitter relative sizes.

1049-005

Advertisement

Filed under Layout Tagged with , , , , ,

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

 

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