WPF UniformGrid rows and column same width height

Question

i need help with UniformGrid, or Grid, table, whatever.

Simple Version: I have a MainWindow with only 6 Rectangle, and they should fill my entire MainWindow. When i resize the window, those 6 Rectangle need to able to resize and keep the same width and height like all the other rectangles.

I eventually need to replace my rectangles with actual content, such as 6 videos playing, or 6 web browsers, or 6 images, etc, all with same width/height, as the window resizes by the user.

Here are the rectangles.

Here is my XAML code so far. It doesn't quite work, as even if i resize the MainWindow, the rectangles all stay as "squares", they always have length = width. But i need rectangles, with sometimes the length could be greater than width, since he window is resized by user however he wants.

        <UniformGrid Rows="2" Columns="3">
            <Rectangle Stretch="UniformToFill" Fill="Black" />
            <Rectangle Stretch="UniformToFill" Fill="Blue" />
            <Rectangle Stretch="UniformToFill" Fill="Red" />
            <Rectangle Stretch="UniformToFill" Fill="Green" />
            <Rectangle Stretch="UniformToFill" Fill="Yellow" />
            <Rectangle Stretch="UniformToFill" Fill="Orange" />
        </UniformGrid>

Complex Version: I eventually need to allow user to display 1, 2, 4, or 6 displays, so they need to take up the entire window with width/height.

Here's how it would look if it should display 2 display. (when the user resize the window so that length > width)

Answer 1

The Grid give's you that resizing behavior already if you define your columns and rows with star-size, which is the default. Instead of writing for example <RowDefinition Height="*"/> you can just write <RowDefinition/>.

So, this should work:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Rectangle Grid.Row="0" Fill="Black" />
  <Rectangle Grid.Column="1" Fill="Blue" />
  <Rectangle Grid.Column="2" Fill="Red" />
  <Rectangle Grid.Row="1" Fill="Green" />
  <Rectangle Grid.Row="1" Grid.Column="1" Fill="Yellow" />
  <Rectangle Grid.Row="1" Grid.Column="2" Fill="Orange" />
</Grid>

For the complex case you need to adjust the Grid's RowDefinitions and ColumnDefinitions based on the elements that you put into that Grid and based on Window size, if you want to create columns or rows. You can set everything from Codebehind on the Grid.

Give it a name in Xaml and use in Codebehind for example grid.RowDefinitions.Add(...);

Add or remove elements in Codebehind via grid.Children.Add(...);

Set Grid.Row and Grid.Column in Codebehind via static methods Grid.SetRow and Grid.SetColumn