Mostrar un Scene desde otra escena

Introducción:

Como ya sabrás (al menos si lo has leído en el glosario), una escena (scene) es una presentación creada en XAML, y es como básicamente la llaman en la documentación de Expression Interactive Designer, que como también sabes es una herramienta que nos permite diseñar de forma gráfica nuestras aplicaciones para WPF.

El problema fundamental de las escenas es que en realidad no son ventanas, al menos en el sentido de que no son objetos Window, ya que un objeto Window tiene una serie de características que no tiene un "scene". Una escena normalmente está formada por otros tipos "contenedores" basados en el objeto Panel, como Grid o Canvas.

Cambiar de una ventana a otra con objetos de tipo Window es sencillo, ya que se hace de la misma forma que habitualmente usamos en las versiones anteriores de .NET Framework, que como sabe proporcionan dos métodos: Show y ShowDialog. Pero los objetos derivados de Panel no tienen esos métodos ni esa funcionalidad, así que, en este artículo veremos cómo definir dos "escenas" y cómo haremos para mostrar la segunda desde la primera (la cual se muestra automáticamente al iniciar la aplicación).

Crear un proyecto con Expression Interactive Designer

Para este ejemplo (y otros que iré publicando) usaremos el Expression Interactive Designer, (July 2006 CTP), ya que nos permite diseñar de forma fácil (y espectacular) nuestras aplicaciones para WPF, además de que también nos permite crear código tanto con C# como con Visual Basic.

¿Por qué no usar el Visual Studio 2005?
Porque actualmente (Agosto de 2006) la versión del "complemento" para Visual Studio 2005 que permite crear proyectos de WinFX no funciona correctamente con la versión del CTP de Julio 2006 de .NET Framework 3.0 y aunque por medio de trucos podemos instalarla, no es operativa, al menos a la hora de poder diseñar interfaces gráficos de usuario, por eso vamos a usar el Interactive Designer.

Los pasos a seguir para crear un proyecto con ExpressionID son los siguientes:

1. Abre el Interactive Designer, por defecto se crea un proyecto en blanco (si es que le has quitado lo de mostrar la ventana de inicio).

2. Por defecto, el lenguaje usado es C#, aunque vayas a usar ese lenguaje para escribir el código, por favor sigue los siguientes pasos, así no nos liaremos.

3. Cierra el proyecto y desde el menú File selecciona New project...

4. Te mostrará un cuadro de diálogo para crear un nuevo proyecto, te da dos opciones:
   Standard Application (.exe) y Control Library
   Deja la primera seleccionada.

