VisualState.StateTriggers無法正常工作

Question

我在SplitView有一個兩列Grid並且一個StateTriggers假設將第二列放在第一列的底部，並且當Window的寬度縮小時，還要更改SplitView的DisplayMode 。 但是我不知道為什么它總是兩列並且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" />

也許您在“本地計算機”上進行了檢查。 然后它喜歡發生;）

Answer 2

我遇到了類似的問題，事實證明，規則的順序很重要，就像框架從上到下匹配規則並使用第一個匹配的規則一樣。 因此，在您的情況下，最小寬度始終大於0 som是我們始終匹配的第一條規則。 我建議您嘗試更改規則的順序，將帶有MinWindowWidth =“ 400”的規則放在帶有MinWindowWidth =“ 0”的規則之前