Controllo doppia visualizzazione

  • Articolo

Un controllo doppia visualizzazione ha un riquadro espandibile/comprimibile e un'area di contenuto.

API importanti: classe SplitView

Ecco un esempio dell'app Microsoft Edge che usa SplitView per visualizzare il relativo elemento Hub.

Microsoft Edge split view example

L'area di contenuto di una doppia visualizzazione è sempre visibile. Il riquadro può espandersi e comprimersi o rimanere in uno stato aperto e può presentarsi dal lato sinistro o destro di una finestra dell'app. Il riquadro ha quattro modalità:

  • Overlay

    Il riquadro rimane nascosto fino all'apertura. Quando è aperto, il riquadro si sovrappone all'area di contenuto.

  • Inline

    Il riquadro è sempre visibile e non si sovrappone all'area del contenuto. Il riquadro e le aree di contenuto dividono l'area di visualizzazione dello schermo.

  • CompactOverlay

    Una parte stretta del riquadro, sufficiente per mostrare le icone, è sempre visibile in questa modalità. La larghezza predefinita del riquadro chiuso è 48px, che è possibile modificare con CompactPaneLength. Se il riquadro è aperto, si sovrappone all'area di contenuto.

  • CompactInline

    Una parte stretta del riquadro, sufficiente per mostrare le icone, è sempre visibile in questa modalità. La larghezza predefinita del riquadro chiuso è 48px, che è possibile modificare con CompactPaneLength. Se il riquadro è aperto, ridurrà lo spazio disponibile per il contenuto, escludendolo.

È il controllo giusto?

Il controllo doppia visualizzazione può essere usato per creare un'esperienza di tipo "cassetto" in cui gli utenti possono aprire e chiudere il riquadro supplementare. Ad esempio, è possibile usare SplitView per compilare il modello elenco/dettagli.

Per compilare un menu di spostamento con un pulsante Espandi/Comprimi e un elenco di elementi di spostamento, usa il controllo NavigationView.

Esempi

Raccolta WinUI 2
WinUI Gallery

Se l'app Raccolta WinUI 2 è installata, fare clic qui per aprire l'app e vedere SplitView in azione.

Creare una doppia visualizzazione

Ecco un controllo SplitView con un riquadro aperto visualizzato inline accanto al contenuto.

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

Scaricare il codice di esempio