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

Question

I am new in Visual Studio. how to use Visual State Manager in order to create adaptive triggers? recently I have this XAML code using Grid. So, I want that everytime I change the size of the app the text inside the cell should be changed (the size and color). But it is not getting changed. Here is the code.

Any help is appreciated.

<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

The Target of Setter sets the path of a property on a target element to apply the value to, first the target "coffeeMachineGrid.whichCofeeCell.Fill" you set is not correct, since the whichCofeeCell is not the property of coffeeMachineGrid and it is the target element, you just need to use whichCofeeCell.Fill as Target. For example:

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