Increíbles aplicaciones WPF # 2

agosto 21, 2010agosto 21, 2010hectorperez Deja un comentario

Hola! ¿Qué tal a todos? Espero que estén excelente Sonrisa , bueno, pues regresamos al mundo del blogueo, esta vez, siguiendo con la línea de Increíbles aplicaciones WPF.

La aplicación en cuestión se llama Books.Show. Esta, es una aplicación de lectura, de ejemplo basada en WPF que está enfocada a Windows 7. Es un lector funcional totalmente que permite la lectura de alrededor de 40 libros de habla inglesa inluyentes de todos los tiempos. Soporta Touch para ir recorriendo las páginas, también encontrarás que integra con la Taskbar. Además, se incluye el código fuente de la aplicación de ejemplo, el cual, incluye el código completo de la aplicación para escribir aplicaciones con características cool de Windows 7.

Sin mas por decir. algunas capturas de la aplicación:

Como ven, una aplicación rica visualmente, y lo mejor de todo, como ya dije anteriormente, con el código fuente disponible para descargar Sonrisa

El link de la aplicación:

http://code.msdn.microsoft.com/Books

Salu2.

Héctor Uriel Pérez Rojas

Reggyctor liberado

agosto 25, 2009hectorperez 6 comentarios

¿Cuántas veces no hemos estado en medio de la lectura de algún libro en otro idioma y nos encontramos con una palabra que desconocemos? Bueno, al menos a mí me ha pasado, lo molesto viene cuando uno tiene que ir a algún sitio de traducción en línea gratuito, es decir, el hecho de tener que cambiar de el documento, hacia el navegador. Para resolver esto, me di a la tarea de crear mi propio traductor, una aplicación en WPF llamado reggyctor, el cual tiene la habilidad de traducir en 15 diferentes idiomas.

Para llevar a cabo dicha tarea, he usado el servicio de traducción de microsoft translator. He subido en codeplex dicho proyecto, está tanto el instalador, como el código fuente. Aquí les dejo algunas capturas:

Splashscreen:

Programa en el escritorio:

Reggyctor en acción:

Espero que a mas de uno le sirva, comentarios bienvenidos 🙂

Proyecto: http://reggyctor.codeplex.com/

Salu2

Héctor Uriel Pérez Rojas

Convirtiendo controles 2-D en 3-D en WPF

agosto 15, 2008hectorperez 8 comentarios

Bien, hola qué tal de nuevo? Ok en la sección de Preguntas y Respuestas Tere pregunta cómo poder manipular un TextBox en Expression Blend como si un objeto 3-D se tratara.

Bien pues aquí les explico 3 formas en las que se puede hacer, casi lo mismo(porque no en todos es tan sencillo).

Bueno, primero entender que como su nombre lo dice, la función de «Make Image 3D» funciona solo para convertir imágenes en objetos 3-D, no para otro tipo de controles, por lo tanto:

Forma # 1:

Vamos a crear un nuevo proyecto, insertamos un textbox:

Acto seguido, teniendo el TextBox seleccionado, lo convertimos en un VisualBrush:

Le pones el nombre que desees, y ya lo tendrás disponible para usarlo.

Posteriormente, lo que tienes que hacer es insertar una imagen, y convertirla en 3-D:

Vale, ahora que tienes una imagen 3-D, tienes que agregarle como material el VisualBrush que has creado anteriormente al modelo:

Por si no lo alcanzas a ver, el elemento al que modificamos el material se encuentra en :

ViewPort3D->ModelContainer->Content->Model (Cuadro Rojo)

el cual te mostrará en las propiedades un BackMaterial y un Material(Cuadro amarillo), una vez seleccionado el mismo, te mostrará los Brushes que pudes agregarle, en la seccion de hasta la derecha, se encuentran tus propios Brushes, en el cual estará el que has creado hace un momento, al momento de seleccionarlo automáticamente la imagen obtendrá una «copia» de lo que esté pasando en el TextBox original, con esto podrás mover la imagen como si fuera un objeto tridimensional, pero…. hay un pequeño problema…..

NO PUEDES ESCRIBIR SOBRE ÉL; ¿Porqué? Pues porque es una simple imágen. Esto sirve principalmente para animar labels, texblocks, etc; pero si lo que quisieras es escribir realmente en el textbox, lo puedes hacer con la siguiente forma:

Forma # 2:

Para esta forma, requieres bajar las 3D Tools for the Windows Presentation Foundation, misma que fue creada por el equipo 3D de WPF.

Bien, voy a crear un nuevo proyecto, agrego una referencia a la DLL que se encuentra dentro de la carpeta que acabo de descargar con el nombre de 3DTools.dll

Ahora agregas una referencia al assembly desde el código XAML:

NOTA: Para los que no saben que acabo de hacer, estoy creando una referencia a la DLL que agregué, paso a paso quiero decir:

xmlns = xml namespace; o sease que estoy creando una referencia a un espacio de nombres.

xmlns:local = Estoy nombrando de alguna forma mi acceso al assembly, en este caso local, aunque pudo haber sido cualquier otro.

«clr-namespace:_3dTools; = clr-namespace es la sintaxis para ubicar un espacio de nombres

assembly=3DTools» = Es el ensamblado o la librería que acabamos de agregar, y donde se encuentra _3dTools.

Bien, ahora, procedemos a escribir el código que empezará a crear en sí los objetos 3D:

<Window.Resources>
    <MeshGeometry3D x:Key=»3dMesh»
        Positions=»-1,1,0 -1,-1,0 1,-1,0 1,1,0″
        TextureCoordinates=»0,0 0,1 1,1 1,0″
        TriangleIndices=»0 1 2 0 2 3″/>
    <RotateTransform3D x:Key=»3dTransform»>
      <RotateTransform3D.Rotation>
        <AxisAngleRotation3D Angle=»45″ Axis=»0 1 1″ />
      </RotateTransform3D.Rotation>
    </RotateTransform3D>
    <Grid Background=»White» x:Key=»3dMaterial»>
      <Grid.RowDefinitions>
        <RowDefinition Height=»*»/>
        <RowDefinition Height=»*»/>
        <RowDefinition Height=»*»/>
      </Grid.RowDefinitions>
      <TextBox Grid.Row=»0″>Demo con WPF 3D Tools</TextBox>
      <Slider Grid.Row=»1″ />
      <Button Grid.Row=»2″ Width=»60″ Height=»25″>Aceptar</Button>
    </Grid>
