Windows Dev Center

Language: HTML | XAML

Schnellstart: Hinzufügen von SemanticZoom-Steuerelementen (XAML)

Erfahren Sie, wie Sie mithilfe des SemanticZoom-Steuerelements zwischen zwei Ansichten desselben Inhalts zoomen.

Voraussetzungen

Was ist das SemanticZoom-Steuerelement?

Mit dem SemanticZoom-Steuerelement können Benutzer zwischen zwei unterschiedlichen Ansichten desselben Inhalts zoomen, um schnell von einem Abschnitt einer großen Datengruppe zu einem anderen zu wechseln. Die vergrößerte Ansicht ist die Hauptansicht des Inhalts, mit der Benutzer einen detaillierten Überblick über die Elemente erhalten. Die kleinere Ansicht ist eine zusammenfassende Ansicht des gleichen Inhalts, die so dargestellt wird, dass Benutzer schnell darin navigieren können. Beim Anzeigen eines Adressbuchs können Benutzer beispielsweise auf die kleinere Ansicht zoomen, um zu Namen zu navigieren, die mit dem Buchstaben "W" beginnen, und die Ansicht für diesen Buchstaben dann wieder vergrößern, um die darunter aufgeführten Namen anzuzeigen.

Zum Bereitstellen dieser Zoom-Funktion verwendet das SemanticZoom-Steuerelement zwei andere Steuerelemente: Eines stellt die vergrößerte Ansicht bereit, während das andere die verkleinerte Ansicht liefert. Bei diesen Steuerelementen kann es sich um zwei beliebige Steuerelemente handeln, die die ISemanticZoomInformation-Schnittstelle implementieren. Das XAML-Framework (Extensible Application Markup Language) umfasst mehrere Steuerelemente, mit denen diese Schnittstelle implementiert wird: ListView, GridView und Hub. In den Beispielen dieser Schnellstartanleitung wird gezeigt, wie Sie das SemanticZoom-Steuerelement mit zwei GridView-Steuerelementen verwenden.

Verwechseln Sie semantisches Zoomen nicht mit optischem Zoomen. Ihnen ist dieselbe Interaktion und dasselbe grundlegende Verhalten gemeinsam (die Anzeige von mehr bzw. weniger Details in Abhängigkeit vom Zoom-Faktor). Der optische Zoom bezieht sich auf die Anpassung der Vergrößerung eines Inhaltsbereichs oder Objekts, beispielsweise einer Fotografie. Informationen zu einem Steuerelement, das einen optischen Zoom durchführt, finden Sie im Thema zum ScrollViewer-Steuerelement.

Hinzufügen von SemanticZoom-Steuerelementen

Erstellen Sie im Markup das SemanticZoom-Steuerelement. Sie weisen den Eigenschaften ZoomedOutView und ZoomedInView GridView-Steuerelemente zu.

  • Fügen Sie im XAML-Code das SemanticZoom-Steuerelement hinzu. Das Beispiel zeigt das Markup vor dem Hinzufügen der GridView-Steuerelemente.
    
    <SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">
    
        <SemanticZoom.ZoomedOutView>
            <!-- Put the GridView for the zoomed out view here. -->   
        </SemanticZoom.ZoomedOutView>
    
        <SemanticZoom.ZoomedInView>
            <!-- Put the GridView for the zoomed in view here. -->       
        </SemanticZoom.ZoomedInView>
    
    </SemanticZoom>
    
    

Definieren der vergrößerten und verkleinerten Ansichten

Dieses SemanticZoom-Steuerelement verwendet zwei GridView-Steuerelemente: eines für die vergrößerte Ansicht und eines für die verkleinerte Ansicht.

Hinweis  Den vollständigen Code für dieses Beispiel finden Sie im Beispiel für XAML-GridView-Gruppierung und SemanticZoom.
  1. Definieren Sie im XAML-Code ein GridView-Steuerelement für die verkleinerte Ansicht. Dieses Beispiel veranschaulicht die Anzeige der Gruppenüberschriften in einem Raster aus blauen Quadraten.
    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
            <GridView Foreground="White"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Group.Key}" 
                       FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="4" />
                        <Setter Property="Padding" Value="10" />
                        <Setter Property="Background" Value="#FF25A1DB" />
                        <Setter Property="BorderThickness" Value="1" />
                        <Setter Property="HorizontalContentAlignment" Value="Left" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom" />
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </SemanticZoom.ZoomedOutView>
        
        <SemanticZoom.ZoomedInView>
        ...  
        </SemanticZoom.ZoomedInView>
    </SemanticZoom>
    
    
  2. Definieren Sie ein weiteres GridView-Steuerelement für die vergrößerte Ansicht. Die vergrößerte Ansicht sollte die vollständige Datenauflistung anzeigen. Dieses Beispiel veranschaulicht die Anzeige der Gruppenüberschriften in einem Bild und in Text.
    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
        ...
        </SemanticZoom.ZoomedOutView>
        
        <SemanticZoom.ZoomedInView>
            <GridView x:Name="ItemsGridView" IsSwipeEnabled="True"
                      ItemsSource="{Binding Source={StaticResource cvs2}}"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="10,5,0,5" 
                                    HorizontalAlignment="Left" Background="White">
                            <Image Source="{Binding Image}" Height="60" Width="60" 
                                   VerticalAlignment="Center" Margin="0,0,10,0"/>
                            <StackPanel>
                                <TextBlock Text="{Binding Title}" TextWrapping="Wrap" 
                                           Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" 
                                           FontFamily="Segoe UI" FontSize="14.667" FontWeight="Light"/>
                                <TextBlock Text="{Binding Category}" TextWrapping="Wrap"                                                    
                                           Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                           Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" 
                                           FontFamily="Segoe UI" FontSize="11" FontWeight="Light"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text='{Binding Key}' 
                               Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                               Margin="5" FontSize="18" FontFamily="Segoe UI" FontWeight="Light" />
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>
        </SemanticZoom.ZoomedInView>
    </SemanticZoom>
    
    
  3. Wenn Sie in einem SemanticZoom-Steuerelement eine GridView verwenden, legen Sie im ScrollViewer-Element in der Steuerelementvorlage der GridView die angefügte ScrollViewer.IsHorizontalScrollChainingEnabled-Eigenschaft immer folgendermaßen auf false fest: <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">.

    Wenn Sie in einem SemanticZoom-Steuerelement eine ListView verwenden, legen Sie die angefügte ScrollViewer.IsVerticalScrollChainingEnabled-Eigenschaft immer folgendermaßen auf false fest: <ListView ScrollViewer.IsVerticalScrollChainingEnabled="False">.

