Windows 10 xaml Controls Centre Screen

Question

I'm working on an app for windows 10. I've previously worked on a handful of Windows 7 applications and I'm trying to get use to the many differences now. I'm trying my luck at a universal app, and I'm wanting to centre a handful of controls so that no matter the screen/windows size the login details are centred.

I've been searching for help with this for a while, but I've found a lot of this to be in its' infancy; in other words there's not a lot of places I'm finding relevant information, never mind helpful. I was hoping someone on here could point me in the right direction?

Here's the window on the desktop view:

Here's what I'm meaning, the textboxes, labels ect don't move with the resize of the window, let alone different screen sizes.

    </Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
    <CheckBox x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" Margin="1038,441,0,0" VerticalAlignment="Top" ClickMode="Press"/>
    <TextBox x:Name="txtUserName" HorizontalAlignment="Left" Margin="818,441,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="202"/>
    <PasswordBox x:Name="txtPassword" HorizontalAlignment="Left" Margin="818,478,0,0" VerticalAlignment="Top" Width="202"/>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="723,446,0,0" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Top"/>
    <TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="735,478,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top"/>
    <Button x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" Margin="959,539,0,0" VerticalAlignment="Top" Width="61"/>
    <Button x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Left" Margin="818,539,0,0" VerticalAlignment="Top" Width="116"/>
    <ProgressRing x:Name="progressring1" HorizontalAlignment="Left" Margin="873,592,0,0" VerticalAlignment="Top" Height="87" Width="103"/>
    <TextBlock x:Name="txtStatus" HorizontalAlignment="Left" Margin="818,510,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
    <Grid HorizontalAlignment="Left" Height="180" Margin="692,412,0,0" VerticalAlignment="Top" Width="496"/>
</Grid>

Answer 1

Don't use Margins for positioning. Use margins only to enforce margins around the object.

To center an element in its parent set its HorizontalAlignment or VerticalAlignment to Center.

For more control, use layout controls such as Grid, StackPanel, and RelativePanel to position the controls where you want. For your layout you could set up 3 Rows and 3 Columns in your Grid to place the controls overall and then set the HorizontalAlignment to place the controls in the grid. Here's a quick update to your Xaml that will keep things centered so long as the window is wide enough for everything to fit (you can use adaptive techniques to reflow things for narrower views)

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="240"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <CheckBox Grid.Column="2" Grid.Row="1" Margin="10,0" x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" VerticalAlignment="Top" ClickMode="Press"/>
    <TextBox Grid.Column="1" Grid.Row="1" x:Name="txtUserName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
    <PasswordBox Grid.Column="1" Grid.Row="2" x:Name="txtPassword" HorizontalAlignment="Stretch"  VerticalAlignment="Top" />
    <TextBlock x:Name="textBlock" Margin="10,0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Center"/>
    <TextBlock x:Name="textBlock_Copy" Margin="10,0" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"  TextWrapping="Wrap" Text="Password:" VerticalAlignment="Center"/>
    <Button Grid.Column="1" Grid.Row="3" x:Name="btnSignin" Content="Login" HorizontalAlignment="Left"  VerticalAlignment="Top"/>
    <Button Grid.Column="1" Grid.Row="3" x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Right" VerticalAlignment="Top" />
    <ProgressRing x:Name="progressring1" HorizontalAlignment="Left"  VerticalAlignment="Top" Height="87" Width="103"/>
    <TextBlock x:Name="txtStatus" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
    <Grid HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="496"/>
</Grid>

See Quickstart: Defining layouts and Adding layout controls on MSDN.

Answer 2

The above is a the right approach. Using a Grid Layout with auto as the row height or column width is a good approach because they automatically will scale with you. Depending on the difficulty of your project you can also use Adaptive Triggers. Here is a really intro example to using Adaptive Triggers, http://jamesqquick.com/windows-10-adaptive-triggers-intro/ . This way you can, for instance, make text bigger depending on the screen size.

You're doing good by testing all of the different sizes. This is important! I usually just run as a Windows 10 app and resize it in all directions!