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

Question

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

我在这里做错了吗？ 我尝试了几乎所有我认为可行但徒劳的方法：删除了行定义，删除了样式，删除了模板，但仍然无法正常工作...

<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 设计模式。

最后我们在 ViewModel 中添加一个函数，该函数将更改 ZoomedInView 的 ItemsSource

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

现在它应该可以按您的意愿工作了。