VisualState.StateTriggers不工作

我有兩列Grid一個SplitView內部和StateTriggers是假設把第二列到第一列的底部，並且當窗口的寬度收縮也改變SplitView的DisplayMode。但我不明白爲什麼它總是兩列，DisplayMode也沒有改變。下面列出了xmal文件。VisualState.StateTriggers不工作

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

來源

2016-12-05 Bing Lu

在本地計算機上，默認情況下，UWP應用程序的最小窗口寬度爲500，因此400對於「WideLayout」可能不是很好的值，這可能是VisualState.StateTriggers不起作用的原因。你可以嘗試將'MinWindowWidth'設置爲'600'，就像@Michal Kania說的那樣，然後你的代碼應該可以工作。 –

在我看來，它的作品。爲了您的「WideLayout」只是改變

<AdaptiveTrigger MinWindowWidth="400" />

到

<AdaptiveTrigger MinWindowWidth="600" />

也許你在「本地計算機」檢查它。然後它喜歡發生;）

來源

2016-12-05 08:42:08

謝謝！我正在使用「本地機器」。改爲'MinWindowWidth =「600」'修復了它。 –

我遇到了類似的問題，事實證明，規則的順序很重要，就像框架從上到下匹配規則並使用匹配的第一條規則。所以在你的情況下，最小寬度總是大於0 som，這是我們總是匹配的第一條規則。建議您嘗試更改規則的順序，在MinWindowWidth =「0」的規則之前放置規則MinWindowWidth =「400」

來源

2016-12-05 09:23:59

VisualState.StateTriggers不工作

回答

相關問題