Partager via

Contrôle d’affichage fractionné

Un contrôle de vue fractionnée comporte un volet extensible/réductible et une zone de contenu.

API importantes : classe SplitView

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

Exemple d’affichage fractionné Microsoft Edge

La zone de contenu d’une vue fractionnée est toujours visible. Le volet peut s'agrandir et se réduire ou rester ouvert, et s'afficher à gauche ou à droite d'une fenêtre d'application. Le volet comporte quatre modes :

  • Superposition

    Le volet est masqué jusqu’à l’ouverture. Lorsqu’il est ouvert, le volet superpose la zone de contenu.

  • en ligne

    Le volet est toujours visible et ne superpose pas la zone de contenu. Le volet et les zones de contenu divisent l’espace d’écran disponible.

  • CompactOverlay

    Une partie étroite du volet est toujours visible dans ce mode, ce qui est assez large pour afficher les icônes. La largeur du volet fermé par défaut est 48px, qui peut être modifiée avec CompactPaneLength. Si le volet est ouvert, il superpose la zone de contenu.

  • CompactInline

    Une partie étroite du volet est toujours visible dans ce mode, ce qui est assez large pour afficher les icônes. La largeur du volet fermé par défaut est 48px, qui peut être modifiée avec CompactPaneLength. Si le volet est ouvert, il réduit l’espace disponible pour le contenu, déplaçant le contenu hors de sa place.

Est-ce le contrôle approprié ?

Le contrôle d’affichage fractionné peut être utilisé pour créer n’importe quelle expérience de « tiroir » où les utilisateurs peuvent ouvrir et fermer le volet supplémentaire. Par exemple, vous pouvez utiliser SplitView pour générer le modèle liste/détails .

Si vous souhaitez 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 .

Examples

WinUI pour la galerie UWP
Galerie WinUI

Si l’application WinUI pour la galerie UWP est installée, cliquez ici pour ouvrir l’application et voir SplitView en action.

Créer une vue fractionnée

Voici un contrôle SplitView avec un volet ouvert qui apparaît de façon imbriquée à côté 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

  • Last updated on