VisualState.StateTriggers 不工作

Question

我在 SplitView 和 StateTriggers 中有两列 Grid 假设将第二列放在第一列的底部并更改 DisplayMode 的 SplitView 当 Window 的宽度缩小时。但我不明白为什么它总是两列并且 DisplayMode 也没有改变。 xmal 文件已发布在下方。

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

<Grid Background="#4d4d4d">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="NarrowLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MySplitView.DisplayMode" Value="Inline" />

                    <Setter Target="FirstItemsGridView.(Grid.Row)" Value="0" />
                    <Setter Target="FirstItemsGridView.(Grid.Column)" Value="0" />
                    <Setter Target="SecondItemsGridView.(Grid.Row)" Value="1" />
                    <Setter Target="SecondItemsGridView.(Grid.Column)" Value="0" />

                    <Setter Target="FirstItemsGridView.(Grid.ColumnSpan)" Value="2" />
                    <Setter Target="SecondItemsGridView.(Grid.ColumnSpan)" Value="2" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideLayout">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="400" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MySplitView.DisplayMode" Value="CompactOverlay" />

                    <Setter Target="FirstItemsGridView.(Grid.Row)" Value="0" />
                    <Setter Target="FirstItemsGridView.(Grid.Column)" Value="0" />
                    <Setter Target="SecondItemsGridView.(Grid.Row)" Value="0" />
                    <Setter Target="SecondItemsGridView.(Grid.Column)" Value="1" />

                    <Setter Target="FirstItemsGridView.(Grid.ColumnSpan)" Value="1" />
                    <Setter Target="SecondItemsGridView.(Grid.ColumnSpan)" Value="1" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <RelativePanel>
        <Button Name="HamburgerButton" 
                RelativePanel.AlignLeftWithPanel="True"
                FontFamily="Segoe MDL2 Assets" 
                Content="&#xE700;"
                FontSize="24"
                Width="45"
                Height="45"
                HorizontalAlignment="Center"
                Foreground="White"
                Click="HamburgerButton_Click"
                />

        <TextBlock Name="TitleTextBlock" 
                   RelativePanel.RightOf="HamburgerButton"
                   FontSize="18"
                   FontWeight="Bold"
                   Foreground="White"
                   Margin="20,10,0,0" />
    </RelativePanel>

    <SplitView Name="MySplitView" 
               Grid.Row="1" 
               DisplayMode="Inline" 
               OpenPaneLength="150" 
               CompactPaneLength="45">
        <SplitView.Pane>
            <ListBox SelectionMode="Single" 
                     SelectionChanged="ListBox_SelectionChanged"
                     Background="#4d4d4d">
                <ListBoxItem Name="Charts">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <TextBlock 
                            Text="&#xe713;"
                            FontFamily="Segoe UI" 
                            Foreground="White"
                            FontWeight="SemiBold"
                            Margin="0,-7,0,0"
                            FontSize="26" />
                        <TextBlock Text="Settings" 
                                   FontSize="20" 
                                   Foreground="White"
                                   Margin="20,0,0,0" />
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="Settings">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock 
                            Text="&#xe713;"
                            FontFamily="Segoe MDL2 Assets" 
                            Foreground="White"
                            FontWeight="SemiBold"
                            FontSize="20"
                            Margin="0,3,0,0"/>
                        <TextBlock Text="Settings" 
                                   FontSize="20" 
                                   Foreground="White"
                                   Margin="20,0,0,0" />
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

                <GridView Name="FirstItemsGridView"
                          Grid.Column="0"
                          Background="#333333"
                          ItemsSource="{x:Bind FirstItems}"
                          HorizontalAlignment="Stretch"
                          Margin="5">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="data:ExampleLayoutItem">
                            <local:FirstSymbolControl />
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

                <GridView Name="SecondItemsGridView"
                          Grid.Column="1"
                          Background="#333333"
                          ItemsSource="{x:Bind SecondItems}"
                          HorizontalAlignment="Stretch"
                          Margin="5">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="data:ExampleLayoutItem">
                            <local:SecondSymbolControl />
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

            </Grid>
        </SplitView.Content>
    </SplitView>

</Grid>

Answer 1

在我看来它有效。对于您的 "WideLayout"，只需更改

<AdaptiveTrigger MinWindowWidth="400" />

到

<AdaptiveTrigger MinWindowWidth="600" />

也许您在 "Local Machine" 上查看过它。然后它喜欢发生 ;)

Answer 2

我遇到了类似的问题，结果发现，规则的顺序很重要，比如框架从上到下匹配规则，并使用第一个匹配的规则。所以在你的情况下，最小宽度总是大于 0 som 我们总是匹配的第一条规则。我建议您尝试更改规则的顺序，将 MinWindowWidth="400" 的规则放在 MinWindowWidth="0"

的规则之前

VisualState.StateTriggers 不工作

VisualState.StateTriggers not working

c#

xaml

uwp

uwp-xaml