XAML- VisualStateManager not working - xaml

Question

I am working on a Universal Windows App. I need to adapt the layout according to the screen. To accomplish that, I am using a Visual State Manager. However, when I test the application, the layout does not change. I am not an expert on XAML, but I do not see anything wrong with my code.
<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=""
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=""
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=""
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=""
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>
Thanks for your help. By the way, I am new here, so I apologize if I broke any rules.

Answer 1

The states are not authored correctly. For example, this Setter:
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
Instead, that should be something like:
<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>
I agree with Matthais. Blend for Visual Studio might be a useful tool there and provides an easy WYSIWYG way to author these states.