Synchronisieren der Ansichten

Die vergrößerte Ansicht und die verkleinerte Ansicht sollten synchronisiert werden. Wenn Benutzer eine Gruppe in der verkleinerten Ansicht auswählen, werden die Details dieser Gruppe in der vergrößerten Ansicht angezeigt. Sie können ein CollectionViewSource-Element verwenden oder Code zum Synchronisieren der Ansichten hinzufügen.

Alle Steuerelemente, die Sie an dieselbe CollectionViewSource binden, verfügen immer über dasselbe aktuelle Element. Wenn beide Ansichten dasselbe CollectionViewSource-Element als Datenquelle nutzen, werden die Ansichten vom CollectionViewSource-Element automatisch synchronisiert.

Hh781234.wedge(de-de,WIN.10).gifVerwenden eines CollectionViewSource-Elements

  1. Hinweis  Den vollständigen Code für dieses Beispiel, darunter die StoreData-Klasse und die GetGroupsByLetter-Methode, finden Sie im Beispiel für XAML-GridView-Gruppierung und SemanticZoom.

    Hier ist eine Liste mit Datenelementen angegeben, die nach dem ersten Buchstaben des Titels gruppiert sind. Die gruppierten Elemente werden als CollectionViewSource.Source festgelegt.

    
    // Create a new instance of the data.
    _storeData = new StoreData();
    
    // Get a list of groups. Each group contains a list of items.
    List<GroupInfoList<object>> dataLetter = _storeData.GetGroupsByLetter();
                
    // Set the CollectionViewSource defined in the XAML page resources
    // to the grouped data.
    cvs2.Source = dataLetter;
    
    
    
  2. Im XAML-Code ist das CollectionViewSource-Element als ItemsSource-Element der vergrößerten Ansicht gebunden. In dieser Ansicht wird die vollständige Auflistung der gruppierten Elemente angezeigt.

    
    
    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true"/>
    </Page.Resources>
    
    ...
        <SemanticZoom.ZoomedInView>
            <GridView x:Name="ItemsGridView" IsSwipeEnabled="True"
                      ItemsSource="{Binding Source={StaticResource cvs2}}"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
    ...
    
    
    
  3. Hier legen Sie das ItemsSource-Element der verkleinerten Ansicht auf die CollectionGroups-Eigenschaft des CollectionViewSource.View-Elements fest. In dieser Ansicht werden keine einzelnen Elemente angezeigt, sondern nur die Gruppen.

    
    // Set the items source for the zoomed out view to the group data as well.
    (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;
    
    

    Hier werden diese Elemente im XAML-Code deklariert.

    
    
    <SemanticZoom x:Name="semanticZoom">
        <SemanticZoom.ZoomedOutView>
            <GridView Foreground="White"
                      ScrollViewer.IsHorizontalScrollChainingEnabled="False">
    ...
    
    
    

    Da beide Ansichten dasselbe CollectionViewSource-Element (cvs2) als Datenquelle nutzen, bleiben sie immer synchron.

Hh781234.wedge(de-de,WIN.10).gifVerwenden von Code

  • Wenn Sie kein CollectionViewSource-Element zum Synchronisieren der Ansichten verwenden, sollten Sie das ViewChangeStarted-Ereignis behandeln und die Elemente im Ereignishandler wie folgt synchronisieren.

    
    
    <SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">
    ...
    
    
    
    
    private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
    {
        if (e.IsSourceZoomedInView == false)
        {
            e.DestinationItem.Item = e.SourceItem.Item;
        }
    }
    
    

Verwenden von SemanticZoom

Wenn Sie Ihre App ausführen, wird ein einzelnes Raster angezeigt, für das Sie zwischen den beiden von Ihnen definierten Ansichten einen Zoom durchführen können.

Die verkleinerten und vergrößerten Ansichten des SemanticZoom-Steuerelements

So zoomen Sie zwischen den beiden Ansichten:

EingabemechanismusHerauszoomenHeranzoomen
BerührenAuseinanderdrückenZusammendrücken, Tippen
TastaturSTRG+MINUS, EINGABETASTE, LEERTASTESTRG+PLUS, EINGABETASTE, LEERTASTE
MausSTRG+Mausrad rückwärts drehen STRG+Mausrad vorwärts drehen

 

Beispiele

Weitere Informationen zum SemanticZoom-Steuerelement erhalten Sie, wenn Sie das Beispiel für XAML-GridView-Gruppierung und SemanticZoom herunterladen.

Zusammenfassung

Sie haben erfahren, wie Sie ein SemanticZoom erstellen, das mithilfe von zwei GridView-Steuerelementen eine vergrößerte und eine verkleinerte Ansicht erstellt.

Verwandte Themen

SemanticZoom
GridView
ListView
So wird's gemacht: Gruppieren von Elementen in einer Liste oder einem Raster

 

 

Anzeigen:
© 2015 Microsoft