</Window.Resources>

jeje, parece un poco complicado, pero trataré de explicar un poco:

Empiezo definiendo dentro de los Recursos de la aplicación (Window.Resources), en primer lugar, un mashGeometry3D(Geometría de malla), el cual será el encargado de darle forma a mi objeto 3D, esto lo hago con positions(Posiciones Vertex de mi malla), TextureCoordinates(Sirve para definir las coordenadas de mi textura) y TriangleIndices(Indices Triangulares); estos son los recursos base para definir la textura de mi objeto 3D. Posteriormente Hago un RotateTransform3D para voltear un poco mi objeto 3D, y agrego una serie de elementos(Grilla, dentro de la misma un textbox, un slider y un botón). Como puedes darte cuenta, a cada uno de los elementos que ligaremos les hemos puesto un x:Key, que servirá para referenciarlos (3dMes, 3dTransform y 3dMaterial)

Ahora, el código en sí de la aplicación:

Aquí, lo que estamos haciendo es, en primer lugar:

<local:TrackballDecorator> = Ingresamos a los métodos de nuestra clase Tools3D, este principalmente nos sirve para hacer un zoom in y zoom out, además de hacer rotación a voluntad del objeto.

<local:Interactive3DDecorator> = Sirve para interactuar con los elementos de nuestro modelo 3D

<Viewport3D… = Definimos un Viewport3D, así como el que se crea cuando convertimos una imagen en 3D

<Viewport3D.Camera> = Agregamos una cámara

<PerspectiveCamera = Posicionamos la camara

<ModelVisual3D Creamos nuestro modelo 3D

<ModelVisual3D.Content = En nuestro caso, lo estamos usando para agregar una luz

<local:InteractiveVisual3D
            Transform=»{StaticResource 3dTransform}»
            Geometry=»{StaticResource 3dMesh}»
            Visual=»{StaticResource 3dMaterial}» />

Hacemos un binding de cada una de las propiedades de nuestro objeto interactivo 3D, uno al Transform, otro a la malla que definimos, y el último al material 3D(este último contendrá nuestros controles).

Y bien, luego luego aparece en el diseñador el aspecto que nuestra aplicación tiene, y al cual al correrlo, se observa así:

He seleccionado el texto para que veas que efectivamente funciona, ahora puedes de igual manera acercar o alejar el objeto, y rotarlo a tu gusto:

Si no quieres que aparezca cortado el control, lo único que tienes que hacer es poner en falsa la propiedad «CliptoBounds»:

Forma # 3:

Bien, hemos usado una DLL en la forma anterior, sin embargo, con el Framework 3.5 se incluye un control para colocar objetos 2D dentro de objetos 3D, su nombre es Viewport2DVisual3D; para lo que tendremos que agregar otro espacio de nombres:

xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″

Seguiremos con el proyecto anterior para que te des una idea mas clara de como funciona esto. Primero borra todas las referencias de código que empiecen con <local: …/>, menos la de <local:InteractiveVisual3D.

Lo que vas a hacer ahora, es cambiar esa referencia <local:InteractiveVisual3D , por un elemento Viewport2DVisual3D

Ahora, lo único que falta es agregar el material en sí del objeto Viewport2DVisual3D:

<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial=»true»/>
</Viewport2DVisual3D.Material>

Al final quedaría así:

Con esto obtienes un resultado muy parecido al anterior,

con la pequeña gran diferencia de que no pudes hacer zoom in, zoom out, ni rotar a voluntad en tiempo de ejecución, para lo cual, si gustas puedes agregarle funcionalidad nuevamente poniendo tu ViewPort3D dentro del elemento:

<local:TrackballDecorator> , con su etiqueta de cierre respectivamente.

Bueno, eso es todo, aquí les dejo los proyectos creados con cada una de las formas antes descritas:

Forma 1: 3D_Forma_1.rar-download

Forma 2: 3D_Forma_2.rar-download

Forma 3: 3D_Forma_3.rar-download

Bien, espero que hayáis entendido los conceptos básicos, una vez hecha cualquiera de las formas anteriores, es posible mover nuestros controles a entera libertad en Blend, que es lo que me habían pedido, si queréis aprender al 100 les recomiendo que lean un libro relacionado al mismo, uno que les puedo recomendar es:

3D Programming for Windows

http://www.charlespetzold.com/3D/index.html

Salu2, y por favor Tere o los demás, si pueden hacerme un feedback lo agradecería mucho, Salu2 y éxito!

Héctor Pérez

¿Cómo cargar una tabla de BD hecha en SQL 2005 en WPF?

julio 28, 2008julio 29, 2008hectorperez 5 comentarios

Bien, pues esta es una pregunta que me ha llegado hoy, así que he decidido escribir sobre esto hoy.

Antes que nada; ¿Qué control usar?

Bien, los que ya están mas adentrados en esto, sabrán que actualmente el control DataGridView existente en Windows Forms no existe en WPF, pero sí en silverlight, así que, lo que yo les recomiendo es usar un control ya existente y que es gratuito, se llama Xceed DataGrid for WPF, y lo puedes descargar desde aquí:

http://xceed.com/Grid_WPF_Intro.html

Tienes que registrarte para que te den un serial válido, la verdad es un control muy sencillo de usar, vale si no estás convencido puedes echarle un vistazo al demo aquí:

http://xceed.com/Grid_WPF_Demo.html

Bien, si ya has descargado e instalado el control, lo que tienes que hacer es :

1.- Importar las librerías necesarias, yo lo he hecho desde Visual Studio, ya has de saber, click derecho sobre el proyecto, agregar referencias, e importas todas las que empiecen con XCeed(XCeed.Controls,XCeed.Datagrid… etc).

Una vez hecho esto, si vas a tu ToolBar, notarás que tienes nuevos controles disponibles para insertar, en este caso debes insertar el DataGridControl:

Como puedes observar, el control es insertado inmediatamente, y a la vez Visual Studio nos genera el código necesario para hacer referencia al namespace.

2.- Vale lo siguiente es configurar el control desde XAML, esto lo haremos agregando 2 atributos a nuestro control, los atributos serán:

x:Name=»playersGrid» ItemsSource=»{Binding}

