Megosztás a következőn keresztül:

Szemantikai nagyítás

A szemantikai nagyítás lehetővé teszi a felhasználó számára, hogy azonos tartalom két különböző nézete között váltson, így gyorsan navigálhat a nagy méretű csoportosított adatok között.

  • A nagyított nézet a tartalom fő nézete. Ez az a fő nézet, ahol az egyes adatelemek láthatók.
  • A kicsinyített nézet ugyanazon tartalom magasabb szintű nézete. Általában a csoportfejlécek jelennek meg egy csoportosított adatkészlet számára ebben a nézetben.

Például egy címjegyzék megtekintésekor a felhasználó kicsinyíthet, hogy gyorsan a "W" betűre ugorjon, és nagyítsa az adott betűt a hozzá tartozó nevek megtekintéséhez.

Szolgáltatások:

  • A kicsinyített nézet méretét a szemantikai nagyítási vezérlő határai korlátozzák.
  • A csoportfejlécre koppintva váltogathatja a nézeteket. A nézetek közötti váltást lehetővé tevő csippentés engedélyezhető.
  • Az aktív fejlécek váltanak a nézetek között.

Ez a megfelelő vezérlő?

Akkor használjon SzemanticZoom vezérlőelemet, ha olyan csoportosított adatkészletet kell megjelenítenie, amely elég nagy ahhoz, hogy az egy vagy két oldalon ne jelenjen meg.

Ne keverje össze a szemantikai nagyítást az optikai nagyítással. Bár ugyanazzal az interakcióval és alapszintű viselkedéssel rendelkeznek (a nagyítási tényező alapján több vagy kevesebb részletet jelenítenek meg), az optikai nagyítás egy tartalomterület vagy objektum( például fénykép) nagyításának beállítására utal. Az optikai nagyítást végző vezérlőkkel kapcsolatos információkért lásd a ScrollViewer vezérlőt.

Recommendations

  • Ha szemantikai nagyítást használ az alkalmazásban, győződjön meg arról, hogy az elem elrendezése és pásztázási iránya nem változik a nagyítási szint alapján. Az elrendezéseknek és a pásztázó interakcióknak konzisztensnek és kiszámíthatónak kell lenniük a nagyítási szintek között.
  • A szemantikai nagyítással a felhasználó gyorsan a tartalomra ugorhat, ezért kicsinyített módban háromra korlátozhatja az oldalak/képernyők számát. A túl sok pásztázás csökkenti a szemantikai nagyítás gyakorlatiasságát.
  • Ne használjon szemantikai nagyítást a tartalom hatókörének módosításához. Egy fényképalbumnak például nem szabad mappanézetre váltania File Explorer.
  • Olyan struktúrát és szemantikát használjon, amely elengedhetetlen a nézethez.
  • Csoportosított gyűjtemény elemeihez használjon csoportneveket.
  • Rendezési sorrendet használjon a nem csoportosított, de rendezett gyűjteményekhez, például a dátumok időrendi sorrendjéhez vagy a nevek listájának betűrendes elrendezéséhez.

Példák

A Vezérlők gyűjtemény SzemanticZoom szakasza egy navigációs felületet mutat be, amellyel a felhasználók gyorsan nagyíthatják és kicsinyíthetik a vezérlőtípusok csoportosított szakaszait.

példa a WinUI 3 katalógusban használt szemantikai nagyításra

Fényképek alkalmazás

Itt látható a Fényképek alkalmazásban használt szemantikai nagyítás. A fényképek hónap szerint vannak csoportosítva. Az alapértelmezett rácsnézetben egy hónap fejlécére kattintva a gyorsabb navigáció érdekében átnézhet a hónaplista nézetre.

Szemantikai nagyítás a Fényképek alkalmazásban

Szemantikai nagyítás létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a SzemanticZoom működését

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A SzemanticZoom vezérlő nem rendelkezik saját vizuális ábrázolással. Ez egy gazdagépvezérlő, amely irányítja az átmenetet 2 másik vezérlő között, amelyek biztosítják a tartalom nézeteit, általában ListView vagy GridView vezérlők között. A nézetvezérlőket a ZoomedInView és a ZoomedOutView tulajdonságaira állítja a SemanticZoom.

A szemantikai nagyításhoz szükséges 3 elem:

  • Csoportosított adatforrás. (A csoportokat a GroupStyle definíciója határozza meg nagyított nézetben.)
  • Nagyított nézet, amely az elemszintű adatokat jeleníti meg.
  • A csoportszintű adatokat megjelenítő kicsinyített nézet.

A szemantikai nagyítás használata előtt tisztában kell lennie azzal, hogyan használhat listanézetet csoportosított adatokkal. További információ: Lista nézet és rácsnézet.

Megjegyzés:

A SzemanticZoom vezérlő nagyításos nézetének és kicsinyített nézetének meghatározásához használhatja az ISemanticZoomInformation interfészt implementáló két vezérlőt. Az XAML-keretrendszer 3 vezérlőt biztosít, amelyek implementálják ezt a felületet: ListView, GridView és Hub.

Ez az XAML a SzemanticZoom vezérlő szerkezetét mutatja. Más vezérlőket is hozzárendelhet a ZoomedInView és a ZoomedOutView tulajdonságokhoz.

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

Az alábbi példák a WinUI 3 katalógusminta SzemanticZoom oldaláról származnak. A mintát letöltve megtekintheti a teljes kódot, beleértve az adatforrást is. Ez a szemantikai nagyítás egy GridView használatával biztosítja a nagyított nézetet, és egy ListView-t a lekicsinyített nézethez.

A nagyított nézet definiálása

Itt látható a Nagyítás nézet GridView vezérlője. A nagyított nézetnek csoportokban kell megjelenítenie az egyes adatelemeket. Ez a példa bemutatja, hogyan jelenítheti meg az elemeket egy rácson képpel és szöveggel.

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

A csoportfejlécek megjelenése az ZoomedInGroupHeaderTemplate erőforrásban van definiálva. Az elemek megjelenése az ZoomedInTemplate erőforrásban van definiálva.

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

A kicsinyített nézet definiálása

Ez az XAML egy ListView-vezérlőt határoz meg a kicsinyített nézethez. Ez a példa bemutatja, hogyan jelenítheti meg a csoportfejléceket szövegként egy listában.

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

A megjelenés az ZoomedOutTemplate erőforrásban van definiálva.

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

A nézetek szinkronizálása

A nagyított és a kicsinyített nézetet szinkronizálni kell, így ha egy felhasználó kiválaszt egy csoportot a kicsinyített nézetben, az adott csoport adatai a nagyítási nézetben jelennek meg. Használhat egy CollectionViewSource, vagy kódot adhat hozzá a nézetek szinkronizálásához.

Minden olyan vezérlő, amelyet ugyanahhoz a CollectionViewSource-hoz köt, mindig ugyanazzal az aktuális elemel rendelkezik. Ha mindkét nézet ugyanazt a CollectionViewSource-t használja, mint az adatforrást, a CollectionViewSource automatikusan szinkronizálja a nézeteket. További információ: CollectionViewSource.

Ha nem a CollectionViewSource használatával szinkronizálja a nézeteket, akkor a ViewChangeStarted eseményt kell kezelnie, és szinkronizálnia kell az eseménykezelő elemeit az itt látható módon.

<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