Creating automatic resizing of subelements in WPF

Question

I currently have this code:

<Window x:Class="Listener.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="600" Width="800" Loaded="Window_Loaded" WindowStyle="None" AllowsTransparency="True" Background="Transparent" MouseDown="Window_MouseDown" KeyDown="Window_KeyDown" ResizeMode="CanResizeWithGrip">
    <Grid Margin="30" x:Name="bgBorder">
        <Grid Margin="0" Background="#555555" x:Name="mainWindow" MouseDown="mainWindow_MouseDown">
            <Grid Margin="2,2,2,2" Height="80" Background="#779999" x:Name="topControl" VerticalAlignment="Top">
            </Grid>
            <Grid Margin="2,84,238,2" Background="#557777" x:Name="playListControl">
            </Grid>
            <Grid Margin="2,84,2,2" Width="234" Background="#668888" x:Name="optionsControl" HorizontalAlignment="Right">
            </Grid>
        </Grid>
    </Grid>
</Window>

A borderless window where the 3 sub panels get resized according to their margin and alignment.

Is this the correct way of doing this?

And on a side node, I plan on creating some sort of border resize and not use

ResizeMode="CanResizeWithGrip"

This was just used for testing.

Answer 1

I would say no. If you want to create grid-like layout, you should declare columns and rows, and specify how wpf should stretch those. For example like this:

<Grid Margin="30" x:Name="bgBorder">
    <Grid Background="#555555" x:Name="mainWindow" MouseDown="mainWindow_MouseDown">
        <Grid.RowDefinitions>
            <!-- frist row will stretch to fit the content -->
            <RowDefinition Height="Auto"/>
            <!-- second row will fill all available space -->
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Margin="2" Grid.Row="0" Height="80" Background="#779999" x:Name="topControl"/>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <!-- first column will fill all available space -->
                <ColumnDefinition Width="*"/>
                <!-- second column will stretch to fit the content -->
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" Margin="2" Background="#557777" x:Name="playListControl"/>
            <Grid Grid.Column="1" Margin="2" Width="234" Background="#668888" x:Name="optionsControl"/>
        </Grid>
    </Grid>
</Grid>

You should really do some reading on how things are done in wpf, this HTML-ish layout you are trying to create won't work.

Answer 2

İf You Use a ViewBox and a Canvas on your user control, this will fix all the mainwindow sizes.

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
  <canvas>
       --- all your controls -- 
   </Canvas>
</Viewbox>