La vue Snap ne fonctionne pas correctement?

Question

J'ai codé une application dans Windows 8 aperçu du consommateur et je ne savais pas de boîte de vue, de sorte que l'application ne correspond pas à des résolutions particulières, puis j'ai utilisé la boîte pour afficher l'application pour toutes les résolutions disponibles application pour Windows 8 aperçu de la version. Après avoir utilisé la vue, la vue d'accrochage ne fonctionne pas correctement. Mais je suis sûr que Snap fonctionnait bien avant d'utiliser viewbox. Je suis incapable de trouver le bug. XAML de la 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

a finalement trouvé une solution. Si View Box est utilisé, cela fera en sorte que la page s'adapte à toutes les résolutions prises en charge par le simulateur, mais cela affectera la vue d'accrochage. pour corriger la vue d'accrochage.
* Créer une page dédiée pour l'affichage instantané.
* Vérifiez si l'application est en mode d'affichage instantané. Si oui, naviguez jusqu'à une autre page dédiée à l'affichage instantané.
* Pour désélectionner, gérer l'événement windowssizechanged de la page d'affichage d'accrochage. [si l'application est en mode sans accrochage ou en mode plein écran (paysage ou portrait) Accédez à la page d'origine.]