Panel desplegable WPF – Silverlight


Muchas veces necesitamos en nuestra aplicación un panel que al presionarlo muestre su contenido y luego vuelva a ocultarse.

Lo que vamos a hacer es crear con animaciones un panel donde con un botón podemos mostrar y ocultar su contenido:

Antes:

panel1

Después:

 panel2

Manos a la obra!

Creamos un nuevo proyecto en WPF, (este ejemplo puede ser usado en Silverlight), adicionamos un control Border , la posición del Panel varía según nuestros requerimientos, para empezar crearemos uno que se encuentre arriba y al desplegarse se despliegue hacia abajo.

Las propiedades del Border:

 <Border Height="30" Width="200" CornerRadius="10" Margin="115,0,125,0" Name="border1" VerticalAlignment="Top"

  BorderBrush="Green" BorderThickness="2" Background="LightGreen">

</Border>

Desde el código xaml, agregamos dentro del Control Border un Control Grid, el cuál será nuestro contenedor principal, recordemos que el Control Border no es un contenedor y solo puede tener un control anidado. La grilla tendrá 1 columna y 2 filas, una fila será la que tendrá nuestro botón para activar el panel y la otra fila tendrá lo que queremos mostrar.

Agregamos un ToggleButton, para ser el que active nuestro panel, los botones ToggleButton funciona como un checkbox fusionado con un botón, tiene dos estados: Checked y Unchecked, el primer estado se activa cuando se presiona el botón, el botón queda como con un efecto presionado y el segundo estado se activa cuando se vuelve a presionar, el botón vuelve a su estado inicial:

 ToggleButton

El código xaml al adicionar la grilla y el ToggleButton es el siguiente:

<Border Height="30" Width="200" CornerRadius="10" Margin="115,0,125,0" Name="border1" VerticalAlignment="Top"

                          BorderBrush="Green" BorderThickness="2" Background="LightGreen">

                  <Grid Margin="3">

                        <Grid.ColumnDefinitions>

                             <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                             <RowDefinition Height="10*"></RowDefinition>

                             <RowDefinition Height="20"></RowDefinition>

                        </Grid.RowDefinitions>

                        <ToggleButton Grid.Row="1" Height="18" Width="180" VerticalAlignment="Top" Name="boton_activar"/>

                  </Grid>

            </Border>

Ahora vamos a agregar los disparadores al control Border, para que al activar el botón el tamaño del Border cambie, antes de la adición del Grid, vamos a crear los Triggers, o disparadores, estos nos permiten desencadenar una acción cuando ocurre algún evento, momento en el cual nos encargaremos de hacer la animación.

<Border.Triggers>

                        <EventTrigger SourceName="boton_activar" RoutedEvent="ToggleButton.Checked">

                        </EventTrigger>

                  </Border.Triggers>

Al EventTrigger le decimos que la fuente que ejecutara el disparador es el boton_activar y el evento es al cambiar el estado a chequeado.

Agregamos un StoryBoard, la pequeña animación que haremos será que al presionar el botón, el ancho y el alto del border cambien:

<Border.Triggers>

   <EventTrigger SourceName="boton_activar" RoutedEvent="ToggleButton.Checked">

      <BeginStoryboard>

          <Storyboard>

             <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="200" />

             <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Width">

                <LinearDoubleKeyFrame Value="300" KeyTime="0:0:0.2"/>

                <LinearDoubleKeyFrame Value="320" KeyTime="0:0:0.24"/>

                <LinearDoubleKeyFrame Value="300" KeyTime="0:0:0.3"/>

             </DoubleAnimationUsingKeyFrames>

           </Storyboard>

       </BeginStoryboard>

    </EventTrigger>

</Border.Triggers>

Lo que hicimos es crear primero una animación (DoubleAnimation) que durara solo 0.2 segundos, tendrá como blanco la propiedad Height y lo cambiara al valor de 200:

<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height" To="200" />

Después creamos una animación usando KeyFrames, iniciara a los 0.2 segundos y durara 0.3 segundos, y el blanco de la animación será la propiedad Width, la animación usando KeyFrames será hecho en 3 Frames:

