自适应UI UWP

Question

I am trying to learn about adaptive UI. I use bootstrap alot, but am in the process of designing a Windows 10 app with xaml . I am wanting the textboxes and textbloxks to adjust based on if the user shrinks the window or not. This is what I have, but it is not adapting nor is it responsive.

<Grid Grid.Row="1">
        <TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,22,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
        <TextBox x:Name="txtBoxTitle" Margin="79,24,0,0" Grid.Row="1" Width="800" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,131,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Body" VerticalAlignment="Top"/>
        <TextBox x:Name="txtBoxBody" Margin="79,133,-225,0" Grid.Row="1" Width="800" Height="500" TextWrapping="Wrap" AcceptsReturn="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button x:Name="btnSubmitArticle" Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom"  Margin="80,20,20,20" d:LayoutOverrides="Width"/>
    </Grid>

Additional Question

How can I pull the text in the textbox all the way to the right of the window and have it respond correctly when the screen size changes.

<RelativePanel Margin="12,12">
           <TextBlock x:Name="txtBoxDate"
           RelativePanel.AlignLeftWithPanel="True"
           RelativePanel.AlignRightWithPanel="True"
           FontSize="14" 
           TextAlignment="Right"
           TextWrapping="Wrap" 
           Text="Title" />
</RelativePanel>

Can anyone point me in the right direction to making these elements repsonsive depending on screen size?

Answer 1

Assuming that the whole row stretches, the problem is that you're setting Width of those elements (and some weird Margins, probably because you dragged and dropped the controls from the toolbox). You can use a RelativePanel to nicely stack the items and keep them stretched from left to right inside the panel:

<RelativePanel Margin="12,0">
    <TextBlock x:Name="FirstTextBlock"
               RelativePanel.AlignLeftWithPanel="True"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="24" 
               TextWrapping="Wrap" 
               Text="Title" />
    <TextBox x:Name="txtBoxTitle" 
             RelativePanel.Below="FirstTextBlock"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             Margin="0,8,0,0" 
             TextWrapping="Wrap" />
    <TextBlock x:Name="SecondTextBlock" 
               RelativePanel.Below="txtBoxTitle"
               RelativePanel.AlignLeftWithPanel="True"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="24" 
               Margin="0,8,0,0" 
               TextWrapping="Wrap" 
               Text="Body" />
    <TextBox x:Name="txtBoxBody" 
             RelativePanel.Below="SecondTextBlock"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             Margin="0,8,0,0" 
             Height="500" 
             TextWrapping="Wrap" 
             AcceptsReturn="True" />
    <Button x:Name="btnSubmitArticle" 
            RelativePanel.Below="txtBoxBody"
            Content="Submit" 
            Margin="0,8,0,0" 
            d:LayoutOverrides="Width"/>
</RelativePanel>