未觸發Windows 10視覺狀態管理器寬站

Question

我正在關注將WP Silverlight移植到UWP的案例研究

我注意到，即使將XAML放在MainPage.xaml內，即使滿足條件MinWindowWidth="548"也不會觸發WideState wideSeZo 。 而是顯示了適用於Windows Phone和台式機的narrowSeZo 。

我的MainPage.xaml

<Page
x:Class="Bookstore2Universal_10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Bookstore2Universal_10="using:Bookstore2Universal_10"
mc:Ignorable="d">

<Page.DataContext>
    <Bookstore2Universal_10:BookstoreViewModel/>
</Page.DataContext>

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="BookstoreStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <CollectionViewSource
        x:Name="AuthorHasACollectionOfBookSku"
        Source="{Binding Authors}"
        IsSourceGrouped="true"
        ItemsPath="BookSkus"/>
    </ResourceDictionary>

</Page.Resources>

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Margin="{StaticResource TitlePanelMargin}">
        <TextBlock Text="{Binding AppName}" Style="{StaticResource TitleTextBlockStyle}" Margin="9.6,0"/>
        <TextBlock Text="{Binding PageTitle}" Margin="7.2,0,0,0" Style="{StaticResource HeaderTextBlockStyle}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="9.6,0">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <SemanticZoom x:Name="wideSeZo" Visibility="Collapsed">
            <SemanticZoom.ZoomedInView>
                <GridView
            ItemsSource="{Binding Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource BookTemplateWide}"
            ItemsPanel="{StaticResource ZoomedInItemsPanelTemplate}">
                    <GridView.GroupStyle>
                        <GroupStyle
                    HeaderTemplate="{StaticResource AuthorGroupHeaderTemplateWide}"
                    HidesIfEmpty="True"/>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView
            ItemsSource="{Binding CollectionGroups, Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource ZoomedOutAuthorTemplateWide}"/>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

        <SemanticZoom x:Name="narrowSeZo">
            <SemanticZoom.ZoomedInView>
                <ListView
            ItemsSource="{Binding Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource BookTemplate}">
                    <ListView.GroupStyle>
                        <GroupStyle
                    HeaderContainerStyle="{StaticResource AuthorGroupHeaderContainerStyle}"
                    HeaderTemplate="{StaticResource AuthorGroupHeaderTemplate}"
                    HidesIfEmpty="True"/>
                    </ListView.GroupStyle>
                </ListView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <ListView
            ItemsSource="{Binding CollectionGroups, Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource ZoomedOutAuthorTemplate}"
            ItemContainerStyle="{StaticResource ZoomedOutAuthorItemContainerStyle}"/>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

    </Grid>
</Grid>

但是，如果我將代碼放在名為SeZoUC.xaml的用戶控件中， WideState正確觸發WideState

MainPage.xaml和SeZoUC.xaml用戶控件。

<Page
x:Class="Bookstore2Universal_10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Bookstore2Universal_10="using:Bookstore2Universal_10"
mc:Ignorable="d">

<Page.DataContext>
    <Bookstore2Universal_10:BookstoreViewModel/>
</Page.DataContext>

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="BookstoreStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Margin="{StaticResource TitlePanelMargin}">
        <TextBlock Text="{Binding AppName}" Style="{StaticResource TitleTextBlockStyle}" Margin="9.6,0"/>
        <TextBlock Text="{Binding PageTitle}" Margin="7.2,0,0,0" Style="{StaticResource HeaderTextBlockStyle}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="9.6,0">
        <Bookstore2Universal_10:SeZoUC/>
    </Grid>

</Grid>

SeZoUC.xaml代碼

<UserControl
x:Class="Bookstore2Universal_10.SeZoUC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bookstore2Universal_10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="BookstoreStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <CollectionViewSource
        x:Name="AuthorHasACollectionOfBookSku"
        Source="{Binding Authors}"
        IsSourceGrouped="true"
        ItemsPath="BookSkus"/>

    </ResourceDictionary>
