Cómo programar/diseñar con WPF cómodamente

Hablando con un amigo me di cuenta que si no has hecho nada con WPF, es muy complicado saber cómo programar cómodamente. Yo, que llevo trabando duramente con WPF lo últimos 10 días, he buscado la forma más cómoda para diseñar y programar con WPF, no tiene porque ser la mejor, pero para mí me es más cómoda que otras.


Para ello necesitamos dos herramientas:


·         Microsoft Expression Blend: http://www.microsoft.com/expression


·         Microsoft Visual Studio 2005: http://msdn.microsoft.com/vstudio


Quiero resaltar Blend ya que si hablamos de WPF usaremos mucho más Blend que Visual Studio. ¿Por qué? Para explicar el porqué primero explicaré algunos truquillos.


Para empezar a trabajar abriremos Blend (como administrador) y luego abrimos en él nuestro proyecto. Si lo que hacemos es abrir el proyecto con Blend (desde el sistema de archivos) lo abriremos sin permisos de administrador, por eso debemos abrir primero Blend y luego el proyecto. Una vez que esté cargado el proyecto hacemos click derecho en el proyecto (en la ventana “Project”, pestaña “Files”) y hacemos click en “Edit Externally”. En este momento se abrirá Visual Studio 2005 (sólo Standard o superior), recomiendo no tener las extensiones de WPF para VS 2005 debido a que el editor consume muchos recursos, no está lo suficiente maduro y por ello usamos Blend.


Visual Studio 2005 lo usaremos con dos objetivos muy claros:


·         Tirar líneas de código (ni asociar eventos, solo código)


·         Depurar


Aunque parezca extraño cosas como asociar métodos a eventos lo haremos también con Blend.


Para asociar los eventos lo que haremos será (en Blend):


1.       Seleccionamos el control


2.       Properties


3.       Events (al lado del nombre en la ventana properties)


4.       Buscamos el evento


5.       Escribimos el nombre que queremos que tenga el método


6.       Pulsamos Intro


En este momento Visual Studio (que cargamos anteriormente) generará el método del evento. En caso de no tener VS2005 Standard o superior te aparece un MessageBox en el que te explica que el manejador de evento se copiará al portapapeles y que lo debe de copiar en un archivo especifico.


Para depurar tenemos que haber guardado en ambos entornos (hay que tener cuidado de no estar editando el mismo archivo en ambos). En ese momento depuramos (F5) en Visual Studio. Lo hacemos en él, porque si hay algún error y lo ejecutamos con Blend (no se puede llamar depurar ya que no tiene depurador) solo aparece una ventana de que el programa ha fallado (como cualquier otro aviso del sistema de fallo de software). En cambio si lo hacemos con Visual Studio tenemos depurador que detecta la excepción, la captura, etc.


Cuando diseñamos con Blend, la forma más cómoda la logramos pulsando F4, ya que se amplía la superficie de trabajo, minimizando las ventanas laterales, para volver al entorno anterior solo hay que volver a pulsar F4.


Blend se puede configurar con unos colores claros en vez de oscuros (Tools>Options…>Theme>Expression light) pero yo no lo recomiendo debido a que tener esos colores blancos desprende demasiada luz y cansa a la vista, sobre todo si pasamos muchas horas diseñando. En la misma ventana de opciones (Tools>Options…) aconsejo establecer el zoom a 80%, ya que con el 100% el entorno es demasiado grande y compacto, de la otra forma se ve (para mi gusto) mucho mejor.


Si tenemos seleccionado un control si pulsamos CTRL + 0 (no en el teclado numérico, en el teclado normal), el control seleccionado se ampliará ocupando toda la superficie de diseño.


Si se me ocurre algún truquillo más lo publicaré [:D].

Tip/Trick: Cómo capturar la pantalla

A veces nos puede resultar útil o necesario capturar la pantalla del usuario. Y para esto nos podemos servir de las librerías de GDI+.


