CODEWITHSUNDEEP
xamlwindows-10uwpadaptive-ui
Code
Code

Reputation: 2129

Adaptive UI UWP

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?

Upvotes: 0

Views: 691

Answers (1)

Igor Ralic
Igor Ralic

Reputation: 15006

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>

Upvotes: 1

Related Questions