Colabora .NET

PRIMEROS PASOS CON XAML

[Primer Contacto con XAML “Hola Mundo”]

 

Fecha: 15/Sep/2006 (13-09-06)
Autor: Carlos Andrés Rojas Paz - carojaspaz@gmail.com

 


Introducción

Navegando en la red me encontré con que: Microsoft había estado madurando una nueva idea que complementa a la nuevo Framework 3.0 WINFX, el cual incluye los proyectos AVALON, INDIGO, INFO CARDS Y WORKFLOW el grupo de desarrollo en un momento dado se encontró con la necesidad de crear un nuevo lenguaje de marcas que vaya de acuerdo con lo que tenían planeado y basado en XML el XAML, este es un pequeño manual de como crear el tradicional hola mundo usando XAML y Microsoft Expression Interactive Designer.

Nota:
Para conocer más sobre la historia de XAML pueden visitar: A brief history of XAML

¿Qué es el XAML?

Lenguaje Extensible de Marcas para Aplicaciones, XAML (eXtensible Application Markup Language) se pronuncia “ZAMMEL”, es un lenguaje declarativo basado en XML que define los objetos y sus propiedades usando esquemas XML. La sintaxis XAML se centra en la definición de IU (Interfaces de Usuario) para WINDOWS PRESENTATION FOUNDATION (WPF) y por consiguiente esta separado del código oculto de la aplicación. A pesar de que XAML esta centrado su uso en la plataforma Windows, el WPF/E (WINDOWS PRESENTATION FOUNDATION/EVERYWHERE) tiene la iniciativa de llevar XAML a otras plataformas y dispositivos.

Prerequisitos

Antes de iniciar, debemos tener instalado en nuestro equipo o donde vayamos a realizar nuestra aplicación, El Framework 3.0 Runtime y Microsoft Expression Interactive Desginer, se pueden descargar desde la pagina oficial de Micrososft, encontrarán que se pueden descargar complementos para el Framework 3.0 y recomendable que instalen el Windows SDK.

Hola Mundo

Creo que estamos listos, bien, procedemos a abrir nuestro Interactive Designer, es una interfaz muy intuitivas, en el menu View encontramos una serie de paneles que nos facilitan el trabajo con el escenario de nuestro ejemplo, aparece un nuevo proyecto el cual lo renombramos como HolaMundo, en el visor del proyecto algo asi como el explorador de soluciones de Visual Stuido encontramos la estructura del proyecto, un Archivo Application.XAML y un archivo Scene1.xaml los dos con sus respectivos archivos de código oculto, con extención cs, hacemos un par de cambios, estos son a gusto personal pero hay que tener en cuenta las referencias que hay que cambiar, renombramos el archivo scene1.xaml, por hola.xaml. Al hacer esto y al renombrar el proyecto debemos hacer un par de cambios en los archivos xaml, abrimos Applicacitos y hola, seleccionamos la vista de codigo XAML, y cambiamos en hola.xaml el siguiente código donde dice UntitledProject1 lo cambiamos por HolaMundo que es el namespace y Scene1 por Hola que es la clase y ademas podemos cambiar algunas propiedades como el ancho y el alto de la ventana:
x:Class="HolaMundo.hola"
Width="320" Height="240"
Hacemos lo mismo para el archivo Applications.xaml y nos queda algo asi:
x:Class="HolaMundo.MainApplication"
StartupUri="hola.xaml"
Se pueden alterar las propiedades y crear objetos por código pero por ahora continuemos con los cambios, abrimos el archivo hola.xaml.cs y hacemos los siguientes cambios:

namespace HolaMundo
{
    public partial class hola
    {
        
        public hola()
        {
            this.InitializeComponent();

            // Insert code required on object creation below this point.
        }
    }
}

lo mismo para el archivo Application.xaml.cs cambiamos el name space
namespace HolaMundo
{
    public partial class MainApplication: System.Windows.Application
    {
        protected override void OnLoadCompleted(NavigationEventArgs e)
        {
            // Set the Window title.
            this.MainWindow.Title = "Hola Mundo";
...

Para comprobar que todo esta bien, guardamos todos los archivos, vamos al menu Project y hacemos un Build Project, no debe aparecer ningun error, ahora volvemos al archivo hola.xaml y lo pasamos a la vista de diseño, esto es igual que en cualquier ambiente visual drag-an-drop, los controles estan en el visor de Library, si no esta disponible lo activan en el menu View y pueden cambiar la pariencia de todos los controles con el visor Appearance, eso si a su gusto, yo diseñe algo pero mis habilidades en diseño gráfico son bastante reducidas asi que traten de mejorarla.


Listo no hemos escrito nada de código XAML, el Interactive Designer lo hizo por nosotros si miramos el código de hola.xaml, no encontramos con una codificación similar a un XML, y reconocemos los objetos como botones, etiquetas y cuadros de texto y sus propiedades, bien, ahora vamos a programar las respectivas acciones de dichos botones el código es este:

public partial class hola
    {
        
        public hola()
        {
            this.InitializeComponent();

            // Insert code required on object creation below this point.
        }
        //Boton Saludar
        private void Saludar(object sender, RoutedEventArgs e)
        {
            this.Label1.Content = "Hola " + this.TextBox.Text;
        }
        //Boton Salir
        public void Salir(object sender, RoutedEventArgs e)
        {
            HolaMundo.MainApplication.Current.Shutdown();
        }
    }

Ya tenemos la codificación pero bebemos asignar metodos al evento Click de los botones, pero esto no es como en Visual Studio que simplemente das doble click sobre el botón, con Interactive Designer podemos hacerlo de dos forma mediante la interfaz, es decir selecionamos el botón, activamos el panel Event en el menu view, con el botón selecionado agregamos el evento click y le siganamos el metodo deseado como se muestra en la imagen:


O bien podemos hacerlo mediante código, en la etiqueta Button asignamos el método que queremos asi por ejemplo para el boton saludar el codigo se verá así para el boton salir:

<Button HorizontalAlignment="Center" VerticalAlignment="Bottom" 
Margin="0,0,0,11" Width="53.3399999999999" Height="25" 
Background="sc#1, 0.472675, 0.5720845, 0.6036889" 
x:Name="Button1" Grid.Row="1" Content="Salir" 
Click="Salir">

Bueno parece que esto es todo, probamos la aplicacion y listo.

Esto es todo por hoy

Espacios de nombres usados en el código de este artículo:

using System;
using System.IO;
using System.Net;
using System.Security;
using System.Security.Permissions;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;System...


Código de ejemplo (ZIP):

 

Fichero con el código de ejemplo: SnowMk_Hola_Mundo_XAML.zip - 6 KB

(MD5 checksum: 9AC4565DA1EF140EDBC9E29931772070)

 


ir al índice principal del Guille