Memory Test!

Hey! qué tal? ya tiene rato que no posteo, pero la verdad, esto de la graduación y titulación me ha tenido sin tiempo, en un rato libre que he tenido, he desarrollado una pequeña y sencilla aplicación para el concurso 10k MIX Challenge, es un juego sencillo, en el cual tienes que recordar el color que la máquina ha hecho brillar. Ha sido un reto para mí, ya que 10k es bastante poco, jaja, pero una labor satisfactoria al ver tu trabajo posteado 🙂

image

La aplicación en cuestión:

imagePasado el día último de inscripción de aplicaciones para el concurso, estaré discutiendo cómo he desarrollado esta pequeña aplicación, y porqué no? desarrollar una versión mas completa en WPF 🙂

Vota por mi aplicación en: http://mix10k.visitmix.com/Entry/Details/222

Gracias de antemano.

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:

Reggyctor_splashscreen

Programa en el escritorio:

reggyctor2

Reggyctor en acción:

Reggyctorcodeplex

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

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

Salu2

Héctor Uriel Pérez Rojas

Manejando cadenas de conexión en .Net con C#(3/3)

Bien, llegamos a la tercera y última entrega sobre el manejo de conexiones en .net con C#, hemos hablado en el pasado acerca de cómo crear una cadena de  conexión en la parte 1 y acerca de una manera mas eficiente para mejorar nuestro código en la parte 2.

En esta parte, hablaremos acerca de colocar nuestra cadena de conexión en un archivo de configuración, y cómo poder hacer uso de la misma en nuestro código.

Vamos a retomar el mismo proyecto que hemos venido manejando, y lo primero que haremos será agregar un nuevo archivo de configuración:

image

image

Lo dejaremos con el nombre por defecto. Ahora, el archivo creado nos mostrará lo siguiente:

image

¿Para qué servirá esto? Bueno, pues imagina que tienes 10 llamadas a tu base de datos con el código que hemos venido trabajando, si recuerdas, definimos en el código nuestra cadena de conexión; ¿Qué pasaría si de repente debemos cambiar el servidor de la conexión? pues un lío, habría que sustituir de una u otra forma cada una de las connection strings. Para evitarnos esto, creamos el archivo de configuración de nuestra aplicación, donde podremos agregar desde cadenas de conexión, hasta por ejemplo, colores de algún elemento visual. El formato de nuestro App.config está en xml, por lo que deberemos empezar a especificar etiquetas.

Nuestra primera etiqueta que agregaremos quedará:

   1: <?xml version="1.0" encoding="utf-8" ?>

   2: <configuration>

   3:     <connectionStrings>        

   4:     </connectionStrings>

   5: </configuration>

Si te das cuenta, cuando empiezas a escribir dentro del app.config, el intellisense de visual studio te indica de hecho, que <connectionStrings> está disponible para autocompletar.

Excelente, ahora, dentro de connectionStrings, podemos definir la cantidad de cadenas de conexión que nosotros queramos, pero solo definiremos una en nuestro ejemplo, agregamos pues, una nueva cadena de conexión de la siguiente manera:

   1: <?xml version="1.0" encoding="utf-8" ?>

   2: <configuration>

   3:   <connectionStrings>

   4:       <add name="miCadenaConexion" 

   5:            connectionString="Data Source=.\SQLEXPRESS;

   6:               Initial Catalog=BalloonShop;

   7:               User=balloonshop;

   8:               password=contraseña"/>

   9:   </connectionStrings>

  10: </configuration>

donde:

name = Nombre de tu cadena de conexión, puede ser cualquier nombre que desees;

connectionString = Hemos rescatado la cadena de conexión, que hemos utilizado en los posts anteriores, y la hemos colocado aquí.

Y listo, ya está listo nuestro archivo app.config, nos aseguramos de salvarlo, y ahora, cómo usarlo desde nuestro código?

Lo primero que debemos hacer, es agregar una nueva referencia, al ensamblado System.Configuration

image

Con un using, especificamos que queremos usar System.Configuration:

   1: using System.Configuration;

Ahora, cuando vayamos a definir nuestra cadena de conexión, debemos poner algo como esto:

   1: string miCadenaConexion = 

   2:                 ConfigurationManager.

   3:                 ConnectionStrings["miCadenaConexion"].

   4:                 ConnectionString;

Lo que hacemos, es llamar al administrador de configuraciones, quien obtiene la parte de connectionStrings de nuestro archivo app.config, ahí le especificamos el nombre de la cadena de conexión que queremos usar, y al final, le decimos que es la parte de connectionString la que nos interesa.

