WPF application changing size

Question

So, it is my first time working with a wpf application in VS 2012 for windows desktop. I put some background image in to a window. I put three text boxes and a button on to that window. Now I have a problem, when I start the application and I change the size of a window with mouse or go fullscreen, the window changes its size, but textboxes and button stay at the same position as before, and they do not really fit into that design. I hope I was clear enough. Thank you for your help.

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="768" Width="1366
    ">

<Grid RenderTransformOrigin="0.495,0.498" Margin="0,10,0,0">
    <Grid.Background>
        <ImageBrush ImageSource="slike/education_board.jpg"/>
    </Grid.Background>
    <Grid HorizontalAlignment="Left" Height="209" Margin="209,211,0,0"        VerticalAlignment="Top" Width="396">

    <TextBox x:Name="tockeMaturaTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" Margin="10,0,0,176"/>
    <TextBox x:Name="tretjiLetnikTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.899,3.574" Margin="10,63,0,0"/>
    <TextBox x:Name="cetrtiLetnikTextBox" HorizontalAlignment="Left" Height="23" Margin="10,115,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="361,224,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
    <TextBlock x:Name="skupneTockeTextBlock" HorizontalAlignment="Left" Margin="323,133,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"      RenderTransformOrigin="-0.375,0.338" Height="73" Width="113"/>

    </Grid>
</Grid>
</Window>

Answer 1

Give the XAML below a try:

    <Grid Margin="0,10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="211"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <ImageBrush ImageSource="slike/education_board.jpg"/>
        </Grid.Background>
        <StackPanel Grid.Row="1" Grid.Column="1" >

            <TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
            <TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
            <TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
            <Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75" Click="button_Click"/>
            <TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"       Height="73" Width="113"/>

        </StackPanel>
    </Grid>

WPF uses a container-based (relative) layout system. You were placing your textboxes in absolute positions by defining their margins precisely with respect to the parent grid. In the example above, they are placed in a StackPanel which is inside the grid.

With all the extra margins and absolute widths and heights, it's hard to tell what final result you are going for, but the XMAL above should get you close. You can change the relative sizes of the grid rows and columns to get what you need; or completely redefine the structure of the Grid.

I think a good tutorial on WPF is in order to get a handle on the basic conocepts: Silverlight/WPF Introduction. This is geared a little bit towards Silverlight, but the layout principles are identical to WPF. Actual training starts at 8:17 in the video.

EDIT For magical expanding and shrinking content, use the code below:

    <Grid Margin="0,10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <ImageBrush ImageSource="slike/education_board.jpg"/>
        </Grid.Background>
        <Viewbox Grid.Row="1" Grid.Column="1" >
            <StackPanel>
                <TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
                <TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
                <TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
                <Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75" Click="button_Click"/>
                <TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"       Height="73" Width="113"/>
            </StackPanel>
        </Viewbox>
    </Grid>