Automatic resizing of user controls when parent window is resized

Question

I am working on a C# WPF project and I am making use of user controls but I am having a problem with getting the resize to work when the parent window is resized.

I have a Window called MainWindow which houses a canvas which will host the user controls. When Main Window is resized the user controls should also resize. This is more a less working except it doesn't seem to fill up the who screen. Below is the code and screenshots to explain what I mean.

Main Window

Below is the code for the Main Window, this window will host the user controls

<Window x:Class="ReportReader.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="513" Width="925" WindowStartupLocation="CenterScreen">
    <Grid>
        <Menu Height="23" Name="menu1" VerticalAlignment="Top">
            <MenuItem Name="mnuFile" Header="File">
                <MenuItem Name="mnuOpen" Click="mnuOpen_Click" Header="Open" />
                <MenuItem Name="mnuClose" Click="mnuClose_Click" Header="Close Report" />
                <MenuItem Name="mnuRecentFile" Header="Recent Files" />
                <Separator />
                <MenuItem Name="mnuExit" Click="mnuExit_Click" Header="Exit" InputGestureText="Alt+F4" />
            </MenuItem>
        </Menu>
        <StatusBar Name="statusBar1" Height="28" VerticalAlignment="Bottom" />
        <Label Content="No Report Loaded" Name="lblStatus" Height="28" VerticalAlignment="Bottom" Margin="0,0,39,0" />
        <Grid Margin="12,29,12,34" Name="MainWindowHostCanvas" Background="Blue" />
    </Grid>
</Window>

The canvas is coloured blue so it shows my problem in the screenshots.

Below is the code for one of the user controls

<UserControl x:Class="ReportReader.UserControls.ReportViewer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignWidth="879">
    <Grid Height="415">
        <Label Content="Report for..." Margin="12,12,12,0" Name="lblReportDateTitle" FontSize="26" FontWeight="Bold" HorizontalContentAlignment="Center" Height="44" VerticalAlignment="Top" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="12,62,0,0" Name="cboRegisteredApps" VerticalAlignment="Top" Width="202" SelectionChanged="cboRegisteredApps_SelectionChanged">
            <ComboBoxItem Content="Select App" IsSelected="True" />
        </ComboBox>
        <DataGrid AutoGenerateColumns="False" Margin="14,203,12,12" Name="dataExceptionGroups" />
    </Grid>
</UserControl>

Below is a screenshot of the User Control hosted by the Main Window from when the program first loaded up.

As you can see the blue canvas fills the whole window up to the status bar, the data grid, is at the bottom of the window, just above the status bar, and the report title is at the top of the window just above the menu bar.

Below is the screen shot now that the window has been resized

As you can see from this screenshot, the window has been resized and the blue canvas has resized to fill up the extra space, however, the datagrid is no longer at the bottom of the window, just above the status bar and instead floating around the middle. Also the title at the top is no longer just under the menu bar, and is also in the middle.

I'm not sure what I can do to resolve this.

Thanks for any help you can provide.

Answer 1

Your Grid within UserControl has fixed Height set to 415 which is why it does not stretch:

<UserControl>
    <Grid Height="415">

If you're using designer to create your interface then it has tendency to set these properties to fixed values.

Answer 2

If Height="*" is set then all the rows would share the available space equally. If you want to set in % then you can set some thing like this

<Grid.RowDefenitions>
      <RowDefenition Height="10*"/>
      <RowDefenition Height="20*"/>
      <RowDefenition Height="60*"/>
      <RowDefenition Height="10*"/>   
 </Grid.RowDefenitions>

now when ever the window is re-sized always same percentage will be shared for all the rows

It is not necessary the height value in all the rows should sum up to 100. For example if you have three rows then you can set as below as well

<Grid.RowDefenitions>
      <RowDefenition Height="20*"/>
      <RowDefenition Height="30*"/>
      <RowDefenition Height="10*"/>  
 </Grid.RowDefenitions>

then the total window size will be divided among the all the three rows as follows

for 1st row height will be WindowSize*20/(20+30+10)
for 2nd row height will be WindowSize*30/(20+30+10)
for 3rd row height will be WindowSize*10/(20+30+10)

All the Row sizes will re-size accordingly when ever window size is re-sized

Answer 3

You are using Static Sizing with margin's and height's with hard coded values.

1) Remove all the hard coded values for margin's height and width.

2) Split your grid using Row/Column Definitions with relative height using * , FYI you can set MinHeight on RowDefenition .

 <Grid>
     <Grid.RowDefenitions>
          <RowDefenition Height="*"/>
          <RowDefenition Height="*"/>
          <RowDefenition Height="*"/>
          <RowDefenition Height="*"/>   
     </Grid.RowDefenitions>

     <Menu>
        .....
    </Menu>
    <StatusBar Grid.Row="1"/>
    <Label Content="No Report Loaded"  Grid.Row="2"  />
    <Grid Grid.Row="3" />
</Grid>

Do the same for the UserControl.