Compartir a través de

Control de vista dividida

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 utilizando SplitView para mostrar su Hub.

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:

  • Superposición

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

  • Inline

    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 compilar el patrón de lista y detalles .

Si desea crear un menú de navegación con un botón expandir o contraer y una lista de elementos de navegación, use el control NavigationView .

Examples

Galería de WinUI 2
Galería de WinUI

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>

Obtención del código de ejemplo

  • Last updated on