XAML- VisualStateManager 不工作

Question

我正在开发通用 Windows 应用程序。我需要根据屏幕调整布局。为此，我使用了可视化状态管理器。但是，当我测试应用程序时，布局并没有改变。我不是 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:

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

我同意马泰斯的观点。 Blend for Visual Studio 可能是一个有用的工具，它提供了一种简单的所见即所得的方式来创作这些状态。

XAML- VisualStateManager 不工作

XAML- VisualStateManager not working

xaml

uwp

uwp-xaml