Snap view not functioning properly? - windows-8

Question

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

Answer 1

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