So, I just started working with Windows applications, and there are a few things that I cannot get as I want (perhaps because I did not find a single sample, and Channel9 video did not cover my case).
Starting in this article , I decided that the “reposition” method is suitable for my application when moving from a large screen to a smaller one.
I used a StackPanel and changed orientation using two AdaptiveTrigger (one for width 0 and another for 720, based on the table here ).
This view works, but there are some problems that I will illustrate with some ugly editable snapshots.
This is what happens when I am in a BigScreen situation where there is enough space to have both A and B on the same line. The problem here is that B has to take the entire remaining width, covering the entire blue part.
The second problem is related to resizing. When there is not enough space, the green part is cropped and not changed (you can see that the right border has disappeared). This did not happen before using the StackPanel to make the layout responsive.
Finally, when we are in a SmallScreen situation, the orientation changes to vertical, and we have the same problem as the first: the height of the green part does not fill the screen.
Here XAML used for the page:
<Page x:Class="Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:WifiAnalyzerFinal.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mvvm="using:Mvvm" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="SmallScreen"> <VisualState> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0"/> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="StackPanel.Orientation" Value="Vertical"/> </VisualState.Setters> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="BigScreen"> <VisualState> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720"/> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="StackPanel.Orientation" Value="Horizontal"/> <Setter Target="Rect.Width" Value="200"/> <Setter Target="Rect.Height" Value="Auto"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel Orientation="Vertical" Background="Blue" x:Name="StackPanel"> <Rectangle Fill="Red" Height="50" x:Name="Rect" Width="Auto"/> <ListView ItemsSource="{Binding Stuff}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green" Width="Auto" BorderBrush="DarkGreen" BorderThickness="5" Padding="5"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Margin" Value="0,0,0,5"/> </Style> </ListView.ItemContainerStyle> </ListView> </StackPanel> </Grid> </Page>
Note that without the StackPanel green part fits the page as it should, covering the entire available area. Unfortunately, I could not find a better solution, because there is no sample telling us how this method should be implemented. I also tried using the new RelativePanel , but it seems that the AdaptiveTrigger Setter does not work with related properties like RelativePanel.RightOf .
Is there anyone who has been successful applying this technique without using code?
EDIT:
I got this working using a Grid with two rows and two columns, while AdaptiveTrigger moves all the contents from row to column and vice versa.