Contrôle de mode fractionné

  • Article

Un contrôle de mode Fractionné inclut un volet pouvant être développé/réduit ainsi qu’une zone de contenu.

API importantes : SplitView, classe

Voici un exemple de l’application Microsoft Edge utilisant SplitView pour afficher son Hub.

Exemple de mode Fractionné Microsoft Edge

La zone de contenu du mode Fractionné est toujours visible. Le volet peut être développé ou réduit ou rester ouvert, et peut s’afficher à gauche ou à droite de la fenêtre d’application. Le volet comporte quatre modes :

  • Overlay

    Le volet est masqué jusqu’à ce qu’il soit ouvert. Lorsqu’il est ouvert, il recouvre la zone de contenu.

  • En ligne

    Le volet est toujours visible et ne recouvre pas la zone de contenu. Les zones de volet et de contenu divisent l’espace disponible à l’écran.

  • CompactOverlay

    Une mince partie du volet est toujours visible à l’état compact dans ce mode, sa largeur étant juste suffisante pour afficher les icônes. Par défaut, la largeur du volet fermé est de 48 pixels et peut être modifiée avec CompactPaneLength. Si le volet est ouvert, il se superpose à la zone de contenu.

  • CompactInline

    Une mince partie du volet est toujours visible à l’état compact dans ce mode, sa largeur étant juste suffisante pour afficher les icônes. Par défaut, la largeur du volet fermé est de 48 pixels et peut être modifiée avec CompactPaneLength. Si le volet est ouvert, l’espace disponible pour le contenu est réduit, le poussant en dehors.

Est-ce le contrôle approprié ?

Le contrôle de mode Fractionné peut servir à créer toute expérience « à tiroirs » (c’est-à-dire que les utilisateurs peuvent ouvrir et fermer le volet supplémentaire). Par exemple, vous pouvez utiliser SplitView pour créer le modèle Liste/Détails.

Si vous voulez créer un menu de navigation avec un bouton développer/réduire et une liste d’éléments de navigation, utilisez le contrôle NavigationView.

Exemples

Galerie WinUI 2
Galerie WinUI

Si vous avez installé l’application WinUI 2 Gallery , cliquez ici pour ouvrir l’application et voir SplitView en action.

Créer une vue en mode Fractionné

Voici un contrôle SplitView avec un volet ouvert, qui s’affiche en ligne en regard du contenu.

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

Obtenir l’exemple de code