在 UWP 中使用 Visual State Manager 更改 Grid 内的样式

Question

我是 Visual Studio 的新人。如何使用 Visual State Manager 来创建自适应触发器？最近我有这个 XAML 使用 Grid 的代码。所以，我希望每次更改应用程序的大小时，单元格内的文本都应该更改（大小和颜色）。但它没有改变。这是代码。

感谢任何帮助。

<Page
    x:Class="_251707_lab2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_251707_lab2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Name="coffeeMachineGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FocusVisualPrimaryBrush="White">


        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="forTablet">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="coffeeMachineGrid.whichCofeeCell.Fill" Value="Green"/>
                        <Setter Target="myName.(TextBlock.FontSize)" Value="40" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Rectangle  Fill="Beige" Grid.Row="0"/>
        <Rectangle x:Name="whichCofeeCell" Grid.Row="1" Fill="LightSteelBlue" />
        <Rectangle Fill="PaleVioletRed" Grid.Row="2"/>
        <Rectangle Fill="LightGreen" Grid.Row="3"/>

        <Rectangle Fill="Black" Grid.Column="1"/>
        <Rectangle Fill="Purple" Grid.Column="2"/>

        <Rectangle Fill="ForestGreen" Grid.Column="1" Grid.Row="1"/>
        <Rectangle Fill="AliceBlue"  Grid.Column="2" Grid.Row="1"/>

        <Rectangle Fill="HotPink" Grid.Column="1" Grid.Row="2"/>
        <Rectangle Fill="Chocolate"  Grid.Column="2" Grid.Row="2"/>

        <Rectangle Fill="DarkBlue" Grid.Column="1" Grid.Row="3"/>
        <Rectangle Fill="Crimson"  Grid.Column="2" Grid.Row="3"/>

        <TextBox x:Name="theTitle" HorizontalAlignment="Center" Margin="0,27,0,0" Text="Wonderful Coffee machine. " TextWrapping="Wrap" VerticalAlignment="Top" IsReadOnly="True"/>
        <TextBlock x:Name="myName" Grid.Column="2" HorizontalAlignment="Center" Text="zen huzaini 251707" TextWrapping="Wrap" VerticalAlignment="Center" Width="98" RenderTransformOrigin="-0.396,0.361"/>
        <TextBox x:Name="whihCoffee" HorizontalAlignment="Center" Margin="0,21,0,0" Text="Which Coffee" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" FocusVisualPrimaryBrush="#FF4D0303" IsReadOnly="True"/>
        <TextBox x:Name="price" IsReadOnly="True" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="3" Text="Price" TextWrapping="Wrap" VerticalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White" FontSize="20"/>
        <TextBox x:Name="withSugar" Grid.Column="2" HorizontalAlignment="Left" Margin="13,21,0,0" Grid.Row="1" Text="With Sugar" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF36023E" FocusVisualPrimaryBrush="#FF3E0228" FontSize="14" IsReadOnly="True"/>
        <TextBox x:Name="withCream" IsReadOnly="True" Grid.Column="1" HorizontalAlignment="Center" Margin="0,21,0,0" Grid.Row="1" Text="With Cream" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.415,0.098" Foreground="White" FontSize="14" FocusVisualPrimaryBrush="White"/>
        <TextBox x:Name="getDiscount" IsReadOnly="True" HorizontalAlignment="Left" Margin="8,23,0,0" Grid.Row="2" Text="Get Discount" TextWrapping="Wrap" VerticalAlignment="Top"/>
        <TextBox x:Name="enterNumber" HorizontalAlignment="Left" Margin="21,0,0,0" Grid.Row="2" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White" FontSize="16"/>
        <Button x:Name="checkDiscount" Content="Chek Now" Grid.Column="1" Margin="0,59,0,0" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="18" FocusVisualPrimaryBrush="White" Foreground="White"/>
        <TextBox x:Name="doIgetDiscount" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="2" Text="???" TextWrapping="Wrap" VerticalAlignment="Center" IsReadOnly="True" FontSize="20" Foreground="White" FocusVisualPrimaryBrush="White"/>
        <Button x:Name="pay" Content="Pay" Grid.Column="1" Margin="0,59,0,0" Grid.Row="3" VerticalAlignment="Top" HorizontalAlignment="Center" FocusVisualPrimaryBrush="White" Foreground="White"/>

    </Grid>
</Page>

Answer 1

Setter 的 Target 在要应用值的目标元素上设置了属性的路径，首先您设置的目标 "coffeeMachineGrid.whichCofeeCell.Fill" 不正确，因为 whichCofeeCell不是 coffeeMachineGrid 的属性而是目标元素，你只需要使用 whichCofeeCell.Fill 作为目标。例如：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualState x:Name="forTablet">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"/>
            </VisualState.StateTriggers>
        <VisualState.Setters>
            <Setter Target="whichCofeeCell.Fill" Value="Green"/>
            <Setter Target="myName.FontSize" Value="40" />
        </VisualState.Setters>
    </VisualState>
</VisualStateGroup>

在 UWP 中使用 Visual State Manager 更改 Grid 内的样式

Change the style inside the Grid using Visual State Manager in UWP

uwp

win-universal-app

uwp-xaml