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

 

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í:

<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>
            </Grid>
        </Button>
    </Grid>
</Window>

 

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

<Image Source=”bluemonster.jpg” Grid.Column=”0″ Grid.Row=”1″></Image>

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:

<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”></TextBox>
            </Grid>
        </Button>
    </Grid>
</Window>

 

La línea que nos crea el textbox es:

<TextBox Text=”Hello world” Grid.Column=”1″ Grid.Row=”1″ TextAlignment=”Center”></TextBox>

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.

 

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

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

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

<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

Visual Basic .NET vs C# .NET: ¿Cual es mejor y por qué?

 

El próximo 6 de Mayo, Second Nug tiene el honor de presentar a dos ponentes de excepción, Guillermo Som (el Guille) y Marino Posadas (el Ave Fénix), en la que será una gran batalla donde dos voces con gran experiencia expondrán sus mejores bazas en un duelo sin igual: VB .NET vs C# .NET.
Sabremos por qué se decantaron por un lenguaje u otro y nos presentarán su evolución en las nuevas versiones del .NET Framework. Nos desvelaran secretos y trucos de sus defendidos y veremos si es cierto aquello de que lo que se puede hacer con uno, se puede realmente hacer con el otro.
Además los asistentes podrán resolver sus dudas preguntando a nuestros expertos y participar en el resultado final de la contienda.
El eterno dilema al descubierto. ¿Quién será el vencedor?

El evento será a las 19:30 - 21:30 (GMT+2), y como en las anteriores ocasiones, se retransmitirá vía Web a través de Live Meeting.

Si no tienes Live Meeting, puedes descargarlo en el siguiente enlace.

Podéis registraros en el evento en el siguiente enlace.

Héctor Pérez

Recreando el juego del Ping Pong con Windows Forms

 

Vale, pues como recordarán los asistentes a la sesión del sábado 19, hicimos un juego a base de Windows Forms, por si alguien quiere replicarlo, aquí les dejo lo que hicimos:

1.- Se crea un proyecto tipo Windows Forms, y se agregan 2 botones, un radiobutton y un timer, a continuación, se procede a poner en blanco las propiedades “Text” de los botones y del radiobutton. Se ajusta la propiedad de anchor para los botones, para el botón 1 que el anchor sea solo a la izquierda, y para el botón derecho, solo a la derecha. Se marca la propiedad “Checked” del RadioButton en True. Asignamos el valor 20, para la propiedad “Interval” del Timer. Finalmente se ajustan los elementos visualmente para dar la apariencia del juego  :

Ahora, falta crear la funcionalidad del game, esto se hace con el siguiente código:

Public Class Form1
    ‘Se definen las coordenadas
    Private dx As Integer = 1, dy As Integer = 1

    Private Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        RadioButton1.Left += dx
        RadioButton1.Top += dy
        ‘Se hacen las respectivas comparaciones para checar donde se encuentra la pelota, así se determina hacia donde tiene que ir la pelota
        dx = IIf(RadioButton1.Location.X >= Me.ClientSize.Width - RadioButton1.Width, -1, dx)
        dx = IIf(RadioButton1.Location.X = 0, 1, dx)
        dy = IIf(RadioButton1.Location.Y >= Me.ClientSize.Height - RadioButton1.Height, -1, dy)
        dy = IIf(RadioButton1.Location.Y = 0, 1, dy)
    End Sub

    Private Sub Form1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles Me.KeyPress
        ‘Se hace la comparación de las teclas presionadas, si es Q, el botón 1 irá para arriba, si es Z, para abajo
        Button1.Top -= IIf(Char.ToUpper(e.KeyChar) = “Q”, 5, 0)
        ‘Esta expressión iif, equivale a:
        ‘If (Char.ToUpper(e.KeyChar)) = “Q” Then
        ‘    Button1.Top = 5
        ‘Else
        ‘    Button1.Top = 0
        ‘End If
        ‘Lo mismo ocurre con todas las demás expresiones
        Button1.Top += IIf(Char.ToUpper(e.KeyChar) = “Z”, 5, 0)
    End Sub

    Private Sub Form1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove
        ‘Se asigna el valor de las coordenadas del mouse al alto del botón
        Button2.Top = e.Y
    End Sub

    Private Sub Form1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
        ‘Se activa timer cuando el botón del mouse izquierdo es presionado
        Timer1.Enabled = e.Button = Windows.Forms.MouseButtons.Left
    End Sub
End Class

 

 

Vale, pues ese es el código, si quieren aumentar en dado momento el grado de dificultad, deben de aumentar el valor de interval, para que la pelotita vaya mas rápido.

Ahora bien, debe considerarse que aún no se detectan las colisiones, así que eso os queda de tarea para que practiquéis un poco. Espero que les haya gustado, hasta la próxima, y cualquier cosa no duden en escribir.

El proyecto completo lo encuentran aquí:

Descargar

Salu2

Héctor Pérez

Expression Design, overview muy muy general

 

 

Vale qué tal chavales? aquí de regreso con el space de la célula, e inicio con este overview muy general acerca de Expression Design, en resumidas cuentas, con base de lo que hicimos el sábado en el laboratorio:

