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

 

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:

redes

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:

wpfapp

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:

grid

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

<Grid>       
</Grid>

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.- 

<Grid>       
</Grid>

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

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

 

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:

redes

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:

wpfapp

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:

grid

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

<Grid>       
</Grid>

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.- 

<Grid>       
</Grid>

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