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.

• Vajura: Well it is working, but yea i will use this.

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>