#1,201 – How to Share Star Sized Column Sizes

March 4, 2017 2 Comments

You can use the SharedSizeGroup attribute to share column sizes across different grids. You can’t normally share sizes of star-sized columns across multiple grids, however, since star sizing works only in the context of the current grid.

Below is an example of how to get a star sized column to be the same size as a star sized column in a different grid. In the example, we have two grids. In the first, we have two auto-sized TextBlocks and then a star-sized TextBox that takes up the remaining space. In the second grid, we have just a TextBlock and a TextBox, but we want the TextBox to be the same size as the one in the first grid. Using SharedSizeGroup on the TextBox columns won’t work, since the columns would then get auto-sized.

The solution is to set up a SharedSizeGroup on every column except for the TextBox columns and to add a dummy third column in the second grid. The TextBox columns will then each independently use star sizing and end up the same size.

    <StackPanel Margin="15" Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="Col 1"/>
            <TextBox Grid.Column="1" />
            <TextBlock Grid.Column="2" Text="3rd column here"/>
        </Grid>

        <Separator Margin="0,20"/>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition />
                <ColumnDefinition SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="1"/>
            <TextBox Grid.Column="1"/>
        </Grid>
    </StackPanel>

1201

Advertisement

Filed under Layout Tagged with , , , ,

#1,051 – How the GridSplitter Behaves when Cells Use Auto Sizing

April 15, 2014 Leave a comment

If one or both columns on either size of a GridSplitter (in its own column) have a width set to Auto, the behavior is as follows (“proportional” refers to star sizing):

  • Both columns set to Auto: Left column changes size and is switched to Absolute sizing
  • Left column Auto, right column proportional: Both columns change size, left switches to Absolute, right remains at original proportion (e.g. “1*”)
  • Right column Auto, left column proportional: Both columns change size, right switches to Absolute, left remains at original proportion

In the example below, columns 0 and 2 surround a GridSplitter in column 1.  Columns 0 and 2 are set to Auto size (as is the column with the GridSplitter) and column 3 is set to proportional.

Initially, we see that both columns 0 and 2 are auto-sized.
1051-001

If we slide the GridSplitter to the right, column 0 changes size and switches to Absolute sizing.  Column 2 remains as Auto.

1051-002

Filed under Layout Tagged with , , , , ,

#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

Filed under Layout Tagged with , , , , ,

#420 – You Can Use Floating Point Values for Star Sizing

November 1, 2011 1 Comment

You can use star sizing when setting the height of rows or width of columns in a Grid to distribute space in a Grid across multiple rows or columns.  You can use integer values preceding each ‘*’ (star) to indicate the relative size of rows or columns.

You can also use floating point values as relative star sizing numbers.  In the example below, we use numbers between 0.0 and 1.0 and set them so that their total adds up to 1.0.  This allows using the values as a ratio of the available space.

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="0.2*"/>
    		<RowDefinition Height="0.5*"/>
    		<RowDefinition Height="0.3*"/>
    	</Grid.RowDefinitions>

        <Label Grid.Row="0" Content="Auto-sized"/>
    	<Label Grid.Row="1" Content="0.2* row = 20% avail space" />
    	<Label Grid.Row="2" Content="0.5* row = 50% avail space" />
    	<Label Grid.Row="3" Content="0.3* row = 30% avail space" />
	</Grid>


Filed under Layout Tagged with , , ,

#419 – How Cell Sizes are Calculated when Using Star Sizing

October 31, 2011 Leave a comment

You can use star sizing when setting the height of rows or width of columns in a Grid to distribute space in a Grid across multiple rows or columns.

Here’s an example.

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="1*"/>
    		<RowDefinition Height="2*"/>
    		<RowDefinition Height="3*"/>
    	</Grid.RowDefinitions>

        <Label Grid.Row="0" Content="Auto-sized"/>
    	<Label Grid.Row="1" Content="1* row = 1/6 avail space" />
    	<Label Grid.Row="2" Content="2* row = 1/3 avail space" />
    	<Label Grid.Row="3" Content="3* row = 1/2 avail space" />
	</Grid>

The space allocated for each star-sized row is calculated as:

  • n / sum, where n = number preceding * for that row; sum = sum of all numbers preceding star-sized rows
  • Row is given n/sum of the total available space, after allocating space for Auto and Absolute sized rows

Filed under Layout Tagged with , , ,

#418 – Star Sizing Allows Setting Row and Column Sizes Relative to Each Other

October 28, 2011 3 Comments

You can use star sizing when setting the height of rows or width of columns in a Grid to distribute space in a Grid across multiple rows or columns.

When you specify the size of a row or column with star sizing, you can specify the size simply as “*”, or you can specify a number followed by the star (e.g. 2*).  The number indicates the size of the row or column, relative to the other rows or columns.  (The value “*” is equivalent to “1*”).

In the example below, the second row’s height is specified as “2*”, indicating that it should always be twice the height of the first row.  (Or 2 / (1+2) = 2/3 of the total)

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="1*"/>
    		<RowDefinition Height="2*"/>
    	</Grid.RowDefinitions>

    	<Label Grid.Row="0" Content="I'm a 1* row" />
    	<Label Grid.Row="1" Content="I'm a 2* row" />
	</Grid>


Filed under Layout Tagged with , ,

#417 – Using Star Sizing to Distribute Space Evenly across Rows or Columns

October 27, 2011 2 Comments

You can use star sizing when setting the height of a row in a Grid or the width of a column.  After a Grid allocates space for rows and columns that are sized using absolute values or auto-sized to fit the row/column contents, it will distribute the remaining space in the Grid across rows and columns that use star sizing.

In the simplest case, if the height or width is specified as “*”, space is distributed evenly across all remaining rows/columns.

    <Grid ShowGridLines="True">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition Height="*"/>
    		<RowDefinition Height="*"/>
    		<RowDefinition Height="*"/>
    	</Grid.RowDefinitions>

    	<Label Grid.Row="0" Content="Row 0 autosizes to this label" />
    	<Label Grid.Row="1" Content="1/3 of remaining space" />
    	<Label Grid.Row="2" Content="Another 1/3" />
    	<Label Grid.Row="3" Content="Final 1/3" />
	</Grid>



Star sizing is the default for a row’s height or a column’s width, if you do not explicitly set a height or width.

Filed under Layout Tagged with , ,