Windows 10 UWP 中的视觉状态管理器未在页面加载时应用初始状态答案

【问题标题】：Visual State Manager in Windows 10 UWP not applying initial state on page loadWindows 10 UWP 中的视觉状态管理器未在页面加载时应用初始状态
【发布时间】：2015-10-12 01:10:19
【问题描述】：

我有一个带有相关面板的页面，可以根据宽度重新组织。但是，除非宽度> 720px，否则它似乎不会在加载时应用任何状态。如果我在加载后调整页面大小，两种状态都可以工作。

一种解决方法是检查加载页面上的窗口大小并手动选择状态，但我相信这应该自动处理？我还有其他可用的页面，我不确定我在做什么不同。这是我的代码的简化版本，我将它设置为红色/蓝色背景，以便我可以判断是否/正在应用哪个状态

<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 方向，只是在加载时没有设置状态。

但是，如果我从可视状态管理器中删除 ZonesWrapGrid 更改，则窄/宽状态确实会在加载时正确应用，但我当然会丢失我想要的方向更改。

【问题讨论】：

ZonesWrapGrid 元素似乎在您的 XAML 中丢失，因此 NarrowState 无法应用。您可以尝试删除引用ZonesWrapGrid.Orientation 的设置器并再次运行该应用程序以查看它是否有效？
@igrali 这似乎是相关的，我已经更新了代码以包含网格，但它仍然不会设置加载状态，即使它确实可以调整大小。删除它可以解决这个问题，但我失去了我想要的方向变化

标签： c# xaml win-universal-app uwp

【解决方案1】：

您可以尝试只替换整个 ItemsPanelTemplate 吗？在资源中创建两者：

<ItemsPanelTemplate x:Key="VerticalWrapGrid">
    <ItemsWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="HorizontalWrapGrid">
    <ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>

然后在需要时交换：

<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>

【讨论】：