Si probamos nuestro código de ayer con esta modificación:

   1: using System;

   2: using System.Data.SqlClient;

   3: using System.Configuration;

   4:  

   5: namespace Cadenas_conexion_1

   6: {

   7:     class Program

   8:     {

   9:         static void Main(string[] args)

  10:         {

  11:             string miCadenaConexion = 

  12:                 ConfigurationManager.

  13:                 ConnectionStrings["miCadenaConexion"].

  14:                 ConnectionString;

  15:  

  16:             SqlConnection sqlconnection;

  17:  

  18:             using (sqlconnection = 

  19:                 new SqlConnection(miCadenaConexion))

  20:             {

  21:                 sqlconnection.Open();

  22:                 if (sqlconnection.State == 

  23:                     System.Data.ConnectionState.Open)

  24:                 {

  25:                     Console.WriteLine

  26:                         ("Conexión abierta");

  27:                     Console.Read();

  28:                 }

  29:             }

  30:  

  31:             if (sqlconnection.State 

  32:                 == System.Data.ConnectionState.Open)

  33:             {

  34:                 Console.WriteLine

  35:                     ("La conexión sigue abierta!");

  36:                 Console.Read();

  37:  

  38:             }

  39:             else

  40:             {

  41:                 Console.WriteLine

  42:                     ("La conexión se ha cerrado satisfactoriamente! :)");

  43:                 Console.Read();

  44:             }

  45:         }

  46:     }

  47: }

Obtendremos el mismo resultado:

image

Jeje, hemos pues, descrito en estas 3 partes, las mejores prácticas para manejar de una forma eficiente nuestras cadenas y conexiones a una base de datos, mas adelante, haremos uso de esto ampliamente 🙂

Salu2

Héctor Uriel Pérez Rojas

¡Pon a prueba tus habilidades de programación!

Si has sentido que te faltan retos de programación, quieres practicar un poco tus habilidades de programación, o simplemente quieres saber mas o menos en qué nivel estás en comparación a otros developers, te recomiendo ampliamente que visites el sitio:

http://www.topcoder.com/

La wikipedia nos lo define algo así:

TopCoder es una compañía que administra concursos de programación. TopCoder aloja semanalmente competiciones semanales en línea, sobre diseño y desarrollo. El trabajo hecho en estas competencias, produce software útil el cual tiene licencia para beneficio por TopCoder. Los competidores que trabajan en la creación de estos componentes, reciben regalías basados en estas ventas.

En sí, TopCoder organiza semanalmente  concursos en varias categorías, entre las cuales encontramos competencias de algoritmos, arquitectura de software, desarrollo de software, y un gran etcétera.

El modo de competencia, se basa en la llamada “Arena”, la cual es un lugar en donde se llevan a cabo las competencias. Los pasos para poder competir son los siguientes:

Primero, y antes de todo, debes registrarte en el sitio:

image

image

Aquí, te salen varias opciones, La primera, es para registrarte en competencias de desarrollo, la segunda, TopCoder Studio, va mas enfocada a diseñadores gráficos, y la tercera, a chavales de nivel preparatoria.

image

No falta que te diga qué datos poner aquí verdad?? jeje.

Una vez hecho todo esto, basta con que vayas a link para inicializar la aplicación Java, que te automáticamente lanzará la Arena; te recomiendo tener instalado la última actualización del JRE(java runtime environment):

image

image

Después de Permitir, solo tienes que loguearte con tu nombre d e usuario y password con los cuales te registraste, y el tipo de conexión:

image

 

Después de aceptar, vemos la tan ansiada Arena, en este punto, nos sentimos como los gladiadores romanos cuando competían entre ellos, claro en los momentos en los que hay competencia 😀

image

Ahora bien, como estás leyendo esto, supongo que eres principiante en la Arena (no en habilidades de programación), así que para familiarizarte un poco, puedes ir a ver los eventos anteriores, y comenzar a explorar un poco, dándole en la casilla de “Practice Room”(Debo aclarar que las condiciones de la Arena en las salas de práctica, son muy diferentes a las condiciones de competencia por $$$ jeje, así que te recomiendo que leas bien las instrucciones del sitio si quieres entrarle duro a esto):

image

En mi caso, seleccionaré el torneo #1, la competencia # 1: Inv2001 R1. Una vez seleccionado el reto, seremos transferidos al lugar donde sucedió una gran batalla entre gladiadores jeje:

image

image

Una vez aquí, deberás seleccionar el nivel de la lista, básicamente hay 3 niveles:

image

Eso de 250, 500 y 1000, básicamente son los puntos máximos que se pueden alcanzar en cada competencia. Para muestra, seleccionaremos el de 250, con lo que seremos transferidos al lugar del problema, que se divide en 2 áreas; Problem statement, y Coding Area. Problem statement, es el problema en cuestión, se podría decir que los requerimientos del problema:

image  La segunda parte, es tu espada, tus conocimientos reflejados en la solución del problema en el lenguaje que mas se te acomoda, Java, C++, C#, VB o Python, en mi caso y para esta demo, he escogido C#:

image

Después de poner tu código, puedes darle en compile, para compilar el proyecto, y checar que se compiló correctamente:

image

Si todo ha salido satisfactoriamente, posteriormente puedes darle en Test, con lo que podrás verificar que cumple con los requerimientos del problema:

image

image

Finalmente, le das click en submit, y te mostrará los resultados. Podrás ver los diferentes resultados de la gente que ha hecho el mismo ejercicio que tú, y valorar qué tan bien fue hecho tu código, además por cierto, de que podrás checar el código fuente de cada uno de ellos, para ver y aprender de sus habilidades 🙂 :

image

Ahora solo falta que lo hagas en un Torneo real, con tiempo límite y contra los demás gladiadores 🙂

Así es amigo, ya no hay motivo por el cual aburrirte en estas vacaciones, te he dado una gran opción para divertirte, claro si eres un gladiador con vestimenta de desarrollador verdadero. Un abrazo 🙂

Por cierto, hoy es mi cumpleaños jaja, así q se aceptan toda clase de regalos jeje 😛

Salu2

Héctor Pérez

Convirtiendo controles 2-D en 3-D en WPF

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:

13d

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

23d

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:

33d

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

43d

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

63d

53d

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

73d

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:

83d

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

93d

<Grid> 
    <local:TrackballDecorator>
    <local:Interactive3DDecorator> 
      <Viewport3D Width=»450″ Height=»225″> 
        <Viewport3D.Camera>
          <PerspectiveCamera Position=»0, 0, 4″  FieldOfView=»75″ />
        </Viewport3D.Camera> 
        <ModelVisual3D>
          <ModelVisual3D.Content>
            <DirectionalLight Color=»White» Direction=»0,0,-1″ />
          </ModelVisual3D.Content>
        </ModelVisual3D> 
        <local:InteractiveVisual3D
            Transform=»{StaticResource 3dTransform}»
            Geometry=»{StaticResource 3dMesh}»
            Visual=»{StaticResource 3dMaterial}» />
      </Viewport3D> 
    </local:Interactive3DDecorator>
    </local:TrackballDecorator> 
  </Grid>

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

103d

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:

113d

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

123d

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

        <Viewport2DVisual3D
            Transform=»{StaticResource 3dTransform}»
            Geometry=»{StaticResource 3dMesh}»
            Visual=»{StaticResource 3dMaterial}»>
        </Viewport2DVisual3D>
      </Viewport3D>

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

<Viewport2DVisual3D
            Transform=»{StaticResource 3dTransform}»
            Geometry=»{StaticResource 3dMesh}»
            Visual=»{StaticResource 3dMaterial}»>
          <Viewport2DVisual3D.Material>
            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial=»true»/>
          </Viewport2DVisual3D.Material>
        </Viewport2DVisual3D>

Con esto obtienes un resultado muy parecido al anterior,

143d

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

Nuevas Características de C# 3.0 (Automatically Implemented Properties)

A partir de esta entrada, empezaré una serie de posts donde mencionaré las nuevas características de c# 3.0, con las cuales simplificarás código y te ahorrarás tiempo.

Primero, vamos a hablar de las Automatically Implemented Properties(Propiedades implementadas automáticamente).

Anteriormente, y es común que las propiedades se establezcan de esta forma:

public class Persona
{
    private string nombre;
    private string ciudad;

    public int NOMBRE {
    get { return nombre; }
    set {  = value; } }

    public int CIUDAD {
    get { return ciudad; }
    set { y = value; } }
}

 

como vemos, primero se declaran atributos, en este caso nombre y ciudad, y posteriormente se crean las 2 propiedades correspondientes, ambas de escritura y lectura.

Ahora, en C#, ya no es necesario todo eso, y se simplifica a lo siguiente:

public class Persona
{
    public int NOMBRE{get; set;}
    public int CIUDAD {get; set;}
}

¿Qué ha cambiado? Bien, que ya no es necesario todo ese rollo de get{ return…..; sino que el compilador infiere que estamos estableciendo un regreso de valor y una asignación de valor, pero entra la duda, qué pasaría si quisieramos que fuera una propiedad de solo lectura? Bien, pues sencillo, tenemos que declarar el valor para set como privado, es decir:

public class Point
{
    public int NOMBRE{get; private set;}
    public int CIUDAD  {get; private set;}
}

Mucho mas sencillo no?

Salu2

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:

datagrid1

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:

datagrid3

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

datagrid4

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

datagrid5

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

datagrid6 

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

btn1

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:

grilla1

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:

grilla2

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:

exitem

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

sexplorer

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:

media1

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:

boton2

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:

imagen

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.

textbox

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:

textbox2

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

arbol1

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:

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

Recreando el juego del Ping Pong con Windows Forms(VB y C#)

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  :

Pingpong1

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