Compartir a través de

Control de vista dividida

  • Artículo

Un control de vista dividida tiene un panel expandible o contraíble y un área de contenido.

API importantes: clase SplitView

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

Ejemplo de vista dividida de Microsoft Edge

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

  • Overlay

    El panel se oculta hasta que se abre. Cuando se abre, el panel superpone el área de contenido.

  • Alineado

    El panel siempre está visible y no superpone el área de contenido. Las áreas de panel y contenido dividen el espacio en pantalla disponible.

  • CompactOverlay

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

  • CompactInline

    Una parte estrecha del panel siempre está visible en este modo, lo que es lo suficientemente ancho como para mostrar iconos. El ancho del panel cerrado predeterminado es 48px, que se puede modificar con CompactPaneLength. Si se abre el panel, reducirá el espacio disponible para el contenido, lo que hará que el contenido salga 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
WinUI Gallery

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

Creación de una vista dividida

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>

Obtener el código de ejemplo