Duda en el blog

Bueno, pues en la sección de preguntas y respuestas me llega la siguiente consulta:

Hola Hector, muchas gracias por tu sitio,
ahora paso a mi consulta,
me gustaria tener un textbox en c# que haga autocompletar por ejemplo a las direcciones de email a partir de la @,
por ejemplo, que al escribir “usuariox@” el autocompletar muestre las opciones disponibles p.e. “@yahoo.com, @yahoo.es, @hotmail.com, @gmail.com, etc”, y que valla autocompletando segun se valla escribiendo la direccion p.e. “usuariox@ya” entonces muestre el autocompletar como “hoo.com, hoo.es, etc”
ya que he intentado con las propiedades del textbox agregando los items en autocomplete source custom como “@yahoo.com, @hotmail.com, @gmail.com, etc”
y el autocompletar solo se activa cuando comienzo a escribir con una “@” mostrando entonces las opciones o items;
he buscado por la red y no he encontrado nada parecido a lo que me interesa, espero no pedir mucho y haberme explicado bien,
en todo caso con que se activara el autocompletar a partir de la @ eso seria genial.

De antemano muchas gracias por tu ayuda.

Bueno, pues cuando leí esta consulta, me acordé rápidamente de el autocompletetextbox que creamos hace algún tiempo aquí

Bien, continuando con ese ejemplo, lo único que he hecho para que cumpla el requisito de arriba, es agregarle un evento KeyDown, para posteriormente detectar si se ha agregado un @ en la cadena, si es así pues se llena de posibles valores el ComboBox. Una imagen vale mas que mil palabras:

Hasta aquí todo normal, no nos muestra opciones a elegir aún, pero mira lo que sucede cuando agregamos el arroba y empezamos a escribir hotmail.com:

Proyecto: http://cid-2c11b62be5eb284d.skydrive.live.com/self.aspx/P%c3%bablico/Proyectos%20Blog/Autocomplete%20mails.zip

Salu2

Héctor Uriel Pérez Rojas

Reggyctor liberado

¿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

Recreando GaugeHector.xaml

Hola qué tal, pues en esta ocasión, a petición de nuestro buen amigo Microsoft MVP Gonzalo Pérez, enseñaré como recrear la versión de GaugeHector.xaml en Expression Blend:

Bien, lo primero que hice, fue copiar una de las versiones del control, creados por Gonzalo, para empezar a trabajar del mismo, en mi caso, he escogido la versión GaugeV3b.xaml:

Primeramente, cambiemos los colores del fondo, esto se hace selccionando el objeto fondo, que es un círculo:

 

, y le cambiamos a la propiedad fill, los siguientes valores:

Radial Grandient, con cuatro Gradient Stops, con los valores de izquierda a derecha:

1.- #FF7FC1F8

2.- #FF7DD2EA

3.- #FF48BAEA

4.- #FF1368AD

Con una separación mas o menos así:

Nos quedará algo mas o menos así:

Posteriormente, tenemos que ajustar, con la herramienta de degradado (Gradient Tool), a algo mas o menos así:

Listo, pacemos a recrear las dos lineas siguientes:

Esta seguramente es la parte mas complicadita del diseño, pero puede ser resuelta a través de las operaciones entre paths que nos permite realizar Expression Blend sin mayor esfuerzo.

En primer lugar, crearemos 2 círculos, uno encima de otro, puedes bajarle el valor alpha al círculo que irá encima, para que puedan quedar bien ajustado, creo que una imagen vale mas que mil palabras:

Como ves en la imagen, he creado 2 círculos, el amarillo servirá para “recortar”  el círculo externo. Pero antes, hagamos una copia del círculo amarillo, y lo ocultaremos, ya que nos servirá mas adelante:

Ahora, ya podemos hacer el recorte, seleccionamos primero el círculo amarillo que está visible, y posteriormente el círculo rojo, o sea el que está detrás del amarillo:

Acto seguido, nos vamos a menú-Object->Combine->Substract:

con esto, verás como es recortado el círculo

Cambiémosle el color por este: #FF555B6B

También, debemos cambiar al mismo color, todos los objetos dentro del contenedor Marcadores , con lo que obtendremos algo así:

El siguiente paso, es recortar el círculo, esto lo haremos de la misma forma, con operaciones entre paths, crearemos dos cuadrados, cada uno  en los límites del círculo con la enumeración del tacómetro, y sustraeremos de nuevo el cuadrado, menos el círculo:

—->

–>

lo que resta, es de nuevo, sustraer un cuadrado, a la parte que ha quedado flotando del círculo:

->

Listo, primera línea hecha! 🙂

Ahora, haremos lo mismo para crear una segunda línea, pero cortada en el número 40 y el número 100, para no repetir todo de nuevo, solo pondré algunas imagenes:

 