O sease agregamos un nombre a la grilla para que pueda ser usada desde código, y la fuente de datos de la misma, en este caso solo ponemos Binding, el cual hará binding con lo generado desde el código C#.

A continuación, vamos a nuestro archivo Code behind, y agregamos lo siguiente:

protected override void OnInitialized(EventArgs e)
{

    DataSet ds;

    base.OnInitialized(e);

    ds = getData();

    playersGrid.DataContext = ds.Tables[«cliente»];

}

private DataSet getData()
{

    string connString = string.Format(«Data Source=HÉCTOR1\\SQLEXPRESS; AttachDbFilename=|DataDirectory|\\Libreria.mdf; Integrated Security=True; User Instance=True»);

    SqlConnection conn = new SqlConnection(connString);

    DataSet dataSet = new DataSet();

    SqlDataAdapter playersAdapter = new SqlDataAdapter();

    playersAdapter.SelectCommand = new SqlCommand(«Select cve_cliente, nombre, paterno, materno, calle, ciudad from cliente», conn);

    playersAdapter.Fill(dataSet, «cliente»);

    return dataSet;

}

Básicamente, aquí lo que hago es hacer una conexión con mi servidor de Base de Datos, hago la consulta correspondiente y regreso el dataset cliente, el cual entrará en el DataContext de la grilla. Si quieres probar con tu base de datos, tienes que cambiar:

«Data Source=NOMBRE_DE_TU_SERVIDOR;

DataDirectory|\\TU_BASE_DE_DATOS.mdf;

