语义缩放在Windows 8应用程序中不起作用

Question

我试图在Windows 8应用程序中使用SemanticZoom，它似乎不起作用。

我在这里做错了什么？ 我想我认为可以工作，但徒劳的几乎一切：删除rowdefinitions，去掉了风格，去掉了模板，但仍然没有工作...

<Grid Style="{StaticResource LayoutRootStyle}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <SemanticZoom Grid.RowSpan="2">    
     <SemanticZoom.ZoomedInView> 
      <GridView x:Name="itemGridView" 
         AutomationProperties.AutomationId="ItemGridView" 
         AutomationProperties.Name="Grouped Items" 
         Padding="116,137,40,46" 
         ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
         SelectionMode="None" 
         IsSwipeEnabled="True" 
         IsItemClickEnabled="True" 
         ItemTemplate="{StaticResource GridViewItemTemplateZoomIn}" 
         ItemsPanel="{StaticResource GridViewItemsPanelTemplate}" 
         helpers:ItemClickCommand.Command="{Binding ServiceClickCommand}"> 
       <GridView.GroupStyle> 
        <GroupStyle HidesIfEmpty="True"> 
         <GroupStyle.HeaderTemplate> 
          <DataTemplate> 
           <Grid Margin="1,0,10,6"> 
            <Button AutomationProperties.Name="Group Title" 
              Style="{StaticResource TextPrimaryButtonStyle}"> 
             <StackPanel Orientation="Horizontal"> 
              <TextBlock Text="{Binding Name}" 
                 Margin="3,-7,10,10" 
                 Style="{StaticResource GroupHeaderTextStyle}" /> 
              <TextBlock Text="{StaticResource ChevronGlyph}" 
                 FontFamily="Segoe UI Symbol" 
                 Margin="0,-7,0,10" 
                 Style="{StaticResource GroupHeaderTextStyle}" /> 
             </StackPanel> 
            </Button> 
           </Grid> 
          </DataTemplate> 
         </GroupStyle.HeaderTemplate> 
         <GroupStyle.Panel> 
          <ItemsPanelTemplate> 
           <VariableSizedWrapGrid Orientation="Vertical" 
                 Margin="0,0,80,0" /> 
          </ItemsPanelTemplate> 
         </GroupStyle.Panel> 
        </GroupStyle> 
       </GridView.GroupStyle> 
      </GridView> 
     </SemanticZoom.ZoomedInView> 
     <SemanticZoom.ZoomedOutView> 
      <GridView x:Name="itemZoomOutGridView" 
         ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
         AutomationProperties.AutomationId="ItemGridView" 
         AutomationProperties.Name="Grouped Items" 
         Padding="116,175,40,46" 
         SelectionMode="None" 
         IsSwipeEnabled="True" 
         IsItemClickEnabled="True" 
         ItemTemplate="{StaticResource GridViewItemTemplateZoomOut}" 
         ItemsPanel="{StaticResource GridViewItemsPanelTemplate}" 
         ItemsSource="{Binding ServiceCategories}"> 
      </GridView> 
     </SemanticZoom.ZoomedOutView> 
    </SemanticZoom> 

谢谢:)

Answer 1

如果我正确理解您的问题，semanticView本身正在工作（您可以放大和缩小）。但是当你放大GridView中的项目时，它们是相同的，并且不会根据所选的ZoomedOutView GridView项目进行更改。

但是用你的XAML，我认为这是正常的行为，因为当你选择一个类别时，zoomedInView的gridview绑定不会改变。

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 

我的第一个建议是将ItemsSource绑定到ViewModel中的列表，而不是使用staticRessource。

其次，你可以改变SemanticView这样：

<SemanticZoom Grid.RowSpan="2" ViewChangeStarted="SemanticZoomChanged" > 

而且在后面的代码添加：

private void SemanticZoomChanged(object sender, SemanticZoomViewChangedEventArgs e) 
{ 
    // First we check that we are going from ZoomedOut to ZoomedIn 
    if (e.IsSourceZoomedInView == false) 
    { 
     // I call a method in my ViewModel giving the chosen category in parameter 
     DefaultViewModel.OnSelectedCategoryChanged(e.SourceItem.Item.ToString()); 
    } 
} 

使用MVVM我知道这是丑陋的有代码的代码隐藏，但这并不是很多，我们正在调用ViewModel中的一个方法来执行逻辑，所以它仍然遵循MVVM设计模式。

而在去年，我们在视图模型增加一个功能，这将改变ZoomedInView

OnSelectedCategoryChanged(string chosenCategory) 
{ 
    // Here change the value of your groupedItemsViewSource list 
    GroupedItemsViewSource = ....; 
} 

的的ItemsSource现在它应该工作，只要你想。