Sémantické přiblížení

Sémantická lupa umožňuje uživateli přepínat mezi dvěma různými zobrazeními stejného obsahu, aby mohl rychle procházet velkou sadou seskupených dat.

• Zvětšený pohled je hlavním zobrazením obsahu. Toto je hlavní zobrazení, kde zobrazujete jednotlivé datové položky.
• Zobrazení z větší vzdálenosti je na vyšší úrovni stejného obsahu. V tomto zobrazení obvykle zobrazíte záhlaví skupiny pro seskupenou datovou sadu.

Například při prohlížení adresáře by uživatel mohl oddálit, aby rychle přeskočil na písmeno "W" a přiblížit ho, aby se zobrazila jména přidružená k němu.

Funkce:

• Velikost oddálitého zobrazení je omezena hranicemi sémantického ovládacího prvku lupy.
• Klepnutím na záhlaví skupiny přepnete zobrazení. Štípnutí jako způsob přepínání mezi zobrazeními lze povolit.
• Aktivní záhlaví se přepínají mezi zobrazeními.

Je to správná kontrola?

Ovládací prvek SémanticZoom použijte, když potřebujete zobrazit seskupenou datovou sadu, která je dostatečně velká, aby se ne všechny zobrazovaly na jedné nebo dvou stránkách.

Nezaměňujte sémantické přiblížení s optickým přiblížením. I když sdílejí stejnou interakci i základní chování (zobrazení více nebo méně podrobností na základě faktoru přiblížení), optické přiblížení odkazuje na úpravu zvětšení oblasti obsahu nebo objektu, jako je fotografie. Informace o ovládacím prvku, který provádí optické přiblížení, naleznete v ovládacím prvku ScrollViewer.

Recommendations

• Při použití sémantického přiblížení v aplikaci se ujistěte, že se nezmění rozložení a směr posouvání položek na základě úrovně přiblížení. Rozložení a interakce posouvání by měly být konzistentní a předvídatelné napříč úrovněmi přiblížení.
• Sémantické přiblížení umožňuje uživateli rychle přejít na obsah, takže omezte počet stránek nebo obrazovek na tři v režimu oddálení. Příliš mnoho posunování snižuje praktičnost sémantického zoomu.
• Vyhněte se použití sémantického přiblížení ke změně rozsahu obsahu. Fotoalbum by například nemělo být v File Explorer přepnuto do zobrazení složek.
• Použití struktury a sémantiky, které jsou pro zobrazení nezbytné.
• Použijte názvy skupin pro položky ve seskupené kolekci.
• Řazení můžete použít pro kolekci, která je neseskupené, ale seřazená, například chronologická data nebo abecední seznam jmen.

Examples

Galerie WinUI 3

Část SemanticZoom v galerii ovládacích prvků ukazuje navigační prostředí, které uživatelům umožňuje rychle přiblížit a oddálit seskupené části typů ovládacích prvků.

Aplikace Fotky

Tady je sémantická lupa použitá v aplikaci Fotky. Fotky jsou seskupené podle měsíce. Když vyberete záhlaví měsíce ve výchozím zobrazení mřížky, přiblíží se zobrazení seznamu měsíců pro rychlejší navigaci.

Vytvořte sémantické přiblížení

• Důležitá rozhraní API:třída SemanticZoom, třída ListView,, třída GridView

Otevřete aplikaci Galerie WinUI 3 a podívejte se na SemanticZoom v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Ovládací prvek SemanticZoom nemá žádnou vizuální reprezentaci. Jedná se o hostitelský ovládací prvek, který spravuje přechod mezi 2 dalšími ovládacími prvky, které poskytují zobrazení obsahu, obvykle ListView nebo Ovládací prvky GridView. Nastavíte ovládací prvky zobrazení na vlastnosti ZoomedInView a ZoomedOutView v rámci SemanticZoom.

3 prvky, které potřebujete pro sémantický zoom, jsou:

• Seskupený zdroj dat. (Skupiny jsou definovány definicí GroupStyle v zobrazení přiblížení.)
• Přiblížení zobrazení, které zobrazuje data na úrovni položek.
• Oddálené zobrazení, které ukazuje data na úrovni skupiny.

Než použijete sémantickou lupu, měli byste vědět, jak používat zobrazení seznamu se seskupenými daty. Další informace najdete v tématu Zobrazení seznamu a zobrazení mřížky.

Poznámka:

Chcete-li definovat přiblížené zobrazení a oddálené zobrazení ovládacího prvku SemanticZoom, můžete použít jakékoli dva ovládací prvky, které implementují rozhraní ISemanticZoomInformation. Architektura XAML poskytuje 3 ovládací prvky, které implementují toto rozhraní: ListView, GridView a Hub.

Tento KÓD XAML zobrazuje strukturu ovládacího prvku SemanticZoom. Dalším ovládacím prvkům přiřadíte vlastnosti ZoomedInView a 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>

Zde uvedené příklady pocházejí ze stránky SemanticZoom vzorové aplikace WinUI 3 Gallery. Ukázku si můžete stáhnout, abyste viděli kompletní kód včetně zdroje dat. Tato sémantická lupa používá GridView k poskytnutí zobrazení přiblížení a ListView pro zobrazení oddálení.

Definování přiblížení zobrazení

Tady je ovládací prvek GridView pro přiblížení zobrazení. Přiblížení zobrazení by mělo zobrazovat jednotlivé datové položky ve skupinách. Tento příklad ukazuje, jak zobrazit položky v mřížce s obrázkem a textem.

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

Vzhled hlaviček skupiny je definován ve zdroji ZoomedInGroupHeaderTemplate. Vzhled položek je definován v ZoomedInTemplate zdroji.

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

Definovat oddálené zobrazení

Tento XAML definuje ovládací prvek ListView pro oddálené zobrazení. Tento příklad ukazuje, jak zobrazit záhlaví skupiny jako text v seznamu.

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

Vzhled je definován ve zdroji ZoomedOutTemplate.

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

Synchronizace zobrazení

Zobrazení přiblížení a oddálení by se mělo synchronizovat, takže pokud uživatel vybere skupinu v zobrazení oddálení, zobrazí se podrobnosti o stejné skupině v zobrazení přiblížení. K synchronizaci zobrazení můžete použít CollectionViewSource nebo přidat kód.

Všechny ovládací prvky, které svážete se stejným Objektem CollectionViewSource, mají vždy stejnou aktuální položku. Pokud obě zobrazení používají stejný CollectionViewSource jako zdroj dat, KolekceViewSource synchronizuje zobrazení automaticky. Další informace najdete v tématu CollectionViewSource.

Pokud k synchronizaci zobrazení nepoužíváte CollectionViewSource, měli byste zpracovat událost ViewChangeStarted a synchronizovat položky v obslužné rutině události, jak je uvedeno zde.

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

Související články

• Základy návrhu navigace
• Zobrazení seznamu a zobrazení mřížky
• kontejnery položek a šablony