XAML- VisualStateManager不起作用

Question

我正在使用通用Windows應用程序。我需要根據屏幕調整佈局。爲了做到這一點，我使用了一個Visual State Manager。但是，當我測試應用程序時，佈局不會改變。我不是XAML的專家，但我沒有看到我的代碼有任何問題。

<Grid Background="#6A0888" 
     HorizontalAlignment="Stretch" 
     SizeChanged="Grid_SizeChanged"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="46"></RowDefinition> 
     <RowDefinition Height="*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <WebView 
    Grid.Row="1" 
    x:Name="lan_Browser" 
    NavigationCompleted="lan_Browser_NavigationCompleted_Desktop" 
    LoadCompleted="lan_Browser_LoadCompleted" 
    ContentLoading="lan_Browser_ContentLoading" 
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    Height="Auto" 
    Width="Auto"/> 
    <StackPanel Orientation="Horizontal" 
       Grid.Row="0" 
       VerticalAlignment="Top" 
       HorizontalAlignment="Right"> 
     <ProgressRing 
     x:Name="lan_ProgressRing" 
     Foreground="White" 
     IsActive="True" 
     Width="40" 
     Height="40" 
     VerticalAlignment="Center" 
       /> 
     <Button x:Name="lan_Backward" 
       Click="lan_Backward_Click" 
       Background="#6A0888" 
       FontSize="24" 
       Margin="05,05,05,05" 
       HorizontalContentAlignment="Stretch" 
       Width="Auto"> 
      <TextBlock FontFamily="Segoe MDL2 Assets" 
         Text="&#xE112;" 
         Width="Auto" 
         Height="Auto" 
         Foreground="White"/> 
     </Button> 

     <Button x:Name="lan_Forward" 
       Click="lan_Forward_Click" 
       Background="#6A0888" 
       FontSize="24" 
       Margin="05,05,05,05" 
       HorizontalContentAlignment="Stretch" 
       Width="Auto"> 
      <TextBlock FontFamily="Segoe MDL2 Assets" 
         Text="&#xE111;" 
         Width="Auto" 
         Height="Auto" 
         Foreground="White"/> 
     </Button> 
     <Button x:Name="lan_Refresh" 
       Click="lan_Refresh_Click" 
       Background="#6A0888" 
       FontSize="24" 
       Margin="05,05,05,05" 
       HorizontalContentAlignment="Stretch" 
       Width="Auto"> 
      <TextBlock FontFamily="Segoe MDL2 Assets" 
         Text="&#xE72C;" 
         Width="Auto" 
         Height="Auto" 
         Foreground="White"/> 
     </Button> 
     <Button x:Name="lan_Home" 
       Click="lan_Home_Click" 
       Background="#6A0888" 
       FontSize="24" 
       Margin="05,05,05,05" 
       HorizontalContentAlignment="Stretch" 
       Width="Auto"> 
      <TextBlock FontFamily="Segoe MDL2 Assets" 
         Text="&#xE80F;" 
         Width="Auto" 
         Height="Auto" 
         Foreground="White"/> 
     </Button> 
    </StackPanel> 
    <Grid Grid.Row="1" Name="Languages_Home"> 

     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="Narrow"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="Spanish_Button.Foreground" Value="White"></Setter> 
         <Setter Target="English_Button.Grid.Row" Value="0"></Setter> 
         <Setter Target="English_Button.Grid.ColumnSpan" Value="3"></Setter> 
         <Setter Target="Translator_Button.Grid.Row" Value="1"></Setter> 
         <Setter Target="Translator_Button.Grid.ColumnSpan" Value="3"></Setter> 
         <Setter Target="Spanish_Button.Grid.Row" Value="2"></Setter> 
         <Setter Target="Spanish_Button.Grid.ColumnSpan" Value="3"></Setter> 
        </VisualState.Setters> 

       </VisualState> 
       <VisualState x:Name="Wide"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="English_Button.Grid.Column" Value="0"></Setter> 
         <Setter Target="English_Button.Grid.RowSpan" Value="3"></Setter> 
         <Setter Target="Translator_Button.Grid.Column" Value="1"></Setter> 
         <Setter Target="Translator_Button.Grid.RowSpan" Value="3"></Setter> 
         <Setter Target="Spanish_Button.Grid.Column" Value="2"></Setter> 
         <Setter Target="Spanish_Button.Grid.RowSpan" Value="3"></Setter> 
        </VisualState.Setters> 

       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <Button x:Name="English_Button" 
       HorizontalAlignment="Stretch" 
       Grid.Column="0" 
       VerticalAlignment="Stretch" 
       HorizontalContentAlignment="Center" 
       Background="Red" 
       VerticalContentAlignment="Center" 
       FontSize="60" 
       Click="English_Button_Click" 
       Grid.RowSpan="3"> 
      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <Image Source="Assets/britain-flag.jpg" Height="300" Width="300"></Image> 
       <TextBlock FontFamily="60" HorizontalAlignment="Center">English</TextBlock> 
      </StackPanel> 
     </Button> 
     <Button x:Name="Translator_Button" 
       HorizontalAlignment="Stretch" 
       Grid.Column="1" 
       VerticalAlignment="Stretch" 
       HorizontalContentAlignment="Center" 
       Background="Green" 
       VerticalContentAlignment="Center" 
       FontSize="60" 
       Click="Translator_Button_Click" 
       Grid.RowSpan="3"> 
      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <Image Source="Assets/translator.png" Height="300" Width="300"></Image> 
      <TextBlock FontSize="60" HorizontalAlignment="Center">Translator</TextBlock> 
      <TextBlock FontFamily="60" HorizontalAlignment="Center">Traductor</TextBlock> 
      </StackPanel> 
     </Button> 
     <Button x:Name="Spanish_Button" 
       HorizontalAlignment="Stretch" 
       Grid.Column="2" 
       VerticalAlignment="Stretch" 
       HorizontalContentAlignment="Center" 
       Background="#FFBF00" 
       VerticalContentAlignment="Center" 
       FontSize="60" 
       Click="Spanish_Button_Click" 
       Grid.RowSpan="3"> 
      <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <Image Source="Assets/spain-flag.jpg" Height="300" Width="300"></Image> 
       <TextBlock FontFamily="60" HorizontalAlignment="Center">Español</TextBlock> 
      </StackPanel> 
     </Button> 


    </Grid> 

</Grid> 

感謝您的幫助。順便說一句，我是新來的，所以如果我違反了任何規則，我很抱歉。

Answer 1

這些狀態未被正確創作。例如，這個二傳手：

<Setter Target="Spanish_Button.Foreground" Value="White"></Setter> 

相反，應該是這樣的：

<VisualState x:Name="Narrow"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0"/> 
       </VisualState.StateTriggers> 

       <Storyboard> 
        <ColorAnimation Duration="0" To="#FFCE0000" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Spanish_Button" d:IsOptimized="True"/> 
       </Storyboard> 

      </VisualState> 

我Matthais同意。 Blend for Visual Studio可能是一個有用的工具，它提供了一種簡單的所見即所得的方式來編寫這些狀態。