Snap view not functioning properly?

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