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はそれらを表示しません。私は何も見ない。しかし、見出しが必要な場所をクリックすると、正しい場所に移動します。あなたのXAMLで

Answer 1

、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> 

正しくありませんそして、あなたは私が

XAMLでバインディングListViewコントロールを削除したとして、C＃の（背後にあるコード）でこの余分な行を追加する必要があります

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;