UWP Семантический зум

Question

У меня есть семантический зум.

<SemanticZoom 
     Grid.Row="1" 
     Grid.Column="1" ViewChangeStarted="SemanticZoom_ViewChangeStarted"> 
     <SemanticZoom.ZoomedOutView> 
      <ListView 
       Margin="0,0,0,0" 
       Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" 
       ItemsSource="{Binding Source={StaticResource cvs}}" 
       SelectionMode="None" > 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <TextBlock Foreground="{ThemeResource AccentBrush}" FontSize="{ThemeResource HubHeaderThemeFontSize}" Text="{Binding Key}" /> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
     </SemanticZoom.ZoomedOutView> 
     <SemanticZoom.ZoomedInView> 
      <GridView 
       Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" 
       x:Name="MainCollection" 
       ItemsSource="{Binding Source={StaticResource cvs}}" 
       ItemClick="MainCollection_ItemClick" 
       IsItemClickEnabled="True"    
       SelectionMode="None"> 
       <GridView.ItemTemplate> 
        <DataTemplate x:DataType="local:TileApp"> 
         <Grid Height="60" HorizontalAlignment="Stretch"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="60"/> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="50"/> 
          </Grid.ColumnDefinitions> 
          <Image Source="{x:Bind Medium, Converter={StaticResource LinkConverter}}" Grid.Column="0"/> 
          <TextBlock HorizontalAlignment="Stretch" Width="350" x:Name="Name" VerticalAlignment="Center" Text="{x:Bind AppName}" Grid.Column="1"/> 
          <FontIcon Grid.Column="2" FontFamily="Segoe MDL2 Assets" Glyph="&#xE840;" /> 
         </Grid> 
        </DataTemplate> 
       </GridView.ItemTemplate> 
       <GridView.GroupStyle> 
        <GroupStyle> 
         <GroupStyle.HeaderTemplate> 
          <DataTemplate> 
           <TextBlock Foreground="{ThemeResource AccentBrush}" Text="{Binding Key}" /> 
          </DataTemplate> 
         </GroupStyle.HeaderTemplate> 
        </GroupStyle> 
       </GridView.GroupStyle> 
      </GridView> 
     </SemanticZoom.ZoomedInView> 
    </SemanticZoom> 

И вот моя группировка

var groups = from c in TilesCollection 
        group c by c.Category into g 
        orderby g.Key 
        select g; 
     this.cvs.Source = groups; 

Проблема заключается в том, что при нажатии на заголовок. ZoomOutView не отображает их. Я ничего не вижу. Но если вы щелкнете по месту, где должны быть заголовки, он перемещается в нужное место.

Answer 1

В вашем XAML, в ListView и TextBlock привязок не являются правильными

<SemanticZoom.ZoomedOutView> 
    <!-- So I've removed ItemsSource property on the ListView in XAML --> 
    <!-- And added a name to it --> 
    <ListView x:Name="ZoomoutCollection" 
      Margin="0,0,0,0" 
      Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" 
      SelectionMode="None" > 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <TextBlock Foreground="{ThemeResource AccentBrush}" FontSize="{ThemeResource HubHeaderThemeFontSize}" Text="{Binding Group.Key}" /> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
    </ListView> 
</SemanticZoom.ZoomedOutView> 

И вам нужно добавить дополнительную строку в C# (код позади), как я удалил ListView связывания в XAML

var groups = from c in TilesCollection 
       group c by c.Category into g 
       orderby g.Key 
       select g; 
this.cvs.Source = groups; 
// And moved ItemsSource here, since we need a more complex binding 
// Note that 'ZoomoutCollection' is the new named ListView 
ZoomoutCollection.ItemsSource = this.cvs.View.CollectionGroups;