–          El primer KeyFrame en 0.2 segundos cambia el ancho a 300

–          El segundo KeyFrame a los 0.24 segundos cambia el ancho a 320

–          El tercer KeyFrame a los 0.3 segundos cambia el ancho a 300

Las animaciones en XAML se pueden hacer de dos maneras, una usando el DoubleAnimation, que solo tienen un valor de inicio (from) y otro de fin (to, by), asi se crea una animación  desde un punto de origen a uno final. El otro es el DoubleAnimationUsingKeyFrames. Con el DoubleAnimationUsingKeyFrames se encapsulan una serie de movimientos, o sea, se crea una animación tomando varios inicios y varios finales.

Podemos probar y veremos que primero cambia la altura, luego el ancho cambia y hay un efecto de resorte, esto se logra con los 3 KeyFrames.

 panel3

Ahora vamos a hacer el efecto contrario, creando otro EventTrigger para cuando el botón cambie a estado Unchecked, el border vuelva al estado inicial:

<EventTrigger SourceName="boton_activar" RoutedEvent="ToggleButton.Unchecked">

      <BeginStoryboard>

            <Storyboard>

                <DoubleAnimationUsingKeyFrames  Duration="0:0:0.2" Storyboard.TargetProperty="Width">

                  <LinearDoubleKeyFrame Value="200" KeyTime="0:0:0.2" />

                </DoubleAnimationUsingKeyFrames>

                <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Height">

                    <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0.2" />

                 </DoubleAnimationUsingKeyFrames>

              </Storyboard>

        </BeginStoryboard>

</EventTrigger>

Si probamos podemos ver que el efecto, al presionar el botón el border cambia de tamaño y cuando se vuelve a presionar el botón, el border vuelve al tamaño inicial :P.

Para introducir objetos al Panel, podemos crear un StackPanel, DockPanel o cualquier otro contenedor dentro de la fila 0 de la grilla que se encuentra en el border, y dentro de estos contenedores introducimos lo que se nos ocurra:

 panel4

Como abre bocas, adicione un efecto al Control Border, y al texto, para que tuviera un efecto de brillo y un ToolTip al ToogleButton para que mostrara información cada vez que paso el Mouse sobre el botón.

Para cambiar la dirección del panel, es tener en cuenta: ancho, alto, para modificar los disparadores y verificar la grilla, porque no siempre tendremos filas, en algunos casos necesitamos es columnas.

Para descargar el archivo XAML y adicionarlo a sus proyectos AQUI.

7 pensamientos en “Panel desplegable WPF – Silverlight

  1. Cordial Saludo Ing. Martin
    Abuso de su amabilidad y disposición de compartir conocimiento, lo molesto con lo siguiente a ver si me puede orientar, deseo implementar en mi sitio un menú de navegación visualmente atractivo, ¿Silverlight?
    Pero que sea compatible con todos los navegadores, además que no sea ignorado por los robots de los buscadores, pues tengo algo en Flash, pero por lo que he leído, esta tecnología esta muy obsoleta en cuanto a que es totalmente ignorada por los buscadores y es poco usable, pues no permite implementar las alt=” “, gracias.

    PD: Muy bueno este articulo, ; )

  2. Pingback: Menú Acordeón deslizante – WPF | Escarbando Código

  3. hola muy buen blog en verdad, yo soy diseñadora gráfica pero estoy aprendiendo sobre animaciones y diseños en WPF soy principiante en este mundo sabes de algunos tutoriales o alguna info que me pueda ayudar ..!!! en verdad te lo agradecería mucho porque eso de programar en serio es un arte!

    • Hola Laura, me alegra que te haya gustado, aunque hace rato no escribo nada :(, pues para animaciones y de WPF, con tu perfil de diseñadora, te recomiendo que vayas investigando o conociendo Blend para Visual Studio, Blend es una herramienta que te permite crear animaciones, diseños, estilos, y demás cosas para WPF, CSS3 y HTML5, sin necesidad de escribir mucho código :). De todas formas si necesitas algo específico puedes preguntarme y con gusto te ayudo

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s