Introducción a WPF, y creación de una aplicación WPF 3-D, parte 4 de N

 

Vale, qué tal de nuevo a todos?? Espero que estén bien 😉

Bien, ya es tiempo de que empecemos a crear nuestra aplicación 3-D con WPF y Expression Blend, así que comencemos.

Antes que nada, deben de tener instalado el Framework 3.5; ok ok, para todos los designers, quiero dejar en claro que no se debe de tener instalado el Visual Studio 2008, para hacer uso de estas tecnologías, basta que te descargues el Framework 3.5 y podrás crear y ver aplicaciones WPF en tu computadora. Para los que no tienen el Framework 3.5, aquí está completo y en descarga directa:

Descargar Microsoft .NET Framework 3.5

Ahora bien, lo siguiente es tener instalador Microsoft Expression Blend; ahora mismo se encuentra de forma gratuita la versión 2.5 March Preview, a cual utilizaremos para nuestras demos. De igual manera si no lo tienes instalado aquí está el link de descarga:

http://www.microsoft.com/downloads/details.aspx?FamilyId=32A3E916-E681-4955-BC9F-CFBA49273C7C&displaylang=en

Ok, una vez que tengas todo instalado, estás listo para que empecemos. Ahora, abre Microsoft Expression Blend y verás una pantalla como esta:

Esta es la pantalla de bienvenida, donde se te pregunta qué deseas hacer, si quieres trabajar con proyectos, si quieres Ayuda del Programa o bien si solo quieres ver algunos ejemplos de prueba que trae Expression Blend. En nuestro Caso seleccionaremos donde dice «New Project…», lo cual nos mandará algo como lo que sigue:

Primero, tenemos que seleccionar qué tipo de proyecto quieres crear, enumeraremos cada uno de izquierda a derecha:

WPF application(.exe): Es la aplicación de Escritorio, algunos dicen que el reemplazo de los proyectos Windows Forms.

WPF Control Library: Es un User Control, es decir un elemento que podremos reutilizar en el futuro tantas veces como queramos usarlo, este control no es modificable una vez insertado en el proyecto, es lo equivalente en ASP.NET a un Web User Control.

Silverlight 1 Site: Para los que no sepan, silverlight es la nueva tecnología Microsoft para crear RIAS sorprendentes. Algunos dicen que es la competencia de Flash, en sí, como dice Rubén Mugártegui es la tecnología para que el usuario sienta la experiencia del usuario como si estuviera trabajando con una aplicación WPF de escritorio. Este tipo de aplicación (versión 1) utiliza JavaScript como lenguaje de programación.

Silverlight 2 Application: Aplicación silverlight versión 2.0, entre las principales diferencias es el soporte de .NET, para ser usado como lenguaje de programación.

Ahora bien, dicho todo esto, seleccionaremos sobre WPF Application, le pondremos el nombre que gustemos (Yo le he puesto Aplicacion-3D), selecionamos la ruta(Por default, Blend la manda a la que está en la imágen), seleccionamos el lenguaje (VB O C#) y finalmente, el Framework que utilizaremos, en nuestro caso será el 3.5, finalmente damos sobre OK.

Ahora, esta es la pantalla que aparece al darle OK, como podemos observar, en nuestra sección de «Objects and TimeLine» por defecto nos pone un elemento Window, el cual solo puede contener un elemento, por lo que debemos de poner algún contenedor para que este a su vez pueda contener mas elementos. Expression Blend por defecto nos pone una grilla, llamada LayoutRoot, o capa raíz, sobre la cual podremos empezar a acomodar nuestros elementos.

Si nos damos cuenta, sobre nuestro lado izquierdo y superior de la grilla encontramos unas líneas azules, sobre las cuales, si pasamos el mouse encima de estas, aparecerá una línea naranja:

 

Al hacer click sobre un punto en específico, quedará marcada la línea naranja, pues bien, esto no es mas ni menos que lo equivalente que estar definiendo los Grid.ColumnDefinition y los Grid.RowDefinition en código. Como expression Blend es pensado para diseñadores, esto es mucho mas fácil de hacer. Ahora bien, lo que haremos será crear una definición, mas o menos a esta distancia:

Ok, ahora iremos a nuestra Toolbox y seleccionaremos la grilla:

Damos doble click para insertar una grilla, la cual nos aparecerá de la siguiente forma:

y de lado izquierdo, la estructura se mira asi:

Como vemos, tiene un orden jerárquico, Grid es hijo de LayoutRoot, el que a su vez es hijo de Window.

Ahora bien, tenemos que pasar a modificar algunas propiedades de nuestra Grilla. Lo primero que haremos, es, sobre la zona de la imagen anterior, daremos doble click sobre [Grid], y le pondremos por nombre «Botones» (sin las comillas).

Ahora, iremos a la parte derecha del programa, y seleccionaremos en Properties:

En esta pestañita, veremos las propiedades de cada uno de los elementos que vayamos poniendo sobre nuestra área de trabajo. En la seccion de Layout, modificaremos para que quede como sigue:

Básicamente, hemos puesto el Width y el Height en Auto, esto quiere decir que las grillas ocuparán el tamaño de los elementos que contenga, en este caso, como aún no hemos insertado nada dentro de las mismas, ocuparán el total del tamaño permitido, o sea ocuparán todo el ancho de la grilla padre «LayoutRoot». De igual forma, hemos puesto un HorizontalAlignment y un VerticalAlignment para que ocupen todo el ancho y alto que se pueda.

Teniendo en cuenta que está seleccionada nuestra grilla en color amarillo (si no, seleccionala con doble click), vamos a insertar 4 botones:

Ahora seleccionamos uno de los botones, y modificamos sus propiedades asi:

Como véis, le hemos puesto una altura de 60, y hemos especificado un HorizontalAlignment de Strech, para que ocupe todo el ancho de la grilla, quedando nuestro botón algo asi:

Ubica el botón dando sobre la tecla de la «flecha abajo», esto es para que no se pierda la posición horizontal, pero modificando la vertical. Haz lo mismo con los otros 3 botones, seleccionando cada uno en la sección de Objects and Timeline.

Por último, lo que tienes que hacer, es ponerle nombre y cambiar el contenido de cada uno de los botones:

Bien, pues eso es todo en la entrega de hoy, la próxima vez nos ocuparemos de las imágenes, Cualquier duda o comentario háganmelo saber, Salu2

Héctor Pérez