Fürs responsive Web nimmt man Bootstrap. Windows 10 UWP (Universal Windows Platform) Apps nehmen für adaptive UI das Relative Panel Steuerelement.
Das typische Bootstrap Formular zeigt die Beschriftung mal links neben dem Text, mal oberhalb. Je nach verfügbaren Platz.
Zunächst der XAML Code wie mit Grid oder Canvas üblich.
1: <RelativePanel Height="221" Margin="71,89,0,0"
2: VerticalAlignment="Top"
3: HorizontalAlignment="Stretch" >
4: <TextBlock Name="label1" Text="lange Beschriftung" ></TextBlock>
5: <TextBox x:Name="textBox" Width="300" />
6: </RelativePanel>
So würden Textblock und Textbox übereinander liegen. Das besondere am RelativePanel ist das man die relative Position von UI Element zueinander per Attached Propertys festlegt. Man kann sie rechts oder links am Panel ausrichten oder die Elemente zueinander über oder nebeneinander.
Für unsere Zwecke brauchen wir allerdings einen Adaptive Trigger, der auf Größen Änderung des UI reagiert. Der Trigger löst ein Storyboard oder in der verkürzten XAML Syntax einfach einen Setter aus. Ab 0 Pixel wird im Status mobile die Eingabe unterhalb des Labels (below) definiert. Wird das UI breiter als 600 steht das Input Feld rechts daneben.
1: <VisualStateManager.VisualStateGroups>
2: <VisualStateGroup x:Name="VisualStateGroup">
3: <VisualState x:Name="gross">
4: <VisualState.Setters>
5: <Setter Target="textBox.(RelativePanel.RightOf)" Value="label1"/>
6: </VisualState.Setters>
7: <VisualState.StateTriggers>
8: <AdaptiveTrigger MinWindowWidth="600"/>
9: </VisualState.StateTriggers>
10: </VisualState>
11: <VisualState x:Name="mobile">
12: <VisualState.Setters>
13: <Setter Target="textBox.(RelativePanel.Below)" Value="label1"/>
14: </VisualState.Setters>
15: <VisualState.StateTriggers>
16: <AdaptiveTrigger MinWindowWidth="0"/>
17: </VisualState.StateTriggers>
18: </VisualState>
19: </VisualStateGroup>
20: </VisualStateManager.VisualStateGroups>