Para nuestro ejemplo usaremos un Form, un Timer y un PictureBox llamados Form1, _tmr y _pctrBx respectivamente y la propiedad Enable del Timer la establecemos en True.


Antes de nada en nuestra clase Form1 declaramos:


// Buffer de gráficos


Graphics _grphcs;


//Imagen que se mostrará en el PictureBox


Bitmap _btmp;


 


//Ancho de la pantalla


int _screenWidth;


//Alto de la pantalla


int _screenHeight;


Ahora en el constructor del Form, debajo de InitializeComponent establecemos las variables declaradas:


//Creamos la imagen con tamaño 150px x 150px


_btmp = new Bitmap(150, 150);


//Creamos el buffer apartir de la imagen


_grphcs = Graphics.FromImage(_btmp);


//Establecemos el ancho de la pantalla


_screenHeight = Screen.PrimaryScreen.WorkingArea.Height;


//Establecemos el alto de la pantalla


_screenWidth = Screen.PrimaryScreen.WorkingArea.Width;


Ahora en el evento Tick del Timer añadimos el siguiente código:


//Obtenemos la posición del cursor


Point _pnt = Cursor.Position;


//Centramos el cursor


_pnt.X -= 75;


_pnt.Y -= 75;


//Rellenamos la imagen de negro para las zonas no visibles


_grphcs.FillRectangle(Brushes.Black, new Rectangle(0,0,150,150));


//Obtenemos la captura de la pantalla usando la posicion que obtuvimos


//antes del cursor, copiamos la imagen en la posición (0,0) y usamos


//el tamaño de siempre


_grphcs.CopyFromScreen(_pnt, new Point(0, 0), _btmp.Size);


//Por último establecemos el BitMap como imagen del PictureBox


_pctrBx.Image = _btmp;


El código completo sería:


public partial class Form1 : Form


{


    // Buffer de gráficos


    Graphics _grphcs;


    //Imagen que se mostrará en el PictureBox


    Bitmap _btmp;


    //Ancho de la pantalla


    int _screenWidth;


    //Alto de la pantalla


    int _screenHeight;


 


    public Form1()


    {


        InitializeComponent();


        //Creamos la imagen con tamaño 150px x 150px


        _btmp = new Bitmap(150, 150);


        //Creamos el buffer apartir de la imagen


        _grphcs = Graphics.FromImage(_btmp);


        //Establecemos el ancho de la pantalla


        _screenHeight = Screen.PrimaryScreen.WorkingArea.Height;


        //Establecemos el alto de la pantalla


        _screenWidth = Screen.PrimaryScreen.WorkingArea.Width;


 


    }


 


    private void _myTimer_Tick(object sender, EventArgs e)


    {


        //Obtenemos la posición del cursor


        Point _pnt = Cursor.Position;


        //Centramos el cursor


        _pnt.X -= 75;


        _pnt.Y -= 75;


        //Rellenamos la imagen de negro para las zonas no visibles


        _grphcs.FillRectangle(Brushes.Black, new Rectangle(0,0,150,150));


        //Obtenemos la captura de la pantalla usando la posicion que obtuvimos


        //antes del cursor, copiamos la imagen en la posición (0,0) y usamos


        //el tamaño de siempre


        _grphcs.CopyFromScreen(_pnt, new Point(0, 0), _btmp.Size);


        //Por último establecemos el BitMap como imagen del PictureBox


        _pctrBx.Image = _btmp;


    }


}


Podéis descargar el código fuente aquí.


Espero que os sea útil.

Primeros pasos con WPF/E

Este artículo servirá para iniciarse a Windows Presentation Foundation Everywhere. Actualmente la última versión publicada es la CTP de febrero. La podéis descargar, junto al SDK en www.microsoft.com/wpfe. Para ello la única herramienta que usaremos será el bloc de notas.


Una vez instalado WPF/E ya podemos empezar a desarrollar para él.


