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.
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.
My page structure is shown below.
<ScrollViewer VerticalScrollBarVisibility="Auto">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Pivot x:Name="PivotPlatform" Margin="0" ItemsSource="{Binding PivotItems}" Grid.Row="2">
<Pivot.HeaderTemplate>
<DataTemplate>
<StackPanel Height="0" Width="0">
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.ItemTemplate>
<DataTemplate>
<Grid xmlns:uwp="using:AmazingPullToRefresh.Controls">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<uwp:PullToRefreshAdorner.Extender>
<uwp:PullToRefreshExtender RefreshRequested="PullToRefreshExtender_RefreshRequested" />
</uwp:PullToRefreshAdorner.Extender>
<RelativePanel x:Name="contentPanel" Grid.Row="0" Margin="10 -30 10 10">
<TextBlock Name="titleTB" Text="{Binding Title}" FontSize="12"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignTopWithPanel="True"/>
<TextBlock Name="totalTB" Text="{Binding Total}" FontSize="18"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="titleTB" />
<ProgressBar Name="progressBar" Value="{Binding ProgressValue}" Width="100" Foreground="{StaticResource currentThemeColor}"
RelativePanel.AlignLeftWithPanel="True" RelativePanel.Below="totalTB"
Margin="0 5 0 0"/>
<TextBlock Name="dateTB" Text="{Binding Date}" FontSize="16"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignTopWithPanel="True" />
</RelativePanel>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
<Charting:Chart Grid.Row="1" x:Name="LineChart"
Margin="10" >
<Charting:LineSeries Title="" IndependentValuePath="Name" DependentValuePath="Amount"
IsSelectionEnabled="False" ItemsSource="{Binding Result}" />
</Charting:Chart>
</ScrollViewer>
</Grid>
</DataTemplate>
</Pivot.ItemTemplate>
</Pivot>
When I add setter for dateTB textblock into VisualState.Setters to move it to left side of Relative Panel, I get an error saying:
An animation is trying to modify an object named 'dateTB', but no such object can be found in the Page.
Code for adding the setter is:
<Setter Target="dateTB.(RelativePanel.AlignLeftWithPanel)" Value="True"/>
Is there a way to control this textblock through Visual State Manager with this page structure?
It's a problem of name scopes, common to all XAML UI frameworks. Your VSM is in the name scope of your UserControl or Page and the TextBlock is in a DataTemplate.
Romasz's solution to your problem to put the VSM inside of the DataTemplate puts everything you need in a single name scope and is the best solution to this problem.
I am trying to put the elements in my BottomAppBar like that:
with this code I get the two stackpanels in the left,can you correct please my code:
<Page.BottomAppBar>
<CommandBar Background="#eff0f2">
<CommandBar.Content>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch">
<Image Source="images/1.png" Height="35" Width="35" />
<ComboBox Margin="2" BorderThickness="0" SelectedItem="Français">
<ComboBoxItem Content="Français" />
<ComboBoxItem Content="Anglais" />
</ComboBox>
<Button VerticalAlignment="Stretch" Background="#eff0f2" >
<Button.Content>
<TextBlock Text="Conditions des données" Foreground="#336699"></TextBlock>
</Button.Content>
</Button>
<Button VerticalAlignment="Stretch" Background="#eff0f2" Margin="0">
<TextBlock Text="-Mentions légales" Foreground="#336699"></TextBlock>
</Button>
<Button VerticalAlignment="Stretch" Background="#eff0f2" Margin="0">
<TextBlock Text="-Impressum" Foreground="#336699"></TextBlock>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" >
<Image Source="images/marque.png" Height="35" Width="35" />
<TextBlock Text="2015 OAASE Corporation|All Right Reserved." Foreground="#666666" Margin="10" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
</Page.BottomAppBar>
thanks for help :)
You just have to add Stretch HorizontalContentAlignment to CommandBar :
<CommandBar HorizontalContentAlignment="Stretch">
EDIT:
#user3821206, a quick fix for your problem of responsiveness is to set a minimum width to the first column, and set the width of the second column to Auto. When the screen is too small, the right part is cropped :
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="550" Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
A better and complementary fix is to use VisualStateManager and AdaptiveTrigger. For example, you can hide the right panel if the screen size is less than 720. To do that, give a name to your right Stackpanel :
<StackPanel x:Name="RightPanel"
And add the following snippet in the first container of your page (for me, it's a Grid) :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!-- Start of snippet -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<!-- Edit style for small screen -->
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RightPanel.Visibility"
Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState>
<!-- Disable previous changes for large screen -->
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- End of snippet -->
</Grid>
In my Windows store app I'm trying to have two ListViews, side-by-side when the display is wide enough and vertically stacked when the display is thin.
I'm trying to do this with a 2x2 grid where by default the grid is like this
<Grid Grid.Row="1" HorizontalAlignment="Stretch" Margin="0,0,0,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="FromUnitSelectorColumn" />
<ColumnDefinition Width="*" x:Name="ToUnitSelectorColumn" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" x:Name="FromUnitSelectorRow" />
<RowDefinition Height="auto" x:Name="ToUnitSelectorRow" />
</Grid.RowDefinitions>
<ListView Name="FromUnitSelector" Header="Converting From " Margin="0,0,10,0" Grid.Row="0" Grid.Column="0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border BorderBrush="{x:Null}" Height="40" Width="40" Margin="5,0,0,0" Background="Beige">
<TextBlock Text="{Binding symbol}" HorizontalAlignment="Center" VerticalAlignment="Center" TextTrimming="Clip" FontSize="10"/>
</Border>
<Border BorderBrush="{x:Null}" Height="40" Margin="5,0,0,0" Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding name}" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="14" TextWrapping="Wrap"/>
</Border >
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="ToUnitSelector" Header="To " Margin="10,0,0,0" Grid.Row="0" Grid.Column="1">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Border BorderBrush="{x:Null}" Height="40" Width="40" Margin="5,0,0,0" Background="Beige">
<TextBlock Text="{Binding symbol}" HorizontalAlignment="Center" VerticalAlignment="Center" TextTrimming="Clip" FontSize="10"/>
</Border >
<Border BorderBrush="{x:Null}" Height="40" Margin="5,0,0,0" Grid.Row="0" Grid.Column="1">
<TextBlock Text="{Binding name}" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="14" TextWrapping="Wrap"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
and I'm trying to set both ListViews to be stacked vertically with this in my thin visualstate
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelectorColumn" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelectorRow" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelector" Storyboard.TargetProperty="Grid.Row">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelector" Storyboard.TargetProperty="Grid.Column">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
but when I test it I get this exception "WinRT information: Cannot resolve TargetProperty Grid.Row on specified object."
What do I need to do to change my second ListView to another row and column? I realise that with a stackpanel I could simply change the orientation, but I need it in a grid so it stretches as much as possible.
For such drastic layout changes it sometimes makes sense to simply have two different layouts and either switch them using templates or by hiding/showing containers of these layouts.
I coded an app in windows 8 consumer preview and i was not aware of view box, so the app doesn't fit for particular resolutions then i used view box to make the app fit for all the available resolutions, after i ported the app to windows 8 release preview. After i used view box, snap view is not functioning properly. But i'm sure that snap was working fine before i used viewbox. i am unable to find the bug.
xaml of the page:
`
<Viewbox HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="RootGrid" Background="#FF14B01B" Height="768" Width="1366">
<!-- Snap view title grid. -->
<Grid x:Name="SnapViewTitleGrid" Visibility="Collapsed" Height="140" VerticalAlignment="Top" MinHeight="140">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="backButton3" Click="GoBack"
IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
Style="{StaticResource SnappedBackButtonStyle}"
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="10,0,0,0"
Grid.ColumnSpan="2"/>
<TextBlock x:Name="snappageTitle"
Text="{StaticResource AppName}"
FontSize="26.667"
FontWeight="Bold"
HorizontalAlignment="Left"
Margin="10,0,0,0"
Grid.Row="1"
Grid.Column="0" />
<Image x:Name="snapmyLogo"
Source="images/Logo.png"
Stretch="Fill"
Grid.Row="1"
Grid.Column="1"
Width="37"
Height="38"
Margin="0,0,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"/>
<TextBlock x:Name="snapsubtitle"
HorizontalAlignment="Left"
Grid.Row="2"
Grid.ColumnSpan="2"
TextWrapping="Wrap"
Text="Learn your alphabets"
VerticalAlignment="Top"
Margin="10,0,0,0"
Width="275"
FontSize="20.667" />
</Grid>
<!-- Snap view content grid. -->
<Grid x:Name="SnapViewContentGrid" Grid.Row="1" Margin="0,0,0,-24" Height="760" Visibility="Collapsed" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Image box. -->
<Grid x:Name="ImageGrid2"
Grid.Row="0"
Background="#FF08635E">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="imgAlpha2"
Source="images/A.png"
Margin="5,0,5,0"
Grid.Row="0" Height="513" />
<TextBlock x:Name="txtFor2"
Grid.Row="1"
Margin="5,0,5,10"
TextWrapping="Wrap"
Text="for APPLE"
FontSize="40"
FontFamily="Segoe UI" />
</Grid>
<!-- Play button -->
<Image Grid.Row="1"
Source="images/Play-01.png"
Width="42" Height="41"
Margin="0,0,5,10"
HorizontalAlignment="Right"
VerticalAlignment="Top"
/>
</Grid>
<!-- Back button and page title -->
<Grid x:Name="TitleGrid" Margin="1,4,-1,624" Grid.RowSpan="2" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Click="backButton_Click"/>
<TextBlock x:Name="pageTitle"
Grid.Column="1"
Text="{StaticResource AppName}"
Style="{StaticResource PageHeaderTextStyle}"
Margin="0,0,40,50"
Foreground="White" />
<TextBlock x:Name="subtitle"
Grid.Column="1"
HorizontalAlignment="Left"
Height="50"
Margin="0,105,0,-15"
TextWrapping="Wrap"
Text="Learn to write the alphabet"
VerticalAlignment="Top"
Width="333"
FontSize="26.667" />
<Image x:Name="myLogo"
Grid.Column="1"
Margin="0,60,60,0"
Source="images/Logo.png"
Stretch="Fill"
Width="74"
Height="76"
HorizontalAlignment="Right"
VerticalAlignment="Top"/>
</Grid>
<ScrollViewer x:Name="myScroll"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Auto" Margin="-7.257,135.551,0,-2.552" Grid.RowSpan="2" Visibility="Visible" >
<Grid x:Name="Allcontent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="120,20,35,35">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<!-- Image box on the left. -->
<Grid x:Name="ImageGrid"
Grid.Column="0"
Background="#FF08635E" Margin="3.056,0,6.944,10">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="imgAlpha"
Source="images/A.png"
Grid.Row="0" Margin="0"/>
<TextBlock x:Name="txtFor"
Grid.Row="1"
TextWrapping="Wrap"
Text="for APPLE"
FontSize="80"
Margin="0"
FontFamily="Segoe UI"/>
</Grid>
<Grid x:Name="TraceGrid"
Grid.Column="1" Margin="46.662,0,-46.662,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Play button -->
<Image x:Name="playB" Grid.Row="0" Grid.Column="0"
Source="images/play.png"
Width="42" Height="41"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ToolTipService.ToolTip="Play it!" PointerPressed="playB_PointerPressed" />
<!-- Help text -->
<TextBlock Text="Practice tracing the letter here"
Grid.Row="0" Grid.Column="1"
FontSize="24" Margin="134.5,8" d:LayoutOverrides="Width, Height"/>
<!-- Color palette -->
<Grid x:Name="colorsPanel"
Grid.Row="0" Grid.Column="1"
ToolTipService.ToolTip="Choose a Color" Margin="566,0,43,0" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2">
<Grid.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</Grid.RenderTransform>
<Grid x:Name="orangeGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="86,-1.5,-86,11.5" PointerPressed="orangeGrid_PointerPressed" Background="#FFF1BC2D" />
<Grid x:Name="redGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF51111" Margin="101.5,-1.5,18.5,11.5" PointerPressed="redGrid_PointerPressed"/>
<Grid x:Name="blueGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF1E27DE" Margin="-1,-1.5,1,11.5" PointerPressed="blueGrid_PointerPressed"/>
<Grid x:Name="greenGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF158B2B" Margin="-44.5,-1.5,44.5,11.5" PointerPressed="greenGrid_PointerPressed"/>
</Grid>
<!-- Grid with big background text and validate/clear buttons -->
<Grid Grid.Row="1" Grid.ColumnSpan="3" Margin="0,10,10,10" HorizontalAlignment="Center" VerticalAlignment="Center" >
<!-- Big background text + Ink Grid -->
<TextBlock x:Name="bgmtxt"
Text="A"
Grid.Column="0"
FontSize="400"
FontFamily="Segoe UI"
FontStretch="Undefined"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextWrapping="Wrap" Height="523" Margin="267,10,96.111,0" Width="436.889" />
<Grid x:Name="InkGrid"
Grid.Column="0"
HorizontalAlignment="Stretch"
Background="#FFE6E6E6"
Opacity="0.5"
Canvas.ZIndex="49"
Margin="0,0,10,10" Height="523" Width="787" PointerPressed="InkGrid_PointerPressed" PointerMoved="InkGrid_PointerMoved" PointerReleased="InkGrid_PointerReleased" PointerExited="InkGrid_PointerExited" />
</Grid>
</Grid>
</Grid>
</ScrollViewer>
<MediaElement x:Name="myMedia" HorizontalAlignment="Left" Height="0" Margin="600,53,0,0" Grid.Row="1" VerticalAlignment="Top" Width="0" RenderTransformOrigin="0.5,0.5" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" AutoPlay="True">
<MediaElement.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</MediaElement.RenderTransform>
</MediaElement>
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup>
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait" />
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="myScroll" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppBar" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapViewTitleGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapViewContentGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Viewbox>
<Page.BottomAppBar>
<AppBar x:Name="AppBar" >
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Width="221.556" Margin="0,0,4.417,0" >
<Button x:Name="ValidateB"
VerticalAlignment="Stretch" Click="ValidateB_Click" Width="92" BorderThickness="0" Style="{StaticResource AppBarButtonStyle}" >
<Button.Content>
<Image Source="images/validate.png" ></Image>
</Button.Content>
</Button>
<Button x:Name="ClearB"
VerticalAlignment="Stretch" Click="ClearB_Click" HorizontalAlignment="Right" Width="103" Margin="34,0,0,0" BorderThickness="0" Style="{StaticResource AppBarButtonStyle}" >
<Button.Content>
<Image Source="images/clear.png" ></Image>
</Button.Content>
</Button>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
`
Finally found a solution. If View Box is used, that will make the page fits for all the resolutions that simulator supports, But it will affect snap view. to fix the snap view.
* Create a dedicated page for snap view.
* Check whether the app is in snap view. if yes, then navigate to another page which is dedicated for snap view.
* To unsnap, handle the windowssizechanged event of the snap view page. [if the app is in non-snap view or filled view (landscape or portrait). Navigate to original page.]