在Windows 10 UWP视觉状态管理器在页面加载不适用初始状态 [英] Visual State Manager in Windows 10 UWP not applying initial state on page load
问题描述
我有一个相对的面板页为基础重新组织的宽度。然而,这似乎并没有在加载应用任何状态,除非宽度> 720像素。如果我调整它的加载这两个州工作后的页面。
I have a page with a relative panel to re-organize based on width. However, it doesn't seem to apply any state at load unless the width is > 720px. If I resize the page after it's loaded both states work.
一个解决方法是检查加载页面上的窗口大小和手动选择的状态,但我相信这应该自动处理?我有工作的其他网页,我不知道我在做什么不同。这里是我的代码的简化版本,我有它设置红色/蓝色的背景,所以如果/被应用
A workaround would be to check the window size on page loaded and manually choose the state, but I believe this should be handled automatically? I have other pages that work, I'm not sure what I'm doing different. Here is a simplified version of my code, I have it set red/blue backgrounds so I can tell if/which state is being applied
$ B $其状态,我可以告诉b
<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>
- 更新
我已经更新了代码,显示丢失的ZonesWrapGrid,它似乎是相关的。视觉州进行这项工作时,我调整它会将ZonesWrapGrid的方向,只要没有状态的负载设置页面。
I've updated the code to show the missing ZonesWrapGrid, it does seem to be related. The visual states do work on it when I resize the page it will switch the ZonesWrapGrid orientation, just no state set on load.
不过,如果我请从ZonesWrapGrid变化可视状态管理器的窄/宽州正确应用负载,但当然,我失去了方向的改变我想要的。
However, if I remove the ZonesWrapGrid change from the visual state manager the narrow/wide states do correctly apply on load, but of course I lose the orientation change I want.
推荐答案
你能尽量只更换整个ItemsPanelTemplate?创建两个资源:
Can you try just replacing the whole ItemsPanelTemplate? Create both in resources:
<ItemsPanelTemplate x:Key="VerticalWrapGrid">
<ItemsWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="HorizontalWrapGrid">
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
然后交换:
And then swap when needed:
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesPanel.ItemsPanel" Value="{StaticResource HorizontalWrapGrid}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesPanel.ItemsPanel" Value="{StaticResource VerticalWrapGrid}" />
</VisualState.Setters>
</VisualState>
这篇关于在Windows 10 UWP视觉状态管理器在页面加载不适用初始状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!