Lo primero que haremos será crear una carpeta e incluir el archivo aghost.js en ella. Este script se encarga de comprobar si tenemos instalado wpf/e o si la versión instalada es la necesaria para ejecutar la aplicación wpf/e.


Ahora creamos un archivo llamado intro.htm, y añadimos el siguiente código:


<html>


<head>


    <title>Introducción a wpf/e</title>


    <script src=»aghost.js» type=»text/javascript»></script>


</head>


<body>


   


</body>


</html>


Añadimos dentro de la etiqueta body una capa con el id wpfeControl1Container.


<div id=» wpfeControl1Container»></div>


 


Y debajo de la capa ponemos el siguiente script (al final veréis cual es el código HTML que genera este script):


<script type=»text/javascript»>


      new agHost(«wpfeControl1Container»,


            «agControl1»,«300px»,


            «300px»,«#D6D6D6»,


            null,«wpfexaml.xaml»,


            «false»,«30»,null);


var agControl = document.getElementById(«wpfeControl1»);
</script>


Ahora solo nos falta crear el archivo .xaml, que (como podemos ver en el código anterior) debemos llamar wpfexaml.xaml, lo creamos y añadimos el siguiente código, es un ejemplo muy sencillo:


<Canvas


   xmlns=«http://schemas.microsoft.com/client/2007«


   xmlns:x=«http://schemas.microsoft.com/winfx/2006/xaml«>


      <Rectangle Width=«300« Height=«300« Stroke=«Black« StrokeThickness=«5« Fill=«Red«>


              


         </Rectangle>


</Canvas>


 


El elemento raíz en estos XAML es el elemento Canvas, al que importamos los esquemas y añadimos un control Rectangle, con el borde de 5px y negro, de tamaño 300x300px y relleno de rojo.


Ahora ya podemos abrir el archivo intro.htm, habilitar los scripts y ahí tenéis el cuadrado [:)].




El código que genera el script que añadimos debajo de la capa es el siguiente:


    <object id=»WpfeControl1″


        width=»300″


        height=»300″


        classid=»CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA»


 


        <param name=»BackgroundColor» value=»#D6D6D6″ />


        <param name=»SourceElement» value=null />


        <param name=»Source» value=»wpfexaml.xaml» />


        <param name=»MaxFrameRate» value=»30″ />


    </object>


Esto significa que no tenemos porque generarlo con JavaScript sino que también podemos escribir nosotros el HTML de WPF/E.


Si lo escribiésemos a mano el código sería el siguiente:


<html>


<head>


    <title>Introducción a wpf/e</title>


    <script src=»aghost.js» type=»text/javascript»></script>


</head>


<body>


    <div id=»wpfeControl1Container»></div>


    <object id=»WpfeControl1″


        width=»300″


        height=»300″


        classid=»CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA»>


       


        <param name=»BackgroundColor» value=»#D6D6D6″ />


        <param name=»SourceElement» value=null />


        <param name=»Source» value=»wpfexaml.xaml» />


        <param name=»MaxFrameRate» value=»30″ />


 


    </object>


</body>


</html>


 


Esto ha sido una pequeña introducción a wpfe. Como resumen, los 3 elementos para usar WPF/E son:




  • La página HTML: Contiene el control de WPF/E.


  • El script (aghost.js): Comprueba si WPF/E está instalado y cual es la versión necesaria.


  • El archivo XAML: WPF/E lo interpretará y lo mostrará.

Descarga el código fuente aquí.

Marzo se está terminando…

Tras 11 meses como blogger (8 de ellos en geeks.ms) este ha sido el por mes con tan solo 3 posts, y justo esto me ha pasado después de haber sido nombrado blogger del mes (de febrero) en la http://labloguera.net. Tras haber pasado unos días llenos de examenes y duro trabajo es el momento de ponerse de nuevo a postear y más o menos tengo claro cuales son los temas que trataré en los próximos posts y estos serán los que me han quitado el tiempo de postear este mes.


