C# UWP buttons not align the way I wanted

Question

I have created a button next to my "Start" button. In my xaml page, the button appears at where I want it to be.

However, when I run the app, it appears at a random location.

how do I fix this ?

StackPanel>
        <TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
        <TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" Text="This page is where your exercise starts " FontSize="20"/>
        <TextBlock TextWrapping="Wrap" Margin="0,20,0,0" FontSize="20">
            Follow the instruction and press "Start" to begin the exercise.
        </TextBlock>
        <TextBlock TextWrapping="Wrap" Margin="0,0,0,0" FontSize="15">
            (Ensure the connected BLE device is working before starting the exercise.)
        </TextBlock>
        <TextBlock x:Name="txtClock" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="20"/>
        <Button x:Name="btnStart" Content="Start" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Height="38" Width="106" Click="btnStart_Click_1"/>
        <TextBlock x:Name="txtExercise"  TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <TextBlock x:Name="txtAngle"  TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <TextBlock x:Name="txtDisplay"  TextWrapping="Wrap" Margin="0,10,0,0"/>
        <TextBlock x:Name="txtAgain" Text="" TextWrapping="Wrap" Margin="0,10,0,0" FontSize="15"/>
        <Button x:Name="btnRefresh" Content="Refresh" HorizontalAlignment="Left" VerticalAlignment="Top" Height="38" Width="106" Margin="150,-158,0,0" Click="btnRefresh_Click"/>

Answer 1

Since you are using the Margin-Property of the button it makes sense that it will pop up somewhere else.

To be honest I don't really know why but I had the same problems.

I would advise you to either use a RelativePanel a StackPanel or a Grid.

You can have a read on this microsoft page. To find out more about the difference between the various types.

A grid would look something like this: (Keep in mind a grid is 0 indexed)

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="100"/> //For a Row of 100 units height
    <RowDefinition Height="*"/> //For a Row which fills the rest of the available screen space
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/> //For a column of 100 units width
    <ColumnDefinition Width="*"/> //For a column which fills the rest of the screen
  </Grid.ColumnDefinitions>

  <Button x:Name="Button1" Grid.Row="0" Grid.Column="0" />
  <Button x:Name="Button2" Grid.Row="1" Grid.Column="1" />
</Grid> 

A Stackpanel would look like this: (A thing to keep in mind here is that a Stackpanel will not resize its elements when the screen/window size changes)

<Stackpanel Orientation="horizontal">
  <Button x:Name="Button1"/>
  <Button x:Name="Button2"/>
</Stackpanel>