Powiększenie semantyczne

Powiększenie semantyczne umożliwia użytkownikowi przełączanie się między dwoma różnymi widokami tej samej zawartości, dzięki czemu mogą szybko przechodzić przez duży zestaw grupowanych danych.

• Powiększony widok jest głównym widokiem zawartości. Jest to widok główny, w którym są wyświetlane poszczególne elementy danych.
• Pomniejszony widok jest widokiem wyższego poziomu tej samej zawartości. W tym widoku zazwyczaj są wyświetlane nagłówki grup dla zgrupowanego zestawu danych.

Na przykład, podczas wyświetlania książki adresowej użytkownik może pomniejszyć, aby szybko przejść do litery "W", a następnie powiększyć tę literę, aby zobaczyć nazwiska skojarzone z nią.

Funkcje:

• Rozmiar widoku pomniejszonego jest ograniczony przez granice kontrolki powiększenia semantycznego.
• Naciśnięcie nagłówka grupy przełącza widoki. Ściskanie jako sposób przełączania między widokami można włączyć.
• Aktywne nagłówki umożliwiają przełączanie się między widokami.

Czy jest to właściwa kontrola?

Użyj kontrolki SemanticZoom, gdy musisz pokazać zgrupowany zestaw danych, który jest wystarczająco duży, aby nie wszystkie mogły być wyświetlane na jednej lub dwóch stronach.

Nie należy mylić powiększania semantycznego z powiększaniem optycznym. Chociaż współużytkują one zarówno tę samą interakcję, jak i podstawowe zachowanie (wyświetlając więcej lub mniej szczegółów na podstawie współczynnika powiększenia), powiększenie optyczne odnosi się do regulacji powiększenia obszaru zawartości lub obiektu, takiego jak zdjęcie. Aby uzyskać informacje o kontrolce wykonującej powiększanie optyczne, zobacz kontrolkę ScrollViewer.

Rekomendacje

• W przypadku korzystania z semantycznego powiększenia w aplikacji upewnij się, że układ elementów i kierunek przesuwania nie zmieniają się na podstawie poziomu powiększenia. Układy i interakcje związane z przesuwaniem powinny być spójne i przewidywalne na różnych poziomach powiększenia.
• Powiększenie semantyczne umożliwia użytkownikowi szybkie przechodzenie do zawartości, dlatego ogranicza liczbę stron/ekranów do trzech w trybie powiększenia. Zbyt duże przesuwanie ekranu zmniejsza użyteczność semantycznego powiększenia.
• Unikaj używania powiększania semantycznego, aby zmienić zakres zawartości. Na przykład album fotograficzny nie powinien przełączać się do widoku folderu w Eksploratorze plików.
• Użyj struktury i semantyki, które są niezbędne dla widoku.
• Użyj nazw grup dla elementów w zgrupowanej kolekcji.
• Użyj kolejności sortowania dla kolekcji, która jest niezgrupowana, ale posortowana, na przykład chronologiczna dla dat lub alfabetycznie dla listy nazw.

Przykłady

Galeria WinUI

Sekcja SemanticZoom w galerii kontrolek przedstawia środowisko nawigacji, które umożliwia użytkownikom szybkie powiększanie i usuwanie grupowanych sekcji typów kontrolek.

Aplikacja Zdjęcia

Oto semantyczne powiększenie używane w aplikacji Zdjęcia. Zdjęcia są grupowane według miesięcy. Wybranie nagłówka miesiąca w domyślnym widoku siatki zmniejsza widok listy miesięcy w celu szybszego nawigacji.

Tworzenie powiększenia semantycznego

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kontrolka SemanticZoom nie ma własnej reprezentacji wizualnej. Jest to kontrolka hosta, która zarządza przejściem między 2 innymi kontrolkami, które udostępniają widoki zawartości, zazwyczaj ListView lub GridView. Kontrolki widoku ustawiasz na właściwości ZoomedInView i ZoomedOutView SemanticZoom.

3 elementy potrzebne do powiększenia semantycznego to:

• Pogrupowane źródło danych. (Grupy są definiowane przez definicję GroupStyle w widoku powiększanym).
• Widok powiększający, który pokazuje dane na poziomie elementu.
• Pomniejszony widok przedstawiający dane na poziomie grupy.

Przed użyciem powiększenia semantycznego należy zrozumieć, jak używać widoku listy z pogrupowanych danych. Aby uzyskać więcej informacji, zobacz Widok listy i widok siatki.

Ten kod XAML przedstawia strukturę kontrolki SemanticZoom. Do właściwości ZoomedInView i ZoomedOutView przypisuje się inne kontrolki.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Przykłady tutaj pochodzą ze strony SemanticZoom przykładu WinUI Gallery . Możesz pobrać przykład, aby wyświetlić pełny kod, w tym źródło danych. To powiększenie semantyczne używa kontrolki GridView do dostarczania widoku powiększenia i widoku ListView dla widoku pomniejszonego.

Zdefiniuj powiększony widok

Oto kontrolka GridView dla widoku powiększenia. Widok powiększania powinien wyświetlać poszczególne elementy danych w grupach. W tym przykładzie pokazano, jak wyświetlać elementy w siatce przy użyciu obrazu i tekstu.

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}"
              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

Wygląd nagłówków grup jest zdefiniowany w zasobie ZoomedInGroupHeaderTemplate. Wygląd elementów jest zdefiniowany w zasobie ZoomedInTemplate.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}"
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}"
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}"
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Definiowanie widoku pomniejszonego

Ten kod XAML definiuje kontrolkę ListView dla widoku powiększenia. W tym przykładzie pokazano, jak wyświetlić nagłówki grup jako tekst na liście.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

Wygląd jest zdefiniowany w zasobie ZoomedOutTemplate.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}"
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

Synchronizowanie widoków

Widok powiększony i pomniejszony powinny zostać zsynchronizowane, więc jeśli użytkownik wybierze grupę w widoku pomniejszonym, szczegóły tej samej grupy są wyświetlane w widoku powiększonym. Aby zsynchronizować widoki, możesz użyć CollectionViewSource lub dodać kod.

Wszystkie kontrolki powiązane z tym samym elementem CollectionViewSource zawsze mają ten sam bieżący element. Jeśli oba widoki używają tego samego źródła danych CollectionViewSource, CollectionViewSource synchronizuje widoki automatycznie. Aby uzyskać więcej informacji, zobacz CollectionViewSource.

Jeśli nie używasz obiektu CollectionViewSource do synchronizowania widoków, należy obsługiwać zdarzenie ViewChangeStarted i synchronizować elementy w procedurze obsługi zdarzeń, jak pokazano tutaj.

<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;
    }
}

UwP i WinUI 2

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek.

Powiązane artykuły

• Podstawy projektowania nawigacji
• widok listy i widok siatki
• kontenery i szablony elementów