Controllo doppia visualizzazione
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.
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 | |
|---|---|
 |
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
- Esempio di Raccolta WinUI 2: visualizza tutti i controlli XAML in un formato interattivo.
