13 - Layout (SplitView)

El control SplitView nos facilita implementar un panel plegable y un área de contenido. El área de contenido siempre es visible, el panel puede estar oculta, expandirse o permanecer en un estado semiabierto.

Normalmente en el panel que se encuentra cerrado y lo abrimos al presionar un botón nos muestra una serie de opciones para que al ser presionadas cambie el área de contenido.

Ejemplo de SplitView contraído:

SplitView expandido conteniendo una serie de botones:

Problema

Implementar una aplicación que muestre un menú de opciones que se encuentre oculto y que se expanda al ser presionado un botón similar a las imágenes anteriores.

Como primer paso creamos un nuevo proyecto llamado "Proyecto17" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.

El código XAML para implementar el SplitView es:

<Page
    x:Class="Proyecto17.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto17"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0">
            <Button x:Name="boton6" Content="Opciones" Click="boton6_Click" />
        </StackPanel>

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <SplitView Name="splitView1" DisplayMode="Overlay">
                <SplitView.Pane>
                    <StackPanel Background="#ffff8080">
                        <Button x:Name="boton1" Content="boton 1"  HorizontalAlignment="Stretch"/>
                        <Button x:Name="boton2" Content="boton 2"  HorizontalAlignment="Stretch"/>
                        <Button x:Name="boton3" Content="boton 3"  HorizontalAlignment="Stretch"/>
                        <Button x:Name="boton4" Content="boton 4"  HorizontalAlignment="Stretch"/>
                        <Button x:Name="boton5" Content="boton 5"  HorizontalAlignment="Stretch"/>
                    </StackPanel>
                </SplitView.Pane>
                <SplitView.Content>
                    <TextBlock Text="Area de contenido." />
                </SplitView.Content>
            </SplitView>
        </StackPanel>

    </Grid>
</Page>

Un SplitView tiene dos zonas fundamentales el panel (Pane) y el contenido (Cotent):

            <SplitView Name="splitView1" DisplayMode="Overlay">
                <SplitView.Pane>
                  ...
                </SplitView.Pane>
                <SplitView.Content>
                  ...
                </SplitView.Content>
            </SplitView>

En el área Pane definimos los objetos visuales que normalmente se encontrarán ocultos. Para que permanezcan ocultos debemos iniciar la propedad DisplayMode con el valor "Overlay".

La propiedad DisplayMode es fundamental para indicar el comportamiento del SplitView, los valores posibles son:

• Overlay: El panel está oculto hasta que se abre. El contenido es tapado parcialmente por el panel.
• Inline: El panel está oculto hasta que se abre. El contenido es desplazado hacia la derecha y no se tapa.
• CompactOverlay: Parte del panel está siempre visible en este modo (por lo general 48 píxeles) El contenido es tapado parcialmente por el panel cuando se abre por completo.
• CompactInline: Parte del panel está siempre visible en este modo (por lo general 48 píxeles) El contenido es desplazado hacia la derecha y no se tapa.

El otro área fundamental de un SplitView es la de contenido:

                <SplitView.Content>
                  ...
                </SplitView.Content>

Dentro de cada zona del SplitView podemos disponer controles visuales dependiendo de las necesidades de nuestra aplicación.

El código que debemos implementar para expandir o contraer el SplitView es:

        private void boton6_Click(object sender, RoutedEventArgs e)
        {
            if (splitView1.IsPaneOpen == true)
                splitView1.IsPaneOpen = false;
            else
                splitView1.IsPaneOpen = true;
        }

Cambiamos el estado del SplitView según el estado de la propiedad IsPaneOpen.

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto17.zip

Problema propuesto

1. Modificar el problema anterior agregando un control de tipo ComboBox con los cuatro valores que puede tomar la propiedad DisplayMode del SplitView. Cada vez que se cambie modificar la propiedad del SplitView y probar su nuevo funcionamiento.
   La interfaz visual debe ser similar a esta:
   
   

Solución

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto18.zip

Retornar