(«Select cve_cliente, nombre, paterno, materno, calle, ciudad from cliente» POR TU SENTENCIA SQL,

«cliente» por la tabla que quieres meter en el DataContext.

Con todo esto, el resultado será algo como esto:

Ahora bien, si quieres jugar un poco mas, puedes darle click al centro de la Grilla:

Con lo cual nos aparecerán opciones de configuración de la grilla, en mi caso, cambié el tipo de vista y el tema:

con lo cual, nos queda algo mas chévere:

Espero que les haya sido de utilidad, un saludo, por cierto, igual pudiste haber utilizado el mismo control DataGridView usado en el framework 2, pero por el momento creo que esto es mejor no? Salu2

Link del proyecto: EjemploDataGrid.rar-download

Héctor Pérez

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

julio 27, 2008hectorperez 2 comentarios

Vale, qué tal a todos?? Hace ya un buen tiempo que no posteo, pero es que he estado un poco ocupado aprendiendo y comprendiendo varios recursos que en futuras entradas les mostraré.

Pero bien, en lo que estabamos, la entrada pasada había quedado hecha nuestra grilla con 4 botones, si alguien gusta bajarse el proyecto hasta aquí hecho, pueden descargarlo de aquí:

LINK: Aplicacion%203-d.rar-download

Ok, seguimos adelante, lo que vamos a hacer ahora, es empezar a insertar nuestras imágenes de los planos del edificio.

Tradicionalmente, los planos del edificio se verían algo así:

Qué dicen? Un poco sencillo no? Lo que nosotros queremos es recrear estos planos en un modelo tridimensional y de una manera muy sencilla, para ello, vamos a ir a Blend, abrimos nuestro proyecto que llevamos hasta aquí, y vamos a darle click derecho sobre nuestro proyecto y a continuación Add New Folder:

Después de esto, nos pedirá el nombre de la carpeta, le llamaremos «Imagenes» (sin las comillas), si por error no le has puesto nombre, puedes renombrarla haciendo doble click sobre el nombre actual de la carpeta.

Para motivos de este proyecto, aquí están las imagenes que usaré en el proyecto, si es que quieres ir haciendo el proyecto a mi paso:

LINK FOLDER IMAGENES: Images.rar-download

Ahora, lo que haremos es pasar a blend las imagenes que usaremos, esto lo podemos hacer dando click derecho sobre la carpeta «Imagenes», y posteriormente en la opción «Add existing item…». Vamos a la carpeta de las imagenes y seleccionamos todas, posteriormente damos click en abrir.

Hasta ahora, tu explorador del proyecto debe verse algo asi:

Ahora sí, viene lo interesante, vamos a dar doble click sobre la imagen «cisco_planta_baja.jpg», esto debe de insertar la imagen dentro de nuestra ventana de la aplicación.

El tamaño de la imagen es mucho mas grande que nuestra ventana, por lo cual debemos reajustarla con los siguientes valores:

Básicamente, lo que hemos hecho es ubicar la imagen en la columna # 1 (recuerden que hemos creado 2 columnas, y que WPF comienza a enumerar regularmente las cosas desde 0, por lo cual la imagen queda en la columna 1 (que en realidad es la segunda), y hemos ajustado los márgenes a 0, por lo que debería verse algo así:

Bien, ahora lo que haremos será ir al menú con la imagen seleccionada, damos click sobre Tools y posteriormente en la opción «Make Image 3D».

En principio no veremos nada extraño, pero si vamos a nuestro panel de Object and Timeline, notaremos que se nos ha creado un Viewport 3D. Este será nuestro contenedor principal, si expandimos mas nuestros nodos, llegaremos hasta nuestra imagen del principio, con el nombre de Model(Parte marcada con verde), que es en realidad el modelo que hemos creado para la imagen:

Ahora bien, al momento de seleccionar Model, aparecen unas flechas sobre nuestra imagen (circulado con rojo en la imagen anterior), estas flechas son las encargadas de mover nuestro objeto 3D hacia donde queramos, puedes intentarlo si quieres, regresando al estado original con Ctrl+Z.

Empieza a ser sorpendente no? Ok, vamos a nuestro explorador y renombramos nuestro objeto «[Viewport3D]» por «PlantaBaja».

Procedemos a hacer lo mismo con las imagenes «cisco_planta_segundab.jpg» , «cisco_planta_primera.jpg» y «cisco_planta_baja.jpg», renombrando cada Viewport 3D con su respectivo nombre, te debe quedar algo asi:

Ahora, para facilitarnos las cosas y tenerlas mas ordenadas, vamos a agrupar nuestros ViewPorts dentro de una grilla, seleccionamos los 4 elementos y damos click derecho -> Group Into -> Grid. A esta grilla la llamaremos «Objetos 3D».

Bien, vamos a modificar nuestros modelos para dar la apariencia deseada, colocando una planta debajo de la otra, para simular las plantas del edificio. seleccionamos sobre nuestro Viewport «PlantaBaja», y expandimos su nodo, hasta llegar al llamado «[PerspectiveCamera]», que es el encargado de manejar las camaras de los objetos 3D:

Si observamos, existen otras propiedades en los elementos 3D, como el ModelContainer(encargado de almacenar los objetos, bien una imagen, un botón, etc), el AmbientContainer (Que mantiene los colores «ambientales») y el DirectionalContainer.

Ahora, manejaremos nuestra cámara para que nos dé el ángulo necesario, teniendo seleccionada esta opción, vamos a modificar la opción Transform de las propiedades, y sobre la pestaña Rotate, colocamos 64 sobre la rotación de las X:

Esto hará que nuestra cámara se ponga en una perspectiva diferente. Hacemos lo mismo con las cámaras de los otros objetos Viewport 3D. Ten cuidado que sea el elemento Rotate el seleccionado para colocar el valor 64, y no te preocupes si los objetos «desaparecen» de la escena de repente. Algo así te debe de quedar:

Ok, ahora es simple cuestión de acomodar cada uno de los objetos, seleccionamos nuestro ViewPort llamado «PlantaBaja», y lo arrastramos hacia abajo, acomodamos nuestros Viewports para que queden uno encima de otro:

Sí sí, sé que has de decir que aún se ve feo, vamos a arreglar eso; seleccionamos nuestros 4 Viewport 3D, y manteniendo la tecla shift apretada, reducimos el tamaño de nuestros ViewPorts y los acomodamos para que se vea un poco mas estilizado todo:

Ok, ahora ocurre un problema, nuestras imágenes aparecen cortadas, esto se resuelve de una manera muy sencilla, vamos a las propiedades de nuestros Viewport 3D, y buscamos la propiedad ClipToBounds, con lo cual las imágenes dejarán de estar «clipeadas» y se mostrarán completamente:

Bien, por hoy lo dejaremos hasta aquí, próximamente nos meteremos con las líneas de tiempo para animar nuestros objetos, aquí les dejo el archivo hasta donde vamos hoy, por si quieren comparar con el suyo, salu2.

Héctor Pérez

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

May 29, 2008hectorperez 5 comentarios

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

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

May 24, 2008May 24, 2008hectorperez 4 comentarios

Vale, qué tal? Una disculpa por haberme ausentado un tiempo, pero es que la escuela es muy absorbente a final de semestre jeje, pero bien, aquí estamos para continuar con los principios de WPF y con la creación de nuestra aplicación.

Bien, pues hoy hablaremos acerca de algo por lo que muchos preguntan, y es acerca de los contenedores disponibles en WPF, asimismo haremos una entrada con Expression Blend y la creación de nuestra aplicación.

TIPOS DE CONTENEDORES EN WPF

Existen 5 tipos principales de contenedores en WPF:

StackPanel
DockPanel
Grid
WrapPanel
Canvas

Vale, pasemos a explicar un poco cada uno de ellos, para esta ocasión, he creado una aplicación WPF, con la cual demostraré cada uno de estos elementos, y el cual puedes descargar al final de esta entrada.

STACKPANEL

Bien, como su nombre lo indica: Panel Apilado, es decir, ubica los elementos en forma de una pila, va poniendo uno tras de otro, de forma apilada, ya sea de forma vertical u horizontal:

El ejemplo anterior fue hecho con el codigo:

<StackPanel Orientation=«Horizontal»>

    <Button Width=»100″ Height=»50″

Background =»AliceBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold»>

      Aceptar

    </Button>

    <Button Width=»100″ Height=»50″

Background =»AliceBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold»>

      Cancelar

    </Button>

    <Button Width=»100″ Height=»50″

Background =»AliceBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold»>

      Omitir

    </Button>

</StackPanel>

Como podemos observar, el contenedor agrupa varios objetos, y los ubica de forma horizontal porque asi lo hemos especificado con la propiedad Orientation=»Horizontal», cambiando el atributo a «Vertical», los elementos automaticamente se distribuirian verticalmente (de arriba hacia abajo).

DOCKPANEL

O bien podría ser llamado «Panel de acoplamiento», y es que este panel lo que hace es ubicar a los elementos hacia donde queremos que se mantenga, por ejemplo si decimos a la derecha, el elemento especificado se mantendrá a la derecha.

El cual fue creado con el código

<DockPanel LastChildFill=«True» Background=»AliceBlue»>

    <Button DockPanel.Dock=«Left» Width=»50″ Height=»50″

Background =»CornflowerBlue» FontFamily=»Webdings»

FontSize=»20″ FontWeight=»Bold»

Foreground=»White» Margin=»10,0,0,0″>

      9

    </Button>

    <Button DockPanel.Dock=«Right» Width=»50″ Height=»50″

Background =»CornflowerBlue» FontFamily=»Webdings»

FontSize=»20″ FontWeight=»Bold»

Foreground=»White» Margin=»0,0,10,0″>

      :

    </Button>

    <Image Source=»Foto.jpg» Margin=»10″></Image>

</DockPanel>

Aquí hay varias cosas que debemos destacar, la primera es que estamos aplicando lo que mencionamos anteriormente, estamos ubicando los elementos hacia donde queremos que se mantengan constantes, en el primer caso del botón, estamos aplicando <Button DockPanel.Dock=»Left»; lo cual indica que el primer botón va a ser ubicado a la izquierda, note que le estamos dando un ancho y un alto, con lo cual mantendrá esos valores constantes. De igual forma pasa con el botón <Button DockPanel.Dock=»Right».

Ah pero no sucede lo mismo con la imagen del final: <Image Source=»Foto.jpg» Margin=»10″></Image>; note como no se le está asignando ni un anchor, ni caracteristicas de ancho y alto, entonces, esta imagen pasa a ocupar todo el espacio que queda libre. Pero esto sucede gracias al atributo LastChildFill=»True».

GRID

La grilla, es el tipo de contenedor mas poderoso en WPF, con el que puede lograrse cualquier distribución visual de una cantidad cualquiera de elementos. Pero porqué se le llama grilla? Pues porque los elementos pueden «enrejillarse», vale, puedes dividir la grilla en celdas y columnas para luego ubicar los elementos dentro de estos.

Esto se hace con las propiedades ColumnDefinition y RowDefinition.

El código a continuación define un Grid de dos filas y tres columnas.

<Grid>

<Grid.ColumnDefinitions>

      <ColumnDefinition>

      <ColumnDefinition>

      <ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

      <RowDefinition/>

      <RowDefinition/>

</Grid.RowDefinitions>

</Grid >

Las dimensiones de las celdas de un Grid pueden ser modificadas, si queremos que una celda del Grid se ajuste al tamaño del elemento que contiene se debe dar el valor «Auto» al Width de la columna, o al Height de la fila. Para referirse al espacio que quede disponible dentro de una celda se usará «*» con lo que se estará indicando que este espacio sea utilizado proporcionalmente.

Esto tiene que quedar claro, por ejemplo, si tuvieramos el código:

<Grid ShowGridLines=»True» HorizontalAlignment=»Center»

VerticalAlignment=»Center» Background=»AliceBlue»

Height=»300″ Width=»300″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=«Auto»/>

<ColumnDefinition Width=«*»/>

<ColumnDefinition Width=«2*»/>

</Grid.ColumnDefinitions>

Esto provocaría que en primer lugar, suponiendo que la imágen midiera 150 de ancho, que la primera columna midiera 150, ya que se está ajustando con Auto al contenido del elemento que contiene, en segundo lugar, la columna que se definió despues midiera 50 de ancho(* o 1/3 parte de lo que nos queda), y el tercero 100(2* o 2/3 partes de lo que nos queda).

Esta calculadora ha sido hecha a partir de definición de columnas y filas, y cada botón ha sido ubicado de forma ordenada en cada una de las celdas. Aquí el código:

<Grid HorizontalAlignment=«Center»

VerticalAlignment=«Center»

Background=«AliceBlue»>

<Grid.ColumnDefinitions>

      <ColumnDefinition Width=«Auto»/>

      <ColumnDefinition Width=«Auto»/>

      <ColumnDefinition Width=«Auto»/>

      <ColumnDefinition Width=«Auto»/>

      <ColumnDefinition Width=«Auto»/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height=«Auto»/>

      <RowDefinition Height=«Auto»/>

      <RowDefinition Height=«Auto»/>

      <RowDefinition Height=«Auto»/>

      <RowDefinition Height=«Auto»/>

    </Grid.RowDefinitions>

    <TextBlock Grid.Column=«0» Grid.Row=»0″ Grid.ColumnSpan=»5″

Background =»Black» FontFamily=»Arial» FontSize=»30″

FontWeight=»Bold» Foreground=»White» Margin=»5″>

0

</TextBlock>

    <Button Grid.Column=«0» Grid.Row=»1″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

7

</Button>

    <Button Grid.Column=«1» Grid.Row=»1» Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

8

</Button>

    <Button Grid.Column=«2» Grid.Row=»1″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

9

</Button>

    <Button Grid.Column=«0» Grid.Row=»2″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

4

</Button>

    <Button Grid.Column=«1» Grid.Row=»2″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

5

</Button>

    <Button Grid.Column=«2» Grid.Row=»2″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

6

</Button>

    <Button Grid.Column=«0» Grid.Row=»3» Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

1

</Button>

    <Button Grid.Column=«1» Grid.Row=»3″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

2

</Button>

    <Button Grid.Column=«2» Grid.Row=»3″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

3

</Button>

    <Button Grid.Column=«0» Grid.Row=»4″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

0

</Button>

    <Button Grid.Column=«1» Grid.Row=»4″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

+/-

</Button>

    <Button Grid.Column=«2» Grid.Row=»4″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

.

</Button>

    <Button Grid.Column=«3» Grid.Row=»1″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

/

</Button>

    <Button Grid.Column=«3» Grid.Row=»2″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

*

</Button>

    <Button Grid.Column=«3» Grid.Row=»3″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

–

</Button>

    <Button Grid.Column=«3» Grid.Row=»4″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

=

</Button>

    <Button Grid.Column=«4» Grid.Row=»3″ Grid.RowSpan=»2″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

+

</Button>

    <Button Grid.Column=«4» Grid.Row=»1″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Arial»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

C

</Button>

    <Button Grid.Column=«4» Grid.Row=»2″ Height=»50″ Width=»50″

Background =»CornflowerBlue» FontFamily=»Symbol»

FontSize=»20″ FontWeight=»Bold» Foreground=»White»>

Ö

</Button>

</Grid>

WRAPPANEL

Bueno, este es uno de los paneles que mas me gusta, y es que te permite agrupar los elementos de forma ordenada y que siempre sean visibles. Es decir, reacomoda los elementos cuando ya no caben en la superficie. Para este ejemplo quiero agradecer de manera muy especial a mi amiga MELISA LEON por haberme prestado sus dibujos para la demo :D, gracias amiga MEL. Por ejemplo:

SLIDER CON VALOR 50

SLIDER CON VALOR 200

Como podemos observar, los elementos se han redistribuidos de tal forma que se vean todos, en otro tipo de contenedor, probablemente se hubieran salido fuera de la vista de nosotros.

CANVAS

El contenedor mas sencillo de todos, ya que permite ubicar los elementos a partir de la posición que le especifiquemos.

Por ejemplo:

<Canvas>

    <Image Source=»Nevera.jpg» Height=»700″/>

    <TextBox Canvas.Top=«10» Canvas.Left=»10″

Background=»LightYellow» FontWeight=»Bold»

Foreground=»Blue» FontSize=»20″

FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>

    <TextBox Canvas.Bottom=«550» Canvas.Right=»10″

             Background=»LightYellow» FontWeight=»Bold»

Foreground=»Blue» FontSize=»20″

FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>

    <TextBox Canvas.Top=«100» Canvas.Left=»25″

Background=»LightYellow» FontWeight=»Bold»

Foreground=»Blue» FontSize=»20″

FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>

    <TextBox Canvas.Bottom=«450» Canvas.Left=»250″

Background=»LightYellow» FontWeight=»Bold»

Foreground=»Blue» FontSize=»20″

FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>

</Canvas>

Aquí estamos ubicando elementos a cierta distancia del Canvas, ya sea con Canvas.Left, Canvas.Right, Canvas.Bottom o Canvas.Top. y especificando la distancia propiamente. El ejemplo anterior nos arrojaría lo siguiente:

Vale, pues me he tomado tiempo para escribir acerca de los contenedores en WPF, ya que mucha gente había estado preguntando por ellos y creí necesario explicarlo, les prometo para la próxima ocasión empezar realmente con la aplicación en 3d, si tienen dudas o comentarios, ya sea sobre esto mismo o sobre otra cosa, díganmelos y trataré de ayudarlos en lo que pueda.

P. D. De nuevo gracias a mi amiga super chida Mel, por los dibujos que me han servido para la demo, gracias por tu amistad amiga y por todo tu apoyo 😉 TKM y mucho éxitoooo…

LINK DEL PROGRAMA DEMO: Contenedores.zip-download

Salu2

Héctor Pérez

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

May 9, 2008hectorperez 4 comentarios

Vale, qué tal a todos, en el post anterior empezamos a ver las maravillas de WPF, al crear un proyecto WPF nuevo, y al empezar a explicar el código en él contenido. Esta vez, veremos primeramente qué es XAML.

Creando una interfaz con XAML

XAML es la manera recomendada para crear interfaces de usuario en el modelo de programación de Windows Presentation Foundation, porque nos proporciona un método para separar la definición del diseño de la IU y la lógica. También permite integrar código usando archivos code-behind.

Con XAML también es posible crear una IU entera sin utilizar código. Esto lo demostramos a continuación. Recordáis el código de la vez anterior, pues aquí he agregado algún código mas:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button Height=»100″ Width=»200″>
            Hola, soy un botón
        </Button>
    </Grid>
</Window>

Vale, pues el texto seleccionado es el que hemos insertado a nuestro código. Como véis, es un elemento del tipo botón, ahora bien, cabe resaltar que WPF tiene controles predefinidos, los cuales iremos usando a través de la creación de nuestra aplicación.

Entonces, el elemento Button, es el encargado de crear un nuevo botón dentro de nuestra grilla, como véis, las etiquetas de Button están dentro de las etiquetas Grid. Esto quiere decir que tenemos una estructura jerárquica, donde algunos elementos (casi siempre contenedores) son los que tienen como «hijos» a los demás elementos.

En este caso, de igual forma a Button se le ha definido un Height de 100 y un width de 200, que son los atributos propiamente del botón. Ahora bien, dentro del butón, tenemos el texto «Hola, soy un botón, lo cual quiere decir que es el contenido del botón, pero no solamente puede ser texto, hubieramos podido insertar cualquier otra cosa, pero de eso hablaremos mas adelante. Por lo pronto, el resultado es el siguiente:

Vale, ahora procedamos a hacer algo un poco mas complejo, recordáis que les he dicho que una grilla es un contenedor? vale, pues también hemos mencionado que el botón soporta 1 solo elemento contenido(si, el que aparece entre <button>CONTENIDO</button>, asi que en teoría, podemos insertar una grilla como contenido del control, para después, insertar mucho mas contenido dentro del mismísmo botón!! Insertemos una grilla con el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button>
            <Grid>
            </Grid>
        </Button>
    </Grid>
</Window>

Como véis, hemos en primer lugar, quitado los ATRIBUTOS del botón, asi lograremos que el botón se ajuste a las dimensiones del elemento padre, es decir, de la grilla que lo está conteniendo, que a su vez, se está ajustando a las dimensiones de la ventana(window), y en segundo lugar, hemos reemplazado el contenido de CONTENT que era «Hola soy un botón» por una grilla, a la cual le modificaremos algunos atributos, como véis en el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Button>
           <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            </Grid>
        </Button>
    </Grid>
</Window>

A este código solo le hemos cambiado el height y el width, aparte de un nuevo atributo: HorizontalAlignment, el cual nos dice hacia donde queremos ubicar el control en cuestión de su padre, en este caso en el centro.

El resultado es el siguiente:

Vale, en la imagen se nota un cuadrado dentro del botón gris, esta es la grilla, pero pasemos a hacer algo mas interesante, insertaremos un video, una imágen y un textblock dentro del mismismo botón, para eso, expliquemos que son las rowsdefinitions y las columndefinitions:

RowDefinition: Dentro de la grilla, marca definiciones de una fila.

ColumnDefinition:Dentro de la grilla, marca definiciones de una columna.

Es decir, cuando aplicamos estas row y column definitions, lo que hacemos es crear como líneas a través de la grilla, con el propósito de guiarnos y de tener una mejor distribucion de los elementos dentro de una grilla. Esto lo ves en el siguiente código:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            </Grid>
        </Button>
    </Grid>
</Window>

como ves, las column y row definitions se definen dentro del elemento <Grid></Grid>. Esto es porque pasa a ser un subelemento de Grid, aquí hemos definido 2 column y 2 row definitions. Meramente, las dimensiones mostradas son las de los espacios que hay ocupan cada uno de las definiciones de columna o de filas. El resultado es el siguiente:

Como véis, el mismo visual studio nos muestra las respectivas dimensiones de los espacios, de las columnas 142, y 136, y de las filas 131 para cada una.

Ahora bien, para poder insertar apropiadamente el video primeramente, debemos añadirlo dando click derecho a nuestro poyecto, luego Add, y finalmente Existing Item:

Vale, ahora seleccionamos cualquier video que tengamos, preferentemente uno corto, como lo son los de prueba de Windows, en mi caso insertare el clásico de bear.wmv

Bien, ahora pasemos a agregar un control <MediaElement>

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
                <MediaElement Source=»Bear.wmv» Grid.Column=»0″ HorizontalAlignment=»Center» VerticalAlignment=»Top»/>
            </Grid>
        </Button>
    </Grid>
</Window>

Mas que nada, Media Element nos sirve para alojar contenido sobre todo de videos y de música. En este caso, hemos ajustado el alineamiento horizontal lal centro y el alineamiento vertial en «Top», es decir que se ajuste a la parte superior de quien lo contiene.

Bien, si vemos gráficamente esto, el resultado es:

Ahora, si procedemos a ejeuctar esto, ocurre lo siguiente: No se reproduce ningún video. ¿Porqué ocurre esto? Pues porque no tenemos definida ninguna línea de tiempo que reproduzca este video. Sobre esto hablaremos después, por lo pronto, debemos insertar el siguiente código para que el video se reproduzca correctamente:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″ xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=»d»>
   <Window.Resources>
        <Storyboard x:Key=»Bear_wmv»>
            <MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»>
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width=»142*» />
            <ColumnDefinition Width=»136*» />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=»131*» />
            <RowDefinition Height=»131*» />
        </Grid.RowDefinitions>
                <MediaElement x:Name=»Bear_wmv» Grid.Row=»0″ Grid.Column=»0″ VerticalAlignment=»Top» Height=»123.5″ Grid.ColumnSpan=»2″ Margin=»0,0,8,0″ />
        </Grid>
        </Button>
    </Grid>
</Window>

Vale, lo mas sobresaliente de este código, es que hemos creado una línea del tiempo (<Storyboard>), la cual dice:

<Storyboard x:Key=»Bear_wmv»> = Etiqueta de tipo linea del tiempo, con un nombre (o llave de key) que se llamará Bear_wmv

<MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/> = Línea del tiempo del tipo media, con el tiempo de inicio 00:00:00 ( o sea que empiece a reproducir a partir de ese tiempo en el video), un objetivo que va a ser Bear_wmv, que es como hemos definido el MediaElement dentro de nuestra grilla, y con la fuente u orígen que será Bear.wmv propiamente.

Si os dáis cuenta, hemos quitado el Source del mediaelement dentro de la grilla dentro del botón, esto es debido a que será la la MediaTimeline quien apunte directamente al Mediaelement de nuestro botón.

Luego vienen los cierres de etiquetas.

Notad que esto se encuentra definido dentro de <Windows.Resources>, lo cual nos dice que se crearán recursos que estarán disponibles para usarlos cuando queramos y donde queramos en el programa.

Luego, se especifica lo siguente:

<Window.Triggers> = Son lanzadores del programa, o sea que se ejcutarán cuando cierta reacción se realicen en el programa .
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»> = en este caso, cuando nuestro programa sea cargado.
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/> = Iniciará el storyboard llamado Bear_wmv, que es recurso estático
        </EventTrigger> = cierre de etiquetas
    </Window.Triggers> = cierre de etiquetas
El resultado es el siguiente:

Como veis, un vídeo reproduciéndose dentro de un botón!!

Ahora, lo que tenemos que hacer es agregar una imagen a nuestro proyecto, con click derecho sobre nuestro proyecto, agregar elemento existene. Agrega cualquier imagen.

Ahora, tenemos que referenciarla por medio de código, esto lo hacemos así:

De hecho, lo que ha insertado la imagen es el siguiente fragmento:

El cual nos dice. etiqueta del tipo imagen, fuente=la imágen que hemos insertado, ponla en la definicion de columnas # 0 y filas #1, son como coordenadas. El resultado:

Finalmente, agregaremos un textbox dentro del botón, esto se hace con el código:

La línea que nos crea el textbox es:

Que es prácticamente lo mismo que el de la imágen, con la diferencia de que estamos creando un Textbox, no una Image.

Pero para hacerlo un poco mas interesante, vamos a agregarle un color de fondo a nuestro Textbox, pero no será cualquier color, será un degradado, esto es muy fácil con WPF, tan solo con insertar el texto:

               <TextBox.Background> = Definimos que queremos rellenar el Background o fondo
                        <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″> = Decimos que será un gradiente linear, con un punto inicial en (.5,0) y un punto final en (.5,1) de nuestro textbox.
                            <GradientStop Color=»#FF000000″ Offset=»1″/> = Definimos uno de los colores de nuestro gradiente, en este caso Blanco, y con una «distancia» de 1
                            <GradientStop Color=»#FFFFFFFF» Offset=»0.013″/> = lo mismo que el anterior código, pero con un color negro
                        </LinearGradientBrush> =cierre de etiquetas
                </TextBox.Background> = Cierre de etiquetas

Lo que nos arroja lo siugente:

Y listo, tenemos nuestro Textbox rellenado.le he cambiado el color de la letra para que se distinguiera mejor.

Aquí el código completo:

<Window x:Class=»Window2″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″ xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=»d»>
    <Window.Resources>
        <Storyboard x:Key=»Bear_wmv»>
            <MediaTimeline BeginTime=»00:00:00″ Storyboard.TargetName=»Bear_wmv» Source=»Bear.wmv»/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent=»FrameworkElement.Loaded»>
            <BeginStoryboard Storyboard=»{StaticResource Bear_wmv}»/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>

        <Button Grid.RowSpan=»2″ Grid.ColumnSpan=»2″>
            <Grid Height=»250″ Width=»250″ HorizontalAlignment=»Center»>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=»142*» />
                    <ColumnDefinition Width=»136*» />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height=»131*» />
                    <RowDefinition Height=»131*» />
                </Grid.RowDefinitions>
                <MediaElement x:Name=»Bear_wmv» Grid.Row=»0″ Grid.Column=»0″ VerticalAlignment=»Top» Height=»123.5″ Grid.ColumnSpan=»2″ Margin=»0,0,8,0″ />
                <Image Source=»bluemonster.jpg» Grid.Column=»0″ Grid.Row=»1″></Image>
                <TextBox Text=»Hello world» Grid.Column=»1″ Grid.Row=»1″ TextAlignment=»Center» Foreground=»#FF8617A8″>
                    <TextBox.Background>
                        <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″>
                            <GradientStop Color=»#FF000000″ Offset=»1″/>
                            <GradientStop Color=»#FFFFFFFF» Offset=»0.013″/>
                        </LinearGradientBrush>
                    </TextBox.Background>
                </TextBox>
            </Grid>
        </Button>
    </Grid>
</Window>

Y viendo la estructura jeráquica que hemos deifnido, quedaría así:

Como veis, dentro de nuestra ventana de windows, tenemos nuestra primera grila, luego viene nuestro botón, sobre el cual hay insertada otra grilla, dentro de la misma tenemos un video, una imagen y un Textbox. 🙂

Vale, como véis, es bantante sencillo usar XAML, sin embargo, a veces por cuestión de tiempo, es mejor usar herramientas visuales, tales como la suite expression, de la cual hablaremos en nuestra próxima entrada, Hasta la vista!! y espero no haberlos aburrido

Salu2

Héctor Pérez

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

May 3, 2008hectorperez Deja un comentario

Hola a todos, qué tal? Bien, pues a principios de este semestre, en la materia de redes nos pidieron hacer una propuesta de una creación de la red de una unidad organizativa, a partir de ciertos planos y de ciertas descripciones técnicas. Pues bien, a partir de hoy, empezaremos a crear la réplica del programa que cree para la exposición del mismo, pero antes vamos a dar un overview acerca de WPF.

La aplicación en cuestión que crearemos será la siguiente:

Overview sobre WPF.

¿Qué es WPF? – Vale, pues resumidamente, WPF es una nueva tecnología por parte de Microsoft, en sencillas palabras para crear interfaces de usuario sorprendentes, con funcionalidad a base del .NET framework, de hecho WPF es parte del Framework 3.0.

Pero… ¿Cómo uso WPF? – Bien, pues WPF es un tipo de proyecto tal como un proyecto Windows Forms, o un proyecto ASP.NET, el cual aparece cuando creamos un nuevo proyecto tipo Windows en Visual Studio 2008:

Ok, he creado un proyecto WPF y ahora qué hago? – Bien pues empezamos a crear nuestra aplicación, a través de la cual iremos aprendiendo algunos conceptos básicos de WPF, así que comencemos:

1.- En Visual Studio 2008, creamos un proyecto del tipo WPF, como hemos mostrado en la imágen anterior.

2.- Vale, ahora que hemos creado nuestro proyecto WPF, pasaremos a explicar lo que nos aparece:

En el recuadro que hemos pintado de rojo, con el número 1, encontramos lo que normalmente encontramos cuando creamos una aplicación Windows Forms, es decir el diseñador gráfico. Pero adicionado a esto, encontramos lo que aparece en el recuadro azul, lo que se llama el código XAML (eXtensible Application Markup Language), que en Windows Forms sería lo equivalente al código escrito en el respectivo lenguaje (C# o VB) al arrastrar y soltar cada uno de los elementos sobre el formulario. Pero bien, pasemos a analizar un poco el código:

<Window x:Class=»Window1″
    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
    Title=»Window1″ Height=»300″ Width=»300″>
    <Grid>
    </Grid>
</Window>

Como vemos, es muy parecido a XML, de hecho se siguen las mismas normas que en XML, es decir, es código válido, porque si nos damos cuenta, cada etiqueta que abre, cierra, tal es el caso por ejemplo de

Ahora bien, vamos línea a línea descubriendo el maravilloso código XAML aquí planteado:

1.- <Window x:Class=»Window1″ – Define el tipo y el nombre de la clase

2.- xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Son los espacios de nombre (xml namespaces), los cuales llevan la estructura exigida por la W3C, para XML,

3.- Title=»Window1″ Height=»300″ Width=»300″>

Aquí se empiezan a definir las características del formulario meramente, diciendo que como título tendrá «Window1, de largo tendrá 300 pixeles y de ancho otros 300.

4.-

Es un contenedor de WPF, la grilla, la cual nos servirá para poner varios controles hijos dentro de ella misma, aclararemos mas sobre estos contenedores mas adelante.

5.- </Window>

Cierre de etiqueta <Window>

Bien, pues es todo por el momento, próximamente iremos ampliando varios conceptos acerca de WPF, e iremos creando aplicaciones usando esta aplicación, cualquier duda o comentario no duden en contactarme, los veo en la próxima…

Salu2

Héctor Pérez

Liberado IE8 Beta 1 (Developer Preview)

marzo 12, 2008hectorperez Deja un comentario

Bien, pues precismanete en una de las sesiones del Mix08, se ha liberado esta beta del famoso navegador IE, el cual, como su nombre indica, es una versión pensada para desarrolladores.

¿Porqué?

Vale, pues se ha anunciado durante el Mix, que esta versión del navegador, tiene pensado implementar todos los soportes de RSS, CSS 2.1 y AJAX.

Bueno, resumidamente permite una mejor interoperabilidad entre web designers y developers designers, vale, te animo a que lo pruebes personalmente y veas las nuevas características que el equipo de desarrollo piensa para la versión final.

Link de descarga: http://www.microsoft.com/windows/products/winfamily/ie/ie8/getitnow.mspx

Salu2

Héctor Pérez

Microsoft Photosynth

febrero 28, 2008marzo 9, 2008hectorperez Deja un comentario

Increíble aplicación web, la descripción de la página cita así:

«Welcome to Photosynth, a new technology from Microsoft Live Labs that takes a large collection of photos of a place or an object, analyzes them for similarities, and displays them in a reconstructed three-dimensional space.»

Que en otras palabras, quiere decir que se crea una representación tridimensional de un lugar, a partir de fotografías sacadas de varias colecciones (como flickr) y unidas a través de la tecnología photosynth. Aunque aún se encuentra en una CTP, es recomendadísimo que lo vean. Aquí un video por si no se animaron:

Aquí el link: http://labs.live.com/photosynth

P. D.: Tiene que instalar el plugin que marca ahí, salu2

Héctor Pérez

HD VIEW

febrero 26, 2008marzo 9, 2008hectorperez Deja un comentario

HD View es un nuevo visor desarrollador por el Microsoft Research’s Interactive Visual Media group para poder interactuar con imágenes largas.

Es una aplicación sorprendente, a mi me ha dejado impactado todo el zoom que podemos meterle a una imágen sin perder calidad.

Vamos a hacer un reto, jeje haber quien puede encontrar al monigote en esta montaña

Salu2

Héctor Pérez

	hectorperez en El proveedor ‘Microsoft.…
	hectorperez en Introducción a WPF, y c…
	Reyes en El proveedor ‘Microsoft.…
	aspador en Introducción a WPF, y c…
	Gabriel Valenzuela A… en El proveedor ‘Microsoft.…

Héctor Uriel Pérez Rojas Weblog

Another .NET weblog

Categoría Aplicaciones

Increíbles aplicaciones WPF # 2

Héctor Uriel Pérez Rojas

Reggyctor liberado

Convirtiendo controles 2-D en 3-D en WPF

3D Programming for Windows

¿Cómo cargar una tabla de BD hecha en SQL 2005 en WPF?

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

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

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

STACKPANEL

DOCKPANEL

GRID

WRAPPANEL

CANVAS

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

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

Liberado IE8 Beta 1 (Developer Preview)

Microsoft Photosynth

HD VIEW

Héctor Uriel Pérez Rojas

Tu voto:

Tu voto:

3D Programming for Windows

Tu voto:

Tu voto:

Tu voto:

Tu voto:

STACKPANEL

DOCKPANEL

GRID

WRAPPANEL

CANVAS

Tu voto:

Tu voto:

Tu voto:

Tu voto:

Tu voto:

Tu voto: