WPF Window Maximized causes Items to be misplaced

Question

I have set my WPF window to be maximized however the items inside it, such as buttons and images are sometimes stretched along with the window or even the positions are misplaced.

<Window x:Class="HelloApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="HelloApp" Height="661.842" Width="1105.263"
    WindowStyle="None" ResizeMode="NoResize"  
    WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid Background="#FFF3F3F3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" Width="Auto">
        <Label Content="Hello" HorizontalAlignment="Left" Margin="20,48,0,0" VerticalAlignment="Top" FontSize="36" FontFamily="Segoe UI Light"/>
        <Image Margin="49,7,994,593" Source="Infinite_symbol__128.png"/>
        <Button x:Name="exitBtn" Content="" HorizontalAlignment="Left" Margin="1042.148,9.606,0,0" VerticalAlignment="Top" Width="52.852" Height="51" BorderBrush="{x:Null}" Click="exitBtn_Click">
            <Button.Background>
                <ImageBrush ImageSource="close33 (2).png"/>
            </Button.Background>
        </Button>
    </Grid>
</Window>

For example, if Button X is at the top left corner in my Editor when I startup the program it would remain at the editor's top left, however the when maximized the actual top left would be much further apart.

I hope you understand what I mean. I want my child items to maximize along with the parent. How can I edit my code to get this done?

Answer 1

Instead of Margins you can define specific Grid.RowDefinitions and Grid.ColumnDefinitions depending on your desired layout. For example the following Xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
    <Button Grid.Row="0" Grid.Column="2" Content="TopRight"/>
    <Canvas Grid.Row="1" Grid.Column="1"/>
    <Button  Grid.Row="2" Grid.Column="0" Content="BottomLeft" />
    <Button  Grid.Row="2" Grid.Column="2" Content="BottomRight" />
</Grid>

divides your window this way:

In the above Xaml, Auto means "size to cell content" and * means "size to remaining area".

Answer 2

When you use Grid as main container of the window, don't modify its properties like width or... it keep grid fit to window. then click on each element and try playing with its anchors like chain on the Grid border in the Xaml Designer.

For example i fit your button on right top corner by set right chain sign and top chain sign of it in close mode and i opened other chains of it.

   <Grid Background="#FFF3F3F3">
        <Label Content="Hello" HorizontalAlignment="Left" Margin="20,48,0,0" VerticalAlignment="Top" FontSize="36" FontFamily="Segoe UI Light"/>
        <Image  Source="Infinite_symbol__128.png" Margin="113,0,0,0"/>
        <Button x:Name="exitBtn" Content="Test"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="0,10,0,0"  Width="65" Height="51" BorderBrush="{x:Null}" Click="exitBtn_Click">
            <Button.Background>
                <ImageBrush ImageSource="close33 (2).png"/>
            </Button.Background>
        </Button>
    </Grid>

Other way is using columns and rows for better layout BUT even when you use cols and rows you must set anchor points of your element inside the cell. This is the safe way to keep your elements in your ideal positions.