sábado, 5 de septiembre de 2015

Windows Presentation Foundation

Windows Presentation Foundation (WPF) provee a los programadores un modelo unificado de programación para construir aplicaciones de escritorio con experiencias visuales realmente impresionantes. El núcleo de WPF es un motor de renderizado de resolución independiente basado en vectores, que permite aprovechar las características del hardware de gráficos moderno. Para esto, WPF incluye dentro de sus características, un lenguaje basado en XML, conocido como Extensible Application Markup Language (XAML), controles, enlace de datos, soporte para gráficos 2D y 3D, animaciones, plantillas, y muchas otras características de personalización de interfaz.

WPF es un subconjunto de .NET Framework y por lo tanto viene incluído en él y puede ser usado con lenguajes como por ejemplo Visual Basic .NET o C#. Uno de los objetivos principales de WPF es separar la presentación de la aplicación del comportamiento. Esto, se logra mediante el uso del lenguaje de marcado XAML, con el cual se crean los componentes de interfaz como diálogos, ventanas, controles de usuario, entre otros; y un lenguaje de comportamiento (code-behind) que implementa la funcionalidad a las interacciones del usuario, lo cual incluye manejo de eventos y acceso a datos.

Por lo tanto, dominar WPF implica dominar por lo menos dos tecnologías, las cuales son como se ha mencionado anteriormente XAML y un lenguaje de comportamiento (code-behind) como por ejemplo C#. Además de esto, es necesario conocer el MVVM (Model View ViewModel), el cual nos ayudará a entender mejor el proceso de interacción que se da al desarrollar aplicaciones en WPF. A continuación, presentamos un ejemplo sencillo de aplicación en WPF.

XAML


En el código de más abajo, hemos definido un elemento de tipo Window que se encarga de crear una ventana con los estilos del sistema operativo. Dentro de Window, se encuentra el elemento Button el cual tendrá asociado un evento que se disparará al dar clic sobre él. Siguiendo con el elemento Window, definimos los namespaces que engloban la app con el atributo xmlns. El atributo x:Class, define una clase en code-behind, que es la que estará vinculada al control de la ventana. Finalmente, los atributos Width y Height definen el ancho y alto de la ventana respectivamente.

<Window x:Class="SDKSample.AWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window with Button" Height="100" Width="250">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>
</Window>


CODE-BEHIND


Como code-behind se ha elegido C#, aunque también puede realizarse una implementación en Visual Basic .NET como se mencionó anteriomente. Lo importante del código que se presenta, sin entrar en detalles, es ver el event handler que se ha creado para el botón de la interfaz. En este caso, al hacer clic en el botón de la ventana aparecerá un mensaje del sistema con el texto “Hello, Windows Presentation Foundation!”.

using System.Windows; // Window, RoutedEventArgs, MessageBox 

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI 
            // that is defined in markup with this class, including  
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}


Compilando en Visual Studio


Para compilar lo visto anteriormente en Visual Studio y probar el ejemplo, debemos crear un nuevo proyecto llamado SDKSample.



Al crear el proyecto por defecto se creará el contenido del archivo MainWindow.xaml y MainWindow.xaml.cs. Los contenidos de estos dos archivos deben ser reemplazados por los archivos XAML y C# definidos anteriormente.



Al final, compilamos y ejecutamos el proyecto dando clic en el ícono Start. El IDE debe mostrar un mensaje similar al que se muestra a continuación.



Hasta la próxima!.


Referencias

- Introduction to WPF (2015, Semtember). In Learn to Develop With Microsoft | MSDN. Retrived 23:09, Semptember 22, 2015 from https://msdn.microsoft.com/en-us/library/mt149842(v=vs.110).aspx?cs-save-lang=1&cs-lang=csharp
- Extensible Application Markup Language. (2015, June 7). In Wikipedia, The Free Encyclopedia. Retrieved 03:38, August 26, 2015, from https://en.wikipedia.org/w/index.php?title=Extensible_Application_Markup_Language&oldid=665911146