Dela via

Semantisk zoom

Med semantisk zoom kan användaren växla mellan två olika vyer av samma innehåll så att de snabbt kan navigera genom en stor uppsättning grupperade data.

  • Den inzoomade vyn är huvudvyn för innehållet. Det här är huvudvyn där du visar enskilda dataobjekt.
  • Den utzoomade vyn är en vy på högre nivå av samma innehåll. Du visar vanligtvis grupprubrikerna för en grupperad datauppsättning i den här vyn.

När du till exempel visar en adressbok kan användaren zooma ut för att snabbt hoppa till bokstaven "W" och zooma in på den bokstaven för att se namnen som är associerade med den.

funktioner:

  • Storleken på den utzoomade vyn begränsas av gränserna för den semantiska zoomkontrollen.
  • Tryck på en grupprubrik för att växla vy. Du kan aktivera klämning som ett sätt att växla mellan vyer.
  • Aktiva rubriker växlar mellan vyer.

Är det här rätt kontroll?

Använd en SemanticZoom kontroll när du behöver visa en grupperad datauppsättning som är tillräckligt stor för att inte alla ska kunna visas på en eller två sidor.

Blanda inte ihop semantisk zoomning med optisk zoomning. Medan de delar både samma interaktion och grundläggande beteende (visar mer eller mindre information baserat på en zoomfaktor), refererar optisk zoom till justering av förstoring för ett innehållsområde eller objekt, till exempel ett fotografi. Information om en kontroll som utför optisk zoomning finns i kontrollen ScrollViewer.

Recommendations

  • När du använder semantisk zoom i din app bör du se till att objektlayouten och panoreringsriktningen inte ändras baserat på zoomnivån. Layouter och panoreringsinteraktioner ska vara konsekventa och förutsägbara över zoomnivåer.
  • Med semantisk zoom kan användaren snabbt hoppa till innehåll, så begränsa antalet sidor/skärmar till tre i utzoomat läge. För mycket panorering minskar användbarheten av semantisk zoom.
  • Undvik att använda semantisk zoom för att ändra innehållets omfång. Ett fotoalbum bör till exempel inte växla till en mappvy i Utforskaren.
  • Använd en struktur och semantik som är viktiga för vyn.
  • Använd gruppnamn för objekt i en grupperad samling.
  • Använd sorteringsordning för en samling som är ogrupperad men sorterad, till exempel kronologisk för datum eller alfabetisk för en lista med namn.

Examples

Avsnittet SemanticZoom i kontrollgalleriet visar en navigeringsupplevelse som gör det möjligt för användare att snabbt zooma in och ut ur grupperade delar av kontrolltyper.

exempel på semantisk zoom som används i WinUI-galleriet

Foton-appen

Här är en semantisk zoom som används i appen Foton. Foton grupperas efter månad. Om du väljer en månadsrubrik i standardrutnätvyn zoomas du ut till månadslistvyn för snabbare navigering.

En semantisk zoom som används i appen Foton

Skapa en semantisk zoom

Öppna WinUI-galleriappen och se SemanticZoom i praktiken

Med WinUI 3-galleriappen kan du utforska och bläddra bland interaktiva exempel på WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.

Kontrollen SemanticZoom saknar helt egen visuell representation. Det är en värdkontroll som hanterar övergången mellan två andra kontroller som tillhandahåller vyer av ditt innehåll, vanligtvis ListView-- eller GridView- kontroller. Du ställer in vykontrollerna på ZoomedInView och ZoomedOutView egenskaperna för SemanticZoom.

De tre element som du behöver för en semantisk zoom är:

  • En grupperad datakälla. (Grupper definieras av definitionen för GroupStyle i den inzoomade vyn.)
  • En zoomad vy som visar data på objektnivå.
  • En utzoomad vy som visar data på gruppnivå.

Innan du använder en semantisk zoom bör du förstå hur du använder en listvy med grupperade data. Mer information finns i Listvy och rutnätsvy.

Anmärkning

Om du vill definiera den inzoomade vyn och den utzoomade vyn för SemanticZoom-kontrollen kan du använda två kontroller som implementerar gränssnittet ISemanticZoomInformation. XAML-ramverket innehåller tre kontroller som implementerar det här gränssnittet: ListView, GridView och Hub.

Denna XAML visar strukturen för SemanticZoom-kontrollen. Du tilldelar andra kontroller till egenskaperna ZoomedInView och ZoomedOutView.

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

Exemplen här är hämtade från sidan SemanticZoom i WinUI Gallery-exempel. Du kan ladda ned exemplet för att se den fullständiga koden, inklusive datakällan. Den här semantiska zoomen använder en GridView för att tillhandahålla den inzoomade vyn och en ListView för den utzoomade vyn.

Definiera den inzoomade vyn

Här är GridView-kontrollen för den inzoomade vyn. Den inzoomade vyn bör visa enskilda dataobjekt i grupper. Det här exemplet visar hur du visar objekten i ett rutnät med en bild och text.

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

Utseendet på grupprubrikerna definieras i den ZoomedInGroupHeaderTemplate resursen. Utseendet på objekten definieras i den ZoomedInTemplate resursen.

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

Definiera den utzoomade vyn

Denna XAML definierar en ListView-kontroll för den utzoomade vyn. Det här exemplet visar hur du visar grupprubrikerna som text i en lista.

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

Utseendet definieras i resursen ZoomedOutTemplate.

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

Synkronisera vyerna

Den inzoomade vyn och den utzoomade vyn bör synkroniseras, så om en användare väljer en grupp i den utzoomade vyn visas information om samma grupp i den inzoomade vyn. Du kan använda en CollectionViewSource- eller lägga till kod för att synkronisera vyerna.

Alla kontroller som du binder till samma CollectionViewSource har alltid samma aktuella objekt. Om båda vyerna använder samma CollectionViewSource som sin datakälla synkroniserar CollectionViewSource vyerna automatiskt. Mer information finns i CollectionViewSource.

Om du inte använder en CollectionViewSource för att synkronisera vyerna bör du hantera ViewChangeStarted händelse och synkronisera objekten i händelsehanteraren, som du ser här.

<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;
    }
}
  • Last updated on