Positionnement étrange de ZoomedOutView dans SemanticZoom dans les applications WinRT XAML de style Metro

Question

J'ai utilisé un SemanticZoom contenant un GridView à la fois dans ZommedInView et ZoomedOutView. Celui de ZoomedOutView ne semble pas s'accrocher au conteneur. Le conteneur est un StackPanel, situé dans un ScrollViewer. Cela signifie que lorsque je fais un zoom arrière, mes éléments sont hors écran si l'alignement horizontal est réglé sur gauche. En outre, lorsque je sélectionne le zommed-dans gridview dans le concepteur, il est clairement affiché à l'endroit prévu, remplissant le scrollviewer. La vue de grille agrandie dépasse les limites de la page. L'échange du contenu des vues agrandies et agrandies permet d'inverser le problème à l'autre grille, ce qui permet de déduire que le problème ne se trouve pas dans une différence de la grille.

Y at-il un moyen de le réparer ou est-ce un bug dans le contrôle?

<ScrollViewer 
     x:Name="itemGridScrollViewer" 
     AutomationProperties.AutomationId="ItemGridScrollViewer" 
     Grid.Row="1" 
     Margin="0,-3,0,0" 
     Style="{StaticResource HorizontalScrollViewerStyle}"> 

     <!-- 
     ItemTemplateSelector="{StaticResource hubItemTemplateSelector}" 
     ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
     --> 
     <StackPanel 
        Margin="116,0,40,46"> 
     <SemanticZoom ManipulationMode="RotateInertia"> 
      <SemanticZoom.ZoomedInView> 
        <GridView 
        AutomationProperties.AutomationId="ItemGridView" 
        AutomationProperties.Name="Grouped Items" 
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
        ItemTemplateSelector="{StaticResource hubItemTemplateSelector}" 
        SelectionMode="None" 
        IsItemClickEnabled="True" 
        ItemClick="ItemView_ItemClick" 
        IsSwipeEnabled="True"> 

         <GridView.ItemsPanel> 
          <ItemsPanelTemplate> 
           <VirtualizingStackPanel Orientation="Horizontal"/> 
          </ItemsPanelTemplate> 
         </GridView.ItemsPanel> 
         <GridView.GroupStyle> 
          <GroupStyle> 
           <GroupStyle.HeaderTemplate> 
            <DataTemplate> 
             <Grid Margin="1,0,0,6"> 
              <Button 
              AutomationProperties.Name="Group Title" 
              Content="{Binding Path=Title}" 
              Click="Header_Click" 
              Style="{StaticResource TextButtonStyle}"/> 
             </Grid> 
            </DataTemplate> 
           </GroupStyle.HeaderTemplate> 
           <GroupStyle.Panel> 
            <ItemsPanelTemplate> 
             <VariableSizedWrapGrid MaximumRowsOrColumns="2" ItemHeight="250" ItemWidth="250" Orientation="Horizontal"/> 
            </ItemsPanelTemplate> 
           </GroupStyle.Panel> 
          </GroupStyle> 
         </GridView.GroupStyle> 
        </GridView> 
       </SemanticZoom.ZoomedInView> 
      <SemanticZoom.ZoomedOutView> 
        <GridView 
         AutomationProperties.AutomationId="CategoryGridView" 
         AutomationProperties.Name="Grouped Items Zoomed Out" 
         ItemsSource="{Binding Path=ItemGroups}" 
        > 

         <GridView.ItemTemplate> 
          <DataTemplate> 
           <Button 
            AutomationProperties.Name="Group Title" 
            Content="{Binding Title}" 
            Click="Header_Click" 
            Style="{StaticResource TextButtonStyle}"/> 
          </DataTemplate> 
         </GridView.ItemTemplate> 
         <GridView.ItemsPanel> 
          <ItemsPanelTemplate> 
           <WrapGrid ItemWidth="250" ItemHeight="250" MaximumRowsOrColumns="2" VerticalChildrenAlignment="Center" /> 
          </ItemsPanelTemplate> 
         </GridView.ItemsPanel> 
         <GridView.ItemContainerStyle> 
          <Style TargetType="GridViewItem"> 
           <Setter Property="Margin" Value="4" /> 
           <Setter Property="Padding" Value="10" /> 
           <Setter Property="Background" Value="#FF25A1DB" /> 
           <Setter Property="BorderThickness" Value="1" /> 
          </Style> 
         </GridView.ItemContainerStyle> 
        </GridView> 
       </SemanticZoom.ZoomedOutView> 
     </SemanticZoom> 
     </StackPanel> 
    </ScrollViewer> 

Answer 1

La solution semble être de définir l'attribut HorizontalAlignment sur le StackPanel qui contient SemanticZoom. Si je le mets à gauche, le contenu s'aligne correctement.