</UserControl.Resources>

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                    <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <SemanticZoom x:Name="wideSeZo" Visibility="Collapsed">
        <SemanticZoom.ZoomedInView>
            <GridView
            ItemsSource="{Binding Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource BookTemplateWide}"
            ItemsPanel="{StaticResource ZoomedInItemsPanelTemplate}">
                <GridView.GroupStyle>
                    <GroupStyle
                    HeaderTemplate="{StaticResource AuthorGroupHeaderTemplateWide}"
                    HidesIfEmpty="True"/>
                </GridView.GroupStyle>
            </GridView>
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <GridView
            ItemsSource="{Binding CollectionGroups, Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource ZoomedOutAuthorTemplateWide}"/>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

    <SemanticZoom x:Name="narrowSeZo">
        <SemanticZoom.ZoomedInView>
            <ListView
            ItemsSource="{Binding Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource BookTemplate}">
                <ListView.GroupStyle>
                    <GroupStyle
                    HeaderContainerStyle="{StaticResource AuthorGroupHeaderContainerStyle}"
                    HeaderTemplate="{StaticResource AuthorGroupHeaderTemplate}"
                    HidesIfEmpty="True"/>
                </ListView.GroupStyle>
            </ListView>
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <ListView
            ItemsSource="{Binding CollectionGroups, Source={StaticResource AuthorHasACollectionOfBookSku}}"
            ItemTemplate="{StaticResource ZoomedOutAuthorTemplate}"
            ItemContainerStyle="{StaticResource ZoomedOutAuthorItemContainerStyle}"/>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

</Grid>

我的BookstoreStyles.xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Windows_UI_Xaml_Controls_Primitives="using:Windows.UI.Xaml.Controls.Primitives"
xmlns:Bookstore2Universal_10="using:Bookstore2Universal_10">

<Thickness x:Key="TitlePanelMargin">0</Thickness>

<Style x:Key="AuthorGroupHeaderContainerStyle" TargetType="ListViewHeaderItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

<Style x:Key="ZoomedOutAuthorItemContainerStyle" TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

<DataTemplate x:Key="AuthorGroupHeaderTemplateWide">
    <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="{Binding Name}"/>
</DataTemplate>

<DataTemplate x:Key="AuthorGroupHeaderTemplate">
    <Border Margin="0,0,0,9.6" Background="{StaticResource SystemControlBackgroundAccentBrush}">
        <TextBlock Text="{Binding Name}" Margin="9.6,0,0,4.8" Style="{StaticResource SubtitleTextBlockStyle}" Foreground="White" VerticalAlignment="Bottom" FontWeight="SemiBold"/>
    </Border>
</DataTemplate>

<ItemsPanelTemplate x:Key="ZoomedInItemsPanelTemplate">
    <ItemsWrapGrid Orientation="Horizontal" GroupPadding="0,0,0,20"/>
</ItemsPanelTemplate>

<Windows_UI_Xaml_Controls_Primitives:JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter" />
<Windows_UI_Xaml_Controls_Primitives:JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter" />

<DataTemplate x:Key="ZoomedOutAuthorTemplateWide">
    <Grid HorizontalAlignment="Left" Width="250" Height="250" >
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource SubtitleTextBlockStyle}" Height="80" Margin="15,0" Text="{Binding Group.Name}"/>
        </StackPanel>
    </Grid>
</DataTemplate>

<DataTemplate x:Key="ZoomedOutAuthorTemplate">
    <Border Margin="9.6,0.8" Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}">
        <TextBlock Margin="9.6,0,9.6,4.8" Text="{Binding Group.Name}" Style="{StaticResource SubtitleTextBlockStyle}" Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}" VerticalAlignment="Bottom" FontWeight="SemiBold"/>
    </Border>
</DataTemplate>

<DataTemplate x:Key="BookTemplateWide">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
        <Image Source="{Binding CoverImage}" Stretch="UniformToFill"/>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Margin="12,0,24,0" Text="{Binding Title}"/>
            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="{Binding Author.Name}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Margin="12,0,12,12"/>
        </StackPanel>
    </Grid>
</DataTemplate>

<DataTemplate x:Key="BookTemplate">
    <Grid Margin="0,0,0,8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Width="56" Height="56">
            <Image Source="{Binding CoverImage}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel Grid.Column="1">
            <TextBlock Text="{Binding Title}" Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="NoWrap" Margin="9.6,0"/>
            <TextBlock Text="{Binding Author.Name}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="9.6,0"/>
        </StackPanel>
    </Grid>
</DataTemplate>

我想念什么？

Answer 1

從MSDN ：

使用StateTriggers時，請確保在根的第一個子項下聲明了VisualStateGroup，以使觸發器自動生效。

您需要移動VisualStateManager.VisualStateGroups，以使其直接在根元素的第一個子元素下才能在MainPage.xaml中工作。 MainPage.xaml中的根元素是<Page> ，因此第一個子元素（不計算附加屬性）是<Grid x:Name="LayoutRoot"> ，這是VisualStateManager.VisualStateGroups需要的位置：

<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                    <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <!-- ... -->