Semantischer Zoom wie UWP People App

Question

Ich entwickle UWP App. Ich möchte Semantic Zoom in meiner App implementieren. Ich habe eine Sammlung von gruppierten Daten und es ist alphabetisch sortiert. Ich möchte meinen Gruppentitel in der ZoomOut-Ansicht darstellen, wie Windows 10's People-App darstellt. Hier ist ein Bild, das Ihnen helfen wird, mein Konzept zu verstehen.

1. Wie kann ich so tun?

2. Wie kann ich verhindern, dass Benutzer auf D, J, K, L Elemente klicken (wie I haben keine Elemente von D, J, K, L in ZoomInView) von GridView.

Hier ist ein Beispiel, das ich gebaut habe. Ich benötige weitere Hilfe, um den erweiterten semantischen Zoom zu implementieren.

Semantic Zoom Sample

Answer 1

Wie kann ich so tun?

Wenn Sie mit dem alphabetischen Ihre Gruppentitel sortieren wollen von A ~ Z.

Sie müssen nur Ihre Gruppen, bevor Sie binden sortieren, um sie Ihren Listview die Itemssource.

var gpData = Contacts.GroupBy(a => a.Name[0], (key, con) => new GroupData() { HeaderTitle = key, Items = con.ToList() }).OrderBy(o=>o.HeaderTitle); 

Wie kann ich verhindern, dass Benutzer einen Klick auf D, J, K, L Artikel (wie ich habe noch keine Produkte von D, J, K, L in ZoomInView) von Gridview.

Das Grundprinzip ist, dass Sie die IsEnabled-Eigenschaft von ListViewItem auf false festlegen müssen.

<SemanticZoom.ZoomedOutView> 
      <ListView ItemsSource="{x:Bind CVS.View.CollectionGroups}" SelectionMode="None" GotFocus="ListView_GotFocus"> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="ListViewItem"> 
         <Setter Property="IsEnabled" Value="False"></Setter> 
        </Style> 
       </ListView.ItemContainerStyle> 
       <ListView.ItemTemplate> 
        <DataTemplate x:DataType="wuxdata:ICollectionViewGroup"> 
         <TextBlock Text="{x:Bind Group.(data:GroupData.HeaderTitle)}"/> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
</SemanticZoom.ZoomedOutView> 

Für Ihren Fall würden Sie die IsEnable Eigenschaft dynamisch festlegen müssen.