I am trying to set the WPF window to resize depending on the resolution however, I cannot seem to get it right. Does anyone have any suggestions or articles I should read to achieve this?
I have included some sample code that i have tried as a base to work off.
This code works fine at 1920 by 1080 but anything smaller it goes off the screen
Any help would be greatly appreciated, thanks in advance!
<WindowState="Maximized" WindowStyle="SingleBorderWindow">
<Grid Margin="0,0,2,-21" RenderTransformOrigin="0.0,0.0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Right" Height="100" Margin="0,30,-400,0" VerticalAlignment="Top" Width="145" Source="G:\Pi Project\Project Pi Logo.png" Grid.Column="1"/>
<Label Content="The Pi Project" HorizontalAlignment="Right" Height="60" Margin="0,132,-390,0" VerticalAlignment="Top" Width="170" FontSize="16" Grid.Column="1" />
<Button x:Name="saveProject_btn" Content=" Save
Project" HorizontalAlignment="Right" Height="200" Margin="0,815,-415,0" VerticalAlignment="Top" Width="300" FontFamily="OCR A Extended" FontSize="36" Grid.Column="1"/>
<Button x:Name="home_btn" Content="Return
 Home" HorizontalAlignment="Right" Height="200" Margin="0,600,-415,0" VerticalAlignment="Top" Width="300" FontFamily="OCR A Extended" FontSize="36" Click="home_btn_Click"/>
<Label x:Name="projectCodeViewer" Content="" HorizontalAlignment="Left" Height="560" Margin="50,455,0,0" VerticalAlignment="Top" Width="1425" BorderThickness="2,2,2,2" BorderBrush="Black" FontSize="36" FontFamily="OCR A Extended" Grid.ColumnSpan="2"/>
<ListBox x:Name="MoveCommands_LB" HorizontalAlignment="Left" Height="289" Margin="50,30,0,0" VerticalAlignment="Top" Width="648" SelectionChanged="Movement_List_Populate" Grid.ColumnSpan="2"/>
<ListBox x:Name="Values_LB" HorizontalAlignment="Left" Height="289" Margin="735,30,0,0" VerticalAlignment="Top" Width="328"/>
<Button Content="Add Command" HorizontalAlignment="left" Height="289" Margin="1100,30,-53,0" VerticalAlignment="Top" Width="428" FontSize="48"/>
</Grid>
In XAML if you want to automatically position any kind of Object on your window it is highly discouraged (in my point of view) to set margins that could make your Objects go out of bounds.
You also have to think where you want to position them and how they should react when you resize them, for example, if you have a header that's supposed to use the entire Width
of the Parent control (in this case Window), then it should have no Width
, HorizontalAlignment
set to Stretch
and no Margins
(except if you want to make it have a free space from all sides)
Another example would be a Button that is used to close your Window, the best practice would be to actually place it on the bottom right with HorizontalAlignment
set to Right
and VerticalAlignment
set to Bottom
with no Margins, except like above, you want to make it have some padding off the corners.
That way when you resize everything flows perfectly to the places relative to the size of the Window, keeping the same proportions, here an example of what I explained above:
<Grid>
<Label Content="Header" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="50" BorderThickness="3" BorderBrush="Black" Background="Beige"/>
<!-- Inside this Grid we insert the Body -->
<Grid Margin="5,55,5,60" Background="LightGray" >
<Grid.Effect>
<DropShadowEffect />
</Grid.Effect>
<Label Content="Hello World!" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50" />
</Grid>
<Button Content="Exit" VerticalAlignment="Bottom" HorizontalAlignment="Right" Height="50" Width="100" Margin="0,0,5,5" />
</Grid>
What I did above is still not how you could resolve it the best way, because I'm setting Margins and not defining a "set structure", for that the Grid
object has a great feature, ColumnDefinitions
and RowDefinitions
, below is the same code but with those definitions that help me define sections in my XAML structure:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="50" BorderThickness="3" BorderBrush="Black" Background="Beige"/>
<!-- Inside this Grid we insert the Body -->
<Grid Grid.Row="1" Margin="5,5,5,10" Background="LightGray" >
<Grid.Effect>
<DropShadowEffect />
</Grid.Effect>
<Label Content="Hello World!" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50" />
</Grid>
<Button Content="Exit" Grid.Row="2" VerticalAlignment="Bottom" HorizontalAlignment="Right" Height="50" Width="100" Margin="0,0,5,5" />
</Grid>
So all you gotta do is actually structure that Resizable layout you're making like I did and you're set.