Problem With the Grid in UWP when resizing

Question

I'm building a program for PC. I want that object will stay in its place even if the user resizes the window.

for example, I created a Grid and when the window is small (1200,800), I can't see the Button at the bottom. But when the app is full-screen, I can see the Button.

    <Grid x:Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="250"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15*"/>
            <ColumnDefinition Width="45*"/>
            <ColumnDefinition Width="15*"/>
        </Grid.ColumnDefinitions>
        <local:customTextBox Grid.Column="1" Grid.Row="1" Text="Username"/>
        <local:customTextBox Grid.Column="1" Grid.Row="2" Text="Password"/>
        <local:customTextBox Grid.Column="1" Grid.Row="3" Text="Email"/>
        <local:customTextBox Grid.Column="1" Grid.Row="4" Text="Server" VerticalAlignment="Center"/>
        <StackPanel Grid.Row="0" Grid.Column="1" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Grid.Row="0" Grid.Column="1" Width="174" Height="176" Source="Assets/testlogo.png" Stretch="Uniform" HorizontalAlignment="Center"/>
            <TextBlock Grid.Column="1" Grid.Row="0" FontSize="25" FontFamily="Yu Gothic UI Semibold"  Text="Fill your details to create Server" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" />
        </StackPanel>
        <Button x:Name="MyButton" Grid.Row="5" Grid.Column="1" Height="85" Width="200" Style="{StaticResource primaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Create or Login"  FontSize="25" FontFamily="Yu Gothic UI Semibold">

        </Button>

    </Grid>

Does someone know how to set things in place? I tried setting the Height with * (for example - 70*), but it still did it. I tried also to change the size in Page Height and width properties. it causes to black screen around the Grid - if I resize the window.

If someone knows what to do - please tell me!!

Answer 1

Based on your description, it seems that you want to keep the same layout when user resize the app window.

The simplest way to do this is using ViewBox. Put your content inside the ViewBox Control and it will automatically stretch and scale the content when user resize the app window.

So your code should be like this:

<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Viewbox>
        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="250"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*"/>
                <ColumnDefinition Width="45*"/>
                <ColumnDefinition Width="15*"/>
            </Grid.ColumnDefinitions>
            <local:customTextBox Grid.Column="1" Grid.Row="1" Text="Username"/>
            <local:customTextBox Grid.Column="1" Grid.Row="2" Text="Password"/>
            <local:customTextBox Grid.Column="1" Grid.Row="3" Text="Email"/>
            <local:customTextBox Grid.Column="1" Grid.Row="4" Text="Server" VerticalAlignment="Center"/>
            <StackPanel Grid.Row="0" Grid.Column="1" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Image Grid.Row="0" Grid.Column="1" Width="174" Height="176" Source="Assets/testlogo.png" Stretch="Uniform" HorizontalAlignment="Center"/>
                <TextBlock Grid.Column="1" Grid.Row="0" FontSize="25" FontFamily="Yu Gothic UI Semibold"  Text="Fill your details to create Server" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" />
            </StackPanel>
            <Button x:Name="MyButton" Grid.Row="5" Grid.Column="1" Height="85" Width="200" Style="{StaticResource primaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Create or Login"  FontSize="25" FontFamily="Yu Gothic UI Semibold">
            </Button>
        </Grid>
    </Viewbox>
</Grid>