Control de vista en dos paneles

  • Artículo

Un control de vista en dos paneles tiene un panel expandible y contraíble y un área de contenido.

API importantes: clase SplitView

Este es un ejemplo de la aplicación Microsoft Edge con SplitView para mostrar su hub.

Ejemplo de vista en dos paneles de Microsoft Edge

Un área de contenido de vista en dos paneles siempre está visible. El panel puede expandirse y contraerse, o permanecer en un estado abierto, y puede presentarse desde el lado izquierdo o desde el lado derecho de una ventana de la aplicación. El panel tiene cuatro modos:

  • Overlay

    El panel está oculto hasta que se abre. Cuando se abre, el panel se superpone al área de contenido.

  • Alineado

    El panel siempre está visible y no se superpone al área de contenido. Las áreas del panel y el contenido dividen la superficie disponible de la pantalla.

  • CompactOverlay

    Una parte estrecha del panel siempre está visible en este modo, que es lo suficientemente ancho como para mostrar iconos. El ancho del panel cerrado predeterminado es de 48 px, que se puede modificar con CompactPaneLength. Si el panel se abre, se superpondrá al área de contenido.

  • CompactInline

    Una parte estrecha del panel siempre está visible en este modo, que es lo suficientemente ancho como para mostrar iconos. El ancho del panel cerrado predeterminado es de 48 px, que se puede modificar con CompactPaneLength. Si el panel se abre, reducirá el espacio disponible para el contenido para apartarlo de su camino.

¿Es este el control adecuado?

El control de vista dividida se puede usar para crear cualquier experiencia de "cajón" donde los usuarios puedan abrir y cerrar el panel complementario. Por ejemplo, puede usar SplitView para generar el patrón de lista y detalles.

Si quieres crear un menú de navegación con un botón de expandir/contraer y una lista de elementos de navegación, utiliza el control NavigationView.

Ejemplos

WinUI 2 Gallery
Galería de WinUI

Si tienes instalada la aplicación WinUI 2 Gallery , haz clic aquí para abrir la aplicación y ver SplitView en acción.

Crear una vista en dos paneles

Este es un control SplitView con un panel abierto que aparece en línea junto al contenido.

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

Obtención del código de ejemplo