When resizing window elements move

Question

I am working on a wpf bingo app for learning.

When the app is in full screen it looks how i want it:

However, when the window is minimized the elements move out of the positions I want them:

what can I do to stop this and keep the elements in one place no matter what window size.

Below is my complete XAML code:

<Window x:Class="Bingo_Game.MainGame"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Bingo_Game"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainGame" WindowStartupLocation="CenterScreen" WindowState="Maximized" Height="704.2">
    <Window.Background>
        <ImageBrush ImageSource="Images/background.jpg"/>
    </Window.Background>
    <Grid>
        <DataGrid Name="grid" ItemsSource="{Binding}" Height="300"
          AutoGenerateColumns="False" HeadersVisibility="None" Background="Transparent" BorderThickness="0" CanUserAddRows="false"
          VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Top" RowHeight="40" Margin="10,0" HorizontalContentAlignment="Center">
            <DataGrid.Resources>
                <local:ItemExistInRangeConverter x:Key="ItemExistInRangeConverter"/>
                <Style x:Key="BackgroundColourStyle" TargetType="{x:Type TextBlock}">
                    <Style.Triggers>
                        <DataTrigger Value="True">
                            <DataTrigger.Binding>
                                <MultiBinding Converter="{StaticResource ItemExistInRangeConverter}">
                                    <Binding Path="Text" RelativeSource="{RelativeSource Self}"/>
                                    <Binding Path="DataContext.RangeNumbers" 
                                RelativeSource="{RelativeSource FindAncestor,
                                                  AncestorType=DataGrid}"/>
                                </MultiBinding>
                            </DataTrigger.Binding>
                            <Setter Property="Background" Value="LightGreen" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=Number}" 
            ElementStyle="{StaticResource BackgroundColourStyle}" MinWidth="65">
                </DataGridTextColumn>

            </DataGrid.Columns>

            <DataGrid.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </DataGrid.ItemsPanel>
        </DataGrid>
        <Button Content="Roll Number" Margin="333,139,323,484" Width="104" Click="newNumber" Height="50" RenderTransformOrigin="-1.01,-1.46" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <Button.Effect>
                <DropShadowEffect/>
            </Button.Effect>
        </Button>
        <TextBlock HorizontalAlignment="Center" Margin="240,187,217,340" TextWrapping="Wrap" Name="number" VerticalAlignment="Center" Height="146" Width="303" FontSize="120" FontWeight="Bold" TextAlignment="Center" Foreground="Black" Grid.IsSharedSizeScope="True"/>
        <DataGrid HorizontalAlignment="Left" Margin="0,544,0,0" VerticalAlignment="Top" RenderTransformOrigin="-2.917,-2.923" Height="119" Width="330" Name="calledGrid" ItemsSource="{Binding}" />
        <TextBlock HorizontalAlignment="Center" Height="33" Margin="240,333,226,307" TextWrapping="Wrap"  VerticalAlignment="Center" Width="294" Name="noneLeft" FontSize="16" FontWeight="Bold" TextAlignment="Center" />
        <TextBlock HorizontalAlignment="Center" Height="33" Margin="240,300,226,340" TextWrapping="Wrap"  VerticalAlignment="Center" Width="294" Name="callTB" TextAlignment="Center" FontSize="20" />

    </Grid>
</Window>

Answer 1

In addition to the MSDN link DROP table users listed, have a read of this overview of the WPF Panel elements to get a feel for how to approach UI layout in WPF. ALhtough you can drag and drop (and resize) your controls within Visual Studio, it often leads to layouts that don't scale well, and introduces additional compilacations (the extra Margin properties on many of your controls).

If you aren't going to stop your users from resizing your control, it's worth thinking about how you'd like the elements behave when the window is manipulated, should elements scale, move around, stay fixed to a particular window edge, etc.

There are many different ways to layout your UI with the various panels, but your desired behaviour dictates which is the easiest/most appropriate.

Here's a small (but not very neat) mock up using a Grid , to roughly approximate your first case (some of your elements replaced by a few simple labels).

<Grid Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Content="Your DataGrid" Grid.Column="1" Grid.Row="0" Background="Red" Grid.ColumnSpan="3"/>
    <Label Content="Your Other DataGrid" Grid.Column="0" Grid.Row="1" Background="Green" Grid.ColumnSpan="2"/>
    <Label Content="Your Button" Grid.Column="2" Grid.Row="2" Background="Gray" Height="40" Width="100"/>
    <Label Content="41" Grid.Column="2" Grid.Row="1" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/>
</Grid>

It will produce something that looks like this:

Play around resizing it, some elements will stretch, some (with fixed height/width), will remain the same size, and move around relative to the window size.

If you wish to dock elements to the side of your window, have a look at the DockPanel , if you need to collect a few controls together, check out the StackPanel .

Answer 2

Check this out. It points out that to prevent this you can set up a grid and put the elements in defined size columns and rows to keep them from re-sizing with the window.

Also, a good article that you may look at here about Windows Presentation Foundation (WPF) layout system.