I have a page with a relative panel to reorganize in width. However, it does not seem to apply to the state on the load unless the width is> 720px. If I resize the page after loading, both states work.
A workaround would be to check the size of the window on the page and manually select the state, but I think it needs to be processed automatically? I have other pages that work, I'm not sure what I am doing different. Here is a simplified version of my code, I set red / blue backgrounds so that I can determine if / what state is applied
<Page.Resources> <converters:HighlightConverter x:Key="HighlightConverter"/> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <gui:MainAppBar x:Name="mainAppBar" Grid.Row="0"/> <ScrollViewer Grid.Row="1"> <RelativePanel> <StackPanel x:Name="ZonesContainer" Margin="12,12,0,0"> <TextBlock Text="Zones"/> <ItemsControl x:Name="ZonesPanel"> <ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Setter Property="Margin" Value="6"/> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <ItemsWrapGrid x:Name="ZonesWrapGrid" Orientation="Vertical"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel x:Name="Panel" Orientation="Horizontal"> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> <StackPanel x:Name="SourcesContainer" RelativePanel.RightOf="ZonesContainer" Margin="12,12,0,0"> <GridView x:Name="SourcesPanel" Header="Sources"> </GridView> </StackPanel> <StackPanel x:Name="NetworkServicesContainer" RelativePanel.Below="SourcesContainer" RelativePanel.AlignLeftWith="SourcesContainer" Margin="12,12,0,0"> <GridView x:Name="NetworkServicesPanel" Header="Network"> </GridView> </StackPanel> </RelativePanel> </ScrollViewer> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="WindowStates"> <VisualState x:Name="WideState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="ZonesContainer.Background" Value="Blue"/> </VisualState.Setters> </VisualState> <VisualState x:Name="NarrowState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="ZonesContainer.Background" Value="Red"/> <Setter Target="SourcesContainer.(RelativePanel.Below)" Value="ZonesContainer" /> <Setter Target="SourcesContainer.(RelativePanel.AlignLeftWith)" Value="ZonesContainer" /> <Setter Target="NetworkServicesContainer.(RelativePanel.Below)" Value="SourcesContainer" /> <Setter Target="ZonesWrapGrid.Orientation" Value="Horizontal" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>
I updated the code to show the missing ZonesWrapGrid, it seems to be related. Visual states work on this, when I resize the page, it will switch the orientation of ZonesWrapGrid, just the state is not set at loading.
However, if I remove the ZonesWrapGrid change from the visual state manager, the narrow / wide states will apply correctly when loading, but, of course, I will lose the orientation change I want.
source share