Mi objetivo para mi blog esta privamera es la siguiente:



  • Trucos y consejos de WPF: Contaré algun truquillos y curiosidades sobre WPF.
  • Introducción a WPF/E: Quiero empezar a hacer una serie de artículos (en español) de introducción a WPF/E basandome en su SDK (en inglés) para aquellas personas que quieran leer la documentación en inglés. Además esta serie de artículos la iré actualizando según vayan saliendo las diferentes versiones. De tal forma que al final veamos como ha ido evolucionando.
  • Introducción a ASP.NET Ajax: A diferencia del tema anterior este será para casos concretos.
  • «Orcas»: Veamos que novedades y ventajas tiene el próximo Visual Studio «Orcas» (creo que 2007).
  • Gadgets para el Sidebar de Vista: Veremos alguna cosilla interesante sobre curiosidades al programar para la Sidebar.
  • Live SDK: Veremos que cosas podemos hacer con el nuevo SDK para la plataforma Live.
  • Plataforma Expression: También conoceremos alguna cosilla para el diseño con Expression.

Insisto que esto es mi intención que no creo que pueda cumplir toda, pero que sí serán los temas que intentaré hablar esta primavera.


Me gustaría que me mandaséis vuestras sugerencias a mi correo así como consultas sobre los temas que acabo de nombrar, podéis contactar conmigo desde la siguiente dirección:


http://geeks.ms/blogs/eecsaky/contact.aspx


Ahora podré hacer honor del titulo otorgado por labloguera.net [:D]


 

Descarga los hands on lab sobre ASP.NET Ajax

Como Sergio Tarrillo (http://geeks.ms/blogs/sergiotarrillo) preguntó en un comentario (http://geeks.ms/blogs/eecsaky/archive/2007/02/19/hands-on-labs-sobre-asp-net-ajax.aspx#11755) si tenía los Hands on Lab (http://geeks.ms/blogs/eecsaky/archive/2007/02/19/hands-on-labs-sobre-asp-net-ajax.aspx) ya que los enlaces estaban rotos.


Aquí los tenéis:


http://geeks.ms/files/folders/eecsaky/tags/Ajax+HOLs/default.aspx


Ahí lo podéis descargar, eso sí son las versiones en inglés.

Refactor!™ for ASP.NET

Me acabo de encontrar con este add-on gratuito para Visual Studio 2005. Sirve para refactorizar el código asp.net.


Podéis descargarlo en la siguiente dirección:


http://www.devexpress.com/Products/NET/IDETools/RefactorASP/


Y os recomiendo que leáis este post para ver como funciona:


http://blogs.msdn.com/webdevtools/archive/2007/02/02/free-refactoring-tools-for-asp-net-code-in-visual-studio-2005.aspx


Espero que os sea útil.


Además existe el Refactor para Visual Basic y C++:


http://www.devexpress.com/Products/NET/IDETools/VBRefactor/
http://www.devexpress.com/Products/NET/IDETools/RefactorCPP/

CTP de Marzo de Visual Studio "Orcas"

Parece que la gente de Redmon tiene algo en mi contra… últimamente cada vez que descargo/instalo alguna versión CTP/Beta en pocos días publican una nueva versión… Me paso con Virtual PC 2007 y ahora con «Orcas»…  Me pasé el anterior sábado descargando la CTP de enero y el domingo instalandola y hoy se ha publicado la CTP de enero.


Os dejo el link de descarga:


http://www.microsoft.com/downloads/details.aspx?FamilyID=b533619a-0008-4dd6-9ed1-47d482683c78&DisplayLang=en


Hasta el próximo sábado no la descargaré pero, lo que sí, esta CTP ocupa 1,4 GB más que la de enero. Algo nuevo tendrá que tener, no? [;)] En cuanto la pruebe os cuento.