5. En el nombre del proyecto escribe: DosScene, (yo voy a usar dos nombres distintos para cada uno de los dos lenguajes: DosScene_CS para C# y DosScene_VB para Visual Basic).
   (Puedes cargar más de un proyecto en la misma instancia del Interactive Designer simplemente añadiendo un nuevo proyecto, pero eso te lo explico en otra ocasión con más detalle).

6. Elige el lenguaje a usar, están disponibles C# y Visual Basic, tal como puedes ver en la figura 1.

Figura 1. Crear un proyecto

7. Pulsa OK.

8. Se creará una "escena" vacía, que tendrá por nombre Scene1 y el fichero asociado se llamará igual, pero con la extensión .xaml.

9. Para añadir la otra escena, desde el menú File, selecciona New y de las opciones mostradas en ese menú selecciona Scene.

10. Ahora tendremos varios ficheros en el "explorador de proyectos", (ver figura 2), pero por ahora solo nos interesan las dos escenas que hemos creado, aunque estarán abiertas, por tanto las podemos seleccionar desde las fichas de la ventana principal.

Figura 2. El proyecto y los elementos

11. Ahora añadiremos a la primera escena un botón desde el que mostraremos la otra escena.

12. Los controles que podemos usar están en la ventana Library que está justo debajo de Projects.

13. Y debido a que las escenas que añade el Interactive Designer están basadas en un Grid, el botón no lo podrás mover del sitio en el que estará, que será en la esquina superior izquierda.
    (En realidad si lo puedes mover, pero no es una tarea "sencilla" o al menos no tan evidentemente sencilla como lo es con el diseñador de formularios de Visual Studio).

14. Si quieres ponerlo en otra parte, tendrás que añadir nuevas filas y columnas.

15. Esto lo puedes hacer de dos formas, en modo diseño y por código.

16. En modo de diseño solo tienes que llevar el cursor del ratón a los bordes que hay en la parte superior e izquierda del contenedor (unas líneas azules gruesas) y te mostrará una línea roja (ver la figura 3), haz click donde quieras dejarla y habrás creado la fila o la columna.

17. Puedes añadir tantas filas o columnas como creas oportuno.

Figura 3. Crear filas y columnas en el Grid

18. Para crear esas filas y columnas desde código, lo haremos en XAML, para ello debes pulsar en la ficha que hay en la parte inferior izquierda que muestra XAML Code, la otra (Design) es para cambiar a modo diseño.

19. Por defecto ya habrá creada una definición de filas y columnas, porque como mínimo debe haber una fila y una columna.

20. El código que tenemos actualmente te dará una idea de cómo debes hacerlo, es tan sencillo como añadir tantos <ColumnDefinition/> como columnas queramos tener.
    Lo mismo es aplicable para las filas, añadimos tantos <RowDefinition/> como queramos.
    En mi caso he dejado tres de cada.

21. Una vez que tenemos más de una fila y columna, podemos mover el botón a la parte que queramos.

22. Si queremos cambiar el tamaño de la "escena", también podemos hacerlo arrastrando por los bordes que hay en la parte inferior, la derecha y en la esquina inferior derecha.

23. Una vez que hayas añadido las filas y columnas y cambiado el tamaño del Grid, puedes mover el botón, por ejemplo a la celda del centro.

24. Para cambiar el texto mostrado, debes ir a la ventana de propiedades, que seguramente estará oculta o "replegada" (dependiendo del espacio que tengas libre).
    Si no se muestran las propiedades, pulsa en el cuadradito que hay junto a la "x" de esa ventana (todas las ventanas del Interactice Designer tienen esa característica de replegarse cuando hace falta espacio en el área de trabajo o de desplegarse cuando lo necesitamos).

25. Selecciona el botón y busca la propiedad Content (ya es el tercer cambio en la propiedad que muestra el texto de un botón, empezamos con Caption, después Text y ahora Content, en fin...), y escribe el texto Mostrar Scene2.

26. Cuando pulses Intro verás que el botón se adapta al contenido y se hace más grande.

27. Una vez que tenemos esto (ver la figura 4), vamos a guardar el proyecto, ya que como estamos trabajando con algo que ni siquiera es una beta, pues puede darnos problemas.

Figura 4. La escena Scene1

28. En el menú File, selecciona Save All, y como resulta que aún no lo habíamos guardado, nos pregunta dónde lo queremos guardar y esas cosas (ver figura 5). Dile dónde quieres guardarlo y así después solo tendrás que elegir esa opción y no te preguntará más.

Figura 5. Guardar el proyecto

29. En la segunda escena, vamos a añadir una etiqueta y le pondremos algunos efectos de reflejo y otras monerías, aunque debo decirte que esos efectos y demás los he copiado y adaptado de uno de los ejemplos que trae el Expression Interactive Designer, en particular del ejemplo Hyperbar, que por cierto tiene unos efectos muy chulos (o si lo prefieres: cool o guais).
    En la figura 6 tienes la captura de la escena en modo de diseño.

Figura 6. La segunda escena en modo diseño

30. Si te bajas el código de ejemplo y quieres seleccionar la etiqueta para cambiarle las propiedades o el efecto de colores, etc. Debes saber que cuando hay controles dentro de otros controles, no se pueden seleccionar fácilmente, para ello tendrás que pulsar con el botón derecho (o izquierdo si eres zurdo) y del menú contextual seleccionar la opción Set Current Selection, selecciona el control que quieres modificar, tal como puedes ver en la figura 7.

Figura 7. Seleccionar un objeto en concreto

31. Ya está bien de tanto diseñador... Ahora vamos a escribir algo de código, aunque poco, esa es la verdad.

32. Vamos a relacionar el evento Click del botón de la Scene1 con código.

33. Selecciona el Scene1 y muestra el código XAML (ya sabes, como te comenté en el punto 18).

34. Busca la definición del botón y escribe dentro del tag que lo define lo siguiente:
    Click="btnClick"
    Por ejemplo antes del cierre de la definición: />

35. Para los de Visual Basic: Con Visual Basic no hace falta hacer eso si no quieres, ya que desde el código puedes indicar cual es el evento a controlar añadiendo Handles Button.Click.

36. Ahora tendrás que mostrar el código de esa escena y escribir el código para ese botón, que según estés usando Visual Basic o C# será uno de los dos que te muestro:

Private Sub btnClick( sender As Object, e As RoutedEventArgs) _
            Handles Button.Click

    Dim nw As NavigationWindow = New NavigationWindow()
    nw.Navigate(New Uri("Scene2.xaml", UriKind.Relative))
    nw.Title = "Saludando que es gerundio"
    ' Asignamos el tamaño que queremos que tenga
    ' porque sino, se muestra a lo grande:
    nw.Width = 300
    nw.Height = 300

    ' Lo mostramos con Show o ShowDialog
    'nw.ShowDialog()
    nw.Show()

End Sub

private void btnClick(object sender, RoutedEventArgs e)
{
    // Crear una ventana indicando la URL de la escena
    NavigationWindow nw = new NavigationWindow();
    nw.Navigate(new Uri("Scene2.xaml", UriKind.Relative));
    nw.Title = "Saludando que es gerundio";
    // Asignamos el tamaño que queremos que tenga
    // porque sino, se muestra a lo grande:
    nw.Width = 300;
    nw.Height = 300;
    
    // Lo mostramos con Show o ShowDialog
    //nw.ShowDialog();
    nw.Show();
}

37. Lo que hacemos en ese código es crear una ventana de navegación, de esa forma podremos manipularla como a cualquier ventana.

38. Para indicar que es lo que queremos mostrar en esa ventana, le decimos el nombre del fichero .xaml y aunque esté compilado (y no exista físicamente en el disco cuando se use la aplicación), se mostrará esa escena.

39. Asignamos los valores del ancho y alto, porque si no, se mostrará en tamaño grande (creo que el predeterminado es 640x480).

40. Si quieres que sea una ventana modal, usa ShowDialog, sino, usa Show, pero debes tener en cuenta que podrás seguir usando la ventana primera al mismo tiempo.

41. Si ahora ejecutas (o pruebas) el proyecto verás que al pulsar en el botón se muestra la segunda escena, pero si te fijas, la primera se hace muy pequeña.

42. Para solucionar ese "efecto", debes indicar el tamaño mínimo del Scene1, para hacerlo, debes añadir estas dos propiedades en la definición del Grid del fichero Scene1.xaml, por ejemplo, justo antes del cierre de la definición:
    MinWidth="290" MinHeight="158"
    El tamaño indicado será el que tenga el grid asignado en las propiedades Width y Height.

43. Si has usado el método Show para mostrar la segunda escena, puedes comprobar que al cerrar la ventana principal no se cierra la otra.

44. Para cerrar todas las ventanas que haya abierta cuando se cierre una de las escenas, (normalmente la que hemos usado de inicio), puedes escribir el siguiente evento, en este caso lo escribiremos en el fichero de código de Scene1.xaml:

Private Sub Scene1_Unloaded( ByVal sender As Object, _
                ByVal e As RoutedEventArgs) Handles Me.Unloaded
    ' Cerrar todas las ventanas cargadas
    For Each w As Window In Application.Current.Windows
        If w.IsLoaded Then
            w.Close()
        End If
    Next
End Sub

// En C# debes añadir el manejador de eventos
// Escribe esto en el constructor de la clase,
// después de InitializeComponent();
this.Unloaded += new RoutedEventHandler(Scene1_Unloaded);


private void Scene1_Unloaded(object sender, RoutedEventArgs e)
{
    // Cerrar todas las ventanas cargadas
    foreach(Window w in Application.Current.Windows)
    {
        if(w.IsLoaded)
        {
            w.Close();
        }
    }
}

45. En ese código, lo que hacemos es recorrer todas las ventanas de la aplicación, ventanas a las que podemos acceder por medio de Application.Current.Windows, comprobamos si la ventana está cargada, y de ser así, la cerramos.

46. Para los de C#: En C# debes asignar el manejador del evento de cierre de la ventana (o escena) principal añadiéndolo tal como te indico en el código, es decir, definiéndolo después de que se hayan inicializado todos los controles del "formulario".

47. Y esto es todo... bueno, solo mostrarte como quedaría la segunda escena en tiempo de ejecución.

Figura 8. La segunda escena en ejecución

Te resumo un poco lo que hemos visto:

• Crear un proyecto de Expression Interactive Designer
• Añadir un nuevo Scene
• Definir filas y columnas en un Grid
• Asignar eventos a los controles, tanto por medio de .xaml como por código
• Mostrar un Scene usando un objeto NavigationWindow
• Cerrar todas las ventanas abiertas

Si quieres el código de los dos proyectos (el de Visual Basic y C#), los puedes bajar.

Espero que te sea de utilidad.

Nos vemos.
Guillermo

Espacios de nombres usados en el código de este artículo:

System.Windows
System.Windows.Controls
System.Windows.Media
System.Windows.Navigation