Perfecto, ahora solo basta ponerle un degradado lineal, con 7 Gradient Stops con los valores:

1.-#FFC9D425

2.-#FFF0F6A1

3.-#FFEBF28B

4.-#FFE07D1C

5.-#FFEA8D09

6.-#FFEE4F4F

7.-#FFCD1212

Acomodados de la siguiente forma:

Después de hacer un reacomodo a los números, cambiar las propiedades Fill del objeto borde a negro, y de sombra a Nulo, debemos tener algo como esto:

 

Excelente, pasemos a retocar el rectángulo del centro, el cual es llamado marco

Dentro de este, existe un objeto llamado fondo texto, será el primero a retocar, cambiandole los colores del gradiente a estos valores:

Izquierdo: #FF125F7C

Derecho: #FFFFFFFF

Modificaremos el fondo con la herramienta de degradado:

Ahora, crearemos un círculo dentro de nuestro canvas llamado marco, con los siguientes valores de relleno:

Stroke: No brush

Fill: Lineal Brush con  dos gradientes, el izquierdo con el valor #00FFFFFF y Alpha del 0%; y el derecho con valor #7FFFFFFF y con Alpha del 50%, y el fondo, modificado con la herramienta de degradado así:

Con lo que nuestro tacómetro debe lucir así:

Lo que falta ahora, es crear ese efecto de reflejo que va encima del control, lo mostraré con imagenes de nuevo, ya que se hace de nuevo a través de operaciones path:

Al resultado, le agregaremos un relleno gradiente, con 2 gradientStops, ambos de color blanco, pero con valores Alpha diferentes, el primero con 0% de Alpha, y el segundo con 20% de Alpha, con lo que obtendremos:

Ya por último, agregamos un círculo color blanco, con Stroke nulo, y con valor de alpha al 16% para dar una mejor impresión, con lo que el resultado final será:

 

Listo :D, ha quedado resuelto, como vemos, las operaciones path nos permiten hacer cosas maravillosas.

AHORA SÍ, NO TIENES PRETEXTOS PARA NO CREAR TU VERSION, HAZ TU PROPIA VERSION DEL CONTROL, Y APOYA ESTE PROYECTO!!!.

Mas información en el blog de Gonzalo:  http://geeks.ms/blogs/gperez/

Salu2

Héctor Uriel Pérez Rojas

“Hector the Wizard” finalmente publicado

Hola qué tal a todos? Bueno pues esta es una aplicación que he creado para el concurso de Mix 09, el reto se llama Mix 10K, se trata de crear una aplicación donde el total de archivos para la aplicación pese como limite 10k. Esta es la aplicación:

Básicamente, los primeros 5 pasos son para obtener un número, el cual puedes hacer en la aplicación, o a mano, el paso numero 6 es donde a partir del número en el paso 5, se tratará de adivinar el número sobrante.

Si quieres probarla y de paso votar por mí 😛 , puedes checarla aquí:

Mi entrada en el concurso 10k Competition

😉

Héctor Pérez

Databinding en WPF (2/N)

Hola de nuevo a todos, y felices fiestas patrias!! jaja, vale, pues en este día he llevado a cabo la grabación de la segunda parte de la serie «Databinding en WPF», espero que les sirvan mucho los conceptos que se tratan en estos videos. Cualquier duda o comentario, no duden en dejarlos vale? Me despido pues y q VIVA MÉXICO!!!!

Salu2

VIDEO EN MSN VIDEO:

LINK PARA DESCARGAR Screencast (Peso 27.2MB):

Databinding%202.wmv-download

Espero comentarios, y que Dios los Bendiga 🙂

Héctor Pérez

Databinding en WPF (1/N)

Vale, qué tal? He estado un poco despegado del blog, pero aquí estamos, para seguir tratando de daros una orientación en esta plataforma, en lo que pueda. Para este caso, he decidido empezar a realizar una serie de screencasts, porque siento que son mas fáciles de comprender, de todos modos, espero comentarios de todos ustedes 🙂

VIDEO EN MSN VIDEO:

LINK PARA DESCARGAR Screencast (Peso 13.3MB): http://oqn3aw.blu.livefilestore.com/y1pzypTrpkraUvBZ8sfYbZUgsgzgm8WTbeDXqmyE-1sbiCLXtoO29wHcz1OkCb_B2K_pMg42-rqtBE/Databinding%201.wmv?download

Espero comentarios, y que Dios los Bendiga 🙂

Héctor Pérez

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

 

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 4 de N

 

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

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

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

Descargar Microsoft .NET Framework 3.5

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

y de lado izquierdo, la estructura se mira asi:

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

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

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

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

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

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

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

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

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

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

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

Héctor Pérez

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