#497 – Use a UniformGrid to Make a Group of Buttons the Same Size

February 17, 2012 1 Comment

You can use a StackPanel to make its child elements the same size in one of its dimensions.  This is harder to do in the other dimension.

The example below uses a StackPanel to contain some buttons.  They end up the same height, but are still different widths.

You can make the buttons the same height and width using a UniformGrid instead of a StackPanel.

        <UniformGrid DockPanel.Dock="Bottom" Margin="10" Rows="1" HorizontalAlignment="Right"
                    VerticalAlignment="Bottom">
            <Button Grid.Column="0" Content="No" FontSize="18" Margin="5" Padding="6,3"/>
            <Button Grid.Column="1" Content="Yes, Absolutely" Margin="5" Padding="6,3"/>
            <Button Grid.Column="2" Content="Maybe" Margin="5" Padding="6,3"/>
        </UniformGrid>

The UniformGrid will make sure that each cell is the same height and the same width.  This is desirable because you then avoid having to set the button sizes manually.

Advertisement

Filed under Layout Tagged with , , ,

#472 – UniformGrid Defaults to Being Square

January 13, 2012 1 Comment

You typically set the number of rows and columns for a UniformGrid using the Rows and Columns properties.  You can also omit these properties and the UniformGrid will set the number of rows and columns based on the number of child elements.

The UniformGrid will attempt to create a square layout by automatically setting the number of rows and columns as listed below:

  • 1 element – 1 row, 1 column
  • 2-4 elements – 2 rows, 2 columns
  • 5-9 elements – 3 rows, 3 columns
  • 10-16 elements – 4 rows, 4 columns
  • Etc.

Notice that the UniformGrid in this situation will always have the same number of rows as columns.

    <UniformGrid>   <!-- No Rows/Columns specified -->
        <Label Content="1st" Background="AliceBlue" />
        <!-- Etc -->
    </UniformGrid>
</UniformGrid>





Filed under Layout Tagged with , ,

#469 – Filling a UniformGrid from Right to Left

January 10, 2012 1 Comment

A UniformGrid will normally lay out its child elements from left to right, starting in the first row (top to bottom, left to right).  You can reverse the left-to-right behavior by using the FlowDirection property.

The default value for FlowDirection is LeftToRight.  If you specify a value of RightToLeft, the UniformGrid will fill child elements from right to left within each row.  (Rows are still filled from top to bottom).

<UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft">
    <Label Content="1" Background="AliceBlue"/>
    <Label Content="2" Background="Cornsilk"/>
    <Label Content="3" Background="DarkSalmon"/>
    <Label Content="4" Background="Gainsboro"/>
    <Label Content="5" Background="LightBlue"/>
    <Label Content="6" Background="MediumAquamarine"/>
    <Label Content="7" Background="MistyRose"/>
</UniformGrid>

Filed under Layout Tagged with , , , ,

#468 – FirstColumn Property Allows Blank Cells in a UniformGrid

January 9, 2012 1 Comment

A UniformGrid will contain child elements in the order in which they appear in the XAML file where the UniformGrid is defined.  They will be placed into the first row of the UniformGrid (left to right) until the row fills up and then being filling the second row.

Child elements will normally appear starting in the first column of the first row.  You can instead have the first child appear in a different column by specifying a value for the FirstColumn property.  This property indicates the 0-based column number where the first child element will appear.  Child elements will then continue to fill in consecutive columns on the first row and then continue on the second row when the first fills up.

        <UniformGrid Rows="5" Columns="7" FirstColumn="3" >
            <Border BorderBrush="Black" BorderThickness="1"><Label Content="1"/></Border>
            <Border BorderBrush="Black" BorderThickness="1"><Label Content="2"/></Border>
            <Border BorderBrush="Black" BorderThickness="1"><Label Content="3"/></Border>
            <!-- etc -->
        </UniformGrid>

Filed under Layout Tagged with , , ,

#467 – Use a UniformGrid for Evenly Spaced Rows and Columns

January 6, 2012 Leave a comment

The UniformGrid layout panel is similar to a Grid, in that it lays child elements out in rows and columns.  But it’s different from a Grid in the following ways:

  • You don’t specify any size information for individual rows and columns
  • All columns are the same width
  • All rows are the same height
  • You specify the desired number of rows and columns
  • You don’t specify a row or column for child elements

Child elements are automatically placed into consecutive cells in the grid.  Each row is filled from left to right, starting with the first row.

    <UniformGrid Rows="2" Columns="3">
        <Label Content="1st" Background="Azure" />
        <Label Content="2nd" Background="Moccasin"/>
        <Label Content="3rd" Background="DarkSeaGreen"/>
        <Label Content="4th" Background="Violet" />
        <Label Content="5th" Background="Pink" />
    </UniformGrid>


Filed under Layout Tagged with , ,