MetroスタイルのWinRT XAMLアプリケーションでのSemanticZoomでのZoomedOutViewの奇妙な配置

Question

私は、ZommedInViewとZoomedOutViewの両方でGridViewを含むSemanticZoomを使用しています。 ZoomedOutViewのものはコンテナにスナップしていないようです。コンテナは、ScrollViewerにあるStackPanelです。これは、ズームアウト時に、水平アライメントが左に設定されていると、アイテムがオフスクリーンになることを意味します。 また、デザイナーでzommed-inのグリッドビューを選択すると、スクロールビューアーを塗りつぶして、予想される場所に明確に表示されます。縮小されたグリッドビューは、ページの境界を超えるように表示されます。

ズームインおよびズームアウトビューの内容を入れ替えると、問題が他のグリッドビューに交換されるため、問題がグリッドビューの違いではないことが推測できます。

これを修正する方法はありますか、それともコントロールのバグですか？

<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

ソリューションは、SemanticZoomが含まれているのStackPanelでたHorizo​​ntalAlignment属性を設定することのようです。 Leftに設定すると、コンテンツが適切に整列します。