語義縮放在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現在它應該工作，只要你想。