Expression Design es una herramienta diseñada para diseñadores gráfico y dibujantes profesionales. Este software, hace posible diseñar, dibujar y construir cualquier tipo de documento gráfico. Este artículo examina los puntos fuertes a través de un overview muy general. and addresses how you can integrate this software into a company’s workflow.

 

Diseño basado en vectores

Expression Design hace posible crear dibujos sofisticados en casi cualquier formato. Este software amigable trae consigo herramientas estándares de dibujo, como la clásica pluma, los gradientes vectoriales, las brochas, la herramienta de texto vectorial, herramientas geométricas, y muchas mas. Este software ofrece otras herramientas innovadoras como las siguientes: 

Pen: Una herramienta clásica, no solo en expression design, sino en cualquier software de diseño, nos sirve para crear trazos a voluntad, con la posibilidad de arquear la línea conforme a voluntad.

Polyline: Puedes crear los arcos de los círculos de forma muy sencilla.

B-Spline: Te permite dibujar figuras que con la pluna, llevaría muchísimo tiempo dibujar.

Polígono: Esta es una herramienta que permite dibujar polígonos con número de lados, Profundidad y ángulo a voluntad. En este ejemplo he creado un polígono con 10 puntos, una profundidad del 100% y un ángulo de 365%.

 

Una de las cosas que siempre me han gustado de expression, es la capacidad de ajustar el mismisimo entorno de expression a tus necesidades, es decir, hacer los elementos mas chicos o mas grandes, solo hay que ir a Edit - Options y finalmente Workspace:

EJEMPLO A 50%

EJEMPLO A 150%

 

Vale, pues hasta aquí, un overview MUYYY ,  PERO MUUUUY general, pero creo que explica varios conceptos que tal vez no hayan quedado claros en la sesión, mas adelante, seguiremos hablando de expression y del Workflow entre Designers y Developers Hasta pronto.

Héctor Pérez

¿Qué escribir?

 

Vale, pues siento que he dejado un poco abandonados tanto mi space, como el de la célula, como mi wordpress, así que creo que  lo retomaré un poco, la gran pregunta es… ¿Qué escribir?

En verdad que lo que admiro de los metrofloggeros es su tenacidad para subir diariamente 1 foto diferente, plus de pasar escribiendo de metro en metro cosas diferentes, una de esas personas es mi querida amiga Reggy, quien siempre justo a las 12 de la noche me deja de hablar por empezar a firmar metros XD jaja, pero aún así la quiero mucho, porque siempre juega conmigo :).

¿Qué mas contar? Pues que este mes es un mes de cumpleañeros, mañana cumple años Sally, una niña que tenía rato que no la veía, pero que es muy buena onda, el martes cumple años mi hermano Miguelon, y finalmente el 27, a la que llamo mi Designer jeje, mi súper amiga del alma Mel, a la que quiero también un chorro, y a la que conozco desde que era una niña con la que siempre me estaba peleando jaja, cómo cambian las cosas….

¿Qué mas escribir? Vale pues que me he puesto a pensar, que siempre debes estimar y querer a un buen amigo como si fuera la última vez que lo ves, nunca sabes cuando podrán distanciarse por uno u otro motivo, así como pasó con algunos con los que conviví y eran parte de mis motivos para asistir a la sociedad Intermedia :(  Lamentablemente, no sirve de nada el arrepentirse, ni el extrañarlos, sino solo el mirar hacia adelante y dejar atrás el pasado, vivir el presente y pensar en el mañana.

Bueno, esta no es una nota informática ni nada por el estilo, pero es bueno de vez en cuando expresar algunas cosas, empezaré a bloggear de nuevo, para tratar de compartir con ustedes algo de conocimiento.

Un saludo y abrazo de parte de su amigo

Héctor Pérez, DCE GOLD 2005

 

Silverlight 2 Beta1 liberado!!

 

Vamos que estuvo muy bien la ola de lanzamientos que Microsoft ha hecho durante el Mix, uno de los mejores ha sido sin duda la liberación de la beta1 de silverlight 2.

Silverlight, para los que lo desconozcan, es un plugin multiplataforma y multibrowser, que utiliza las capacidades de WPF, para crear aplicaciones RIA(Rich Internet Applications) en la web.

Si quieres verlo en acción, te recomiendo la página: http://memorabilia.hardrock.com/ , aplicación de la conocida hard rock, y la cual ha sido desarrollada con la beta 1 de silverlight.

Cuando ingreses por primera vez, te pedirá instalar el plugin, acepta (no tarda mucho en instalar).

Aquí la aplicación en vivo:

Salu2

Héctor Pérez

Liberado IE8 Beta 1 (Developer Preview)

 

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

Se ha terminado el Mix08 :(

 

Vale qué tal chicos? Espero que muy bien!! Ya a un paso de vacaciones, y con excelentes noticias de el evento Mix 08, el cual se llevó a cabo en la ciudad de las vegas y al cual no pude asistir por falta de tiempo (jaja, eso quisiera :P)

Pues en fin, el Mix es un evento que habla sobre tecnologías Microsoft, sobre las tecnologías que están revolucionando el mundo, vamos las tecnologías con las que seguramente nos tocará trabajar en el futuro, tales como WPF, Silverlight 2.0, IE8, etc etc etc.

Poco a poco les iré subiendo la información mas relevante acerca de este estupendo evento

Chau

Héctor Pérez