Ilide - Info C PR

por Nicolás Arrioja Landa Cosio
Introducción
a WPF y XAML
WPF presenta una nueva orma en la que podemos crear
interaces de usuario para nuestras aplicaciones gráfcas. Pero
no es solamente una nueva manera de hacer lo mismo: es un
ramework que permite tomar ventaja del hardware y llevar
a cabo interaces modernas y avanzadas que serían diíciles
de construir con las técnicas tradicionales. En este capítulo
analizamos los detalles undamentales para entender los
alcances de WPF y XAML en nuestros desarrollos.
▼ Entender WPF
WPF .......................166
....................... 166 ▼ Primera aplicación WPF........
........194
194
Arquitectura
Arquitectura de WPF.........
...................
............
.. 167
Entenderr los contene
Entende contenedores
dores.........
.............
.... 169 ▼ Resumen.................................197
Resumen.................................197
▼ Los paneles ............................

............................169
169 ▼ Actividades.............................198
Actividades .............................198
Servicio de atención al lector: [email protected]

166
166 5. INTRODUCCIÓN A WPF Y XAML
Entender WPF
Con la versión 3.0 de .NET se introdujo WPF.
WPF. Las herramientas
tradicionales uncionan muy bien si únicamente deseamos construir
aplicaciones que usan una orma con varios controles, pero que no
proveen uncionalidades extra al usuario. Si queremos construir una
interaz de usuario avanzada, con muchos elementos interactivos, es
necesario recurrir a dierentes tecnologías, como GDI+ y DirectX. El
problema reside en que estas no se encuentran
directamente relacionadas entre sí, lo que complica
el desarrollo de la interaz.
XAML NOS PERMITE Microsot estaba consciente de las limitaciones
REALIZAR LA del modelo anterior para la creación de interaces
y de la problemática para poder crear el tipo de
DEFINICIÓN DE LA interaz que requieren las nuevas aplicaciones. Por
INTERFAZ DE USUARIO esta razón, decidió crear WPF, sigla de Windows
Presentation Foundation. Se trata del ramework
que Microsot está recomendando para las nuevas
aplicaciones tanto de escritorio, Silverlight o para
dispositivos móviles. Con WPF,
WPF, todo lo que necesitamos para construir
interaces de usuario avanzadas queda unifcado dentro de un solo
ramework. Con él mismo podemos trabajar con controles, gráfcas
gr áfcas 2D y
3D, video, etc. Una de las ventajas que orece WPF es el uso de estilos y
templates en los controles, con lo cual podemos cambiar el aspecto de la
aplicación de modo muy rápido y sencillo.
En WPF se busca llevar a cabo una separación entre la orma en que
luce la aplicación y la lógica empleada para controlar dicha aplicación.
Para lograrlo, se hace uso de XAML. XAML nos permite defnir la interaz
de usuario; los programadores que trabajan con aplicaciones web lo
encontrarán muy ácil de utilizar. La interaz defnida con XAML es,
entonces, controlada con el ramework de WPF mediante cualquiera de
los lenguajes .NET;
.NET; en nuestro caso, C#.
XAML está basado en XML y es un lenguaje declarativo. Con él
podemos defnir y especifcar características para clases con una
sintaxis basada en XML. Este nos permite hacer cosas como declarar
variables o defnir propiedades. No es posible defnir la lógica del
programa con XAML, pero al poder establecer las características
de las clases, lo usamos para defnir la interaz de usuario y los
www.redusers .com
C# AVANZADO 167
167
elementos gráfcos de nuestra aplicación. La lógica se colocará en C#,

y esto es lo que se conoce como code behind.
WPF puede utilizarse para crear dierentes tipos de aplicaciones.
La orma más usual es la creación de aplicaciones para escritorio.
Todas las aplicaciones para desktop que hemos creado con las
herramientas habituales pueden hacerse con WPF
WPF,, adicionando las
grandes capacidades interactivas de este.
Otro tipo de aplicación es la conocida como XBAP, que corre en
un navegador de Internet. Cuando damos el URI de la aplicación, esta
se descarga en la máquina y se instala. Estas aplicaciones son mucho
más robustas y con mejores interaces que las páginas tradicionales
de Internet. El navegador unciona, simplemente, como un contenedor,
y lo que se ejecuta es una aplicación WPF dentro de él. El sistema de
navegación del navegador es adoptado por la aplicación.
También es posible crear aplicaciones que se conocen como basadas
en navegación. Son similares a las de desktop, pero corren dentro de
un navegador web y toman sus uncionalidades de navegación. En ellas
creamos varias páginas, dentro de cada una de las cuales tenemos una
sección de la interaz de la aplicación. Aunque estas aplicaciones lucen
similares a las de la Web,
Web, se ejecutan en orma local.
Arquitectura
Arquitectura de WPF
WPF
Debemos saber que la arquitectura que cor responde a WPF
es sencilla, ya que está constituida por dierentes assemblies.
Estos assemblies pueden ser clasifcados en tres grupos: la capa
administrada, la capa no administrada y las APIs centrales.
La unción de la capa administrada es dar sustento al ramework de
WPF y llevar a cabo la comunicación con la capa no administrada. El
assembly más importante de esta capa es PresentationFramework.dll, cuya
unción es crear los elementos de alto nivel que usaremos para defnir
la interaz de usuario. Estos elementos son los paneles, los controles,
las ventanas, etc. Otro assembly importante es PresentationCore.dll , que
contiene los tipos base más importantes a partir de los cuales se crean
los controles y las fguras en PresentationFramework.dll; uno de estos tipos
es UIElement. Un tercer assembly que debemos conocer es WindowsBase.
dll, que también contiene elementos importantes, cuya característica es
poder ser utilizados por auera del ambiente de WPF.
WPF.
www. redusers.com
168
La capa no administrada también es conocida como milcore,

acrónimo para Media Integration Library code. Esta capa se encuentra,
principalmente, en el assembly milcore.dll. WPF utiliza Direct3D para llevar
a cabo todas las unciones de dibujo. Esto lo hace mucho más rápido y
efciente en el dibujo de las interaces que la metodología tradicional.
La capa no administrada se dedica a traducir los objetos de alto nivel
a objetos que puede utilizar directamente. Es el lugar donde se realiza
todo el proceso de renderizado de la interaz. WindowsCodecs.dll contiene
diversos códecs que son empleados en la parte gráfca, especialmente,
aquellos relacionados con gráfcas vectoriales.
En las APIs centrales tenemos una colección que provee a WPF de
las uncionalidades necesarias para eectuar su trabajo. WPF se apoya
en estas APIs, y eso nos acilita el trabajo. Dentro de ellas tenemos a
Direct3D, usado para la parte baja y de renderizado en WPF; también
es aprovechado gracias a la aceleración por hardware que orece. Para
la parte de administración de memoria y de los diversos procesos que
componen la aplicación, se usa User32.
Capa Administrada
Capa no Administrada
Direct3D CLR
User32 Drivers GDI
Figura 1. En esta
est a figura podemos
po demos observ
o bservar
ar un
diagrama básico de la forma en que está compuesta
la arquitectura que corresponde a WPF
WPF..
www. redusers .com

C# AVANZADO 169
169
Entender los contenedores

Cuando creamos una ventana en WPF
WPF,, esta se deriva de una clase
conocida como ContentControl. Y describe a un control que puede guardar
en su interior cualquier tipo de contenido. La limitante de ContentControl
consiste en que únicamente puede contener un solo elemento. Otro tipo
de contenedor es HeaderedContentControl , muy similar a ContentControl,
pero con un encabezado para su contenido. Con él podemos crear
controles como Expander, GroupBox, etc.
En el contenedor ItemsControl es posible colocar cualquier cantidad
de contenidos, y puede usarse para crear elementos como un ListBox
o un ListView. Algo similar ocurre con HeaderedItemsControl , el cual
también es capaz de guardar cualquier cantidad de contenidos,
aunque adiciona el encabezado que corresponde.
Los paneles
Los paneles son utilizados como herramienta principal para el
diseño de la interaz gráfca de nuestra aplicación. Por medio de ellos
podemos colocar los dierentes controles en las posiciones en que
sean necesarios para la interaces. Hay distintos t ipos de paneles, y
también es importante conocer cómo uncionan para decidir cuál es
el mejor para nuestra interaz en particular.
El mejor modo de entender cómo uncionan los paneles es
programándolos y experimentando con ellos. Para esto, crearemos un
programa WPF.
WPF. Iniciamos Visual Studio 2010 y generamos un proyecto
nuevo de C#. Aparece una ventana que muestra los dierentes tipos de
proyectos disponibles; allí seleccionamos WPF Application y le damos
GRÁFICAS VECTORIALES
Debemos tener en cuenta que las gráficas vectoriales tienen la ventaja de no perder calidad sin impor-
tar la cantidad de acercamiento que se les dé. La imagen no se guarda en píxeles, sino que se guarda
la información geométrica de los objetos que la componen. Al tener la información geométrica, es
posible dibujar en cualquier escala, siempre con la mejor calidad.
www. redusers.com
170
como nombre de proyecto Capitulo5. Al oprimir el botón de OK, Visual

Studio crea para nosotros la solución y aparece el editor
editor,, donde
colocaremos el código XAML de nuestra aplicación y podremos ver, al
mismo tiempo, cómo luce aquello que estamos programando.
Figura 2. Debe-
mos seleccionar
la Aplicación
WPF para crear
el proyecto que
usaremos en
este capítulo.
GridPanel
Es importante tener en cuenta que empezaremos con el panel más
sencillo, conocido como Grid, que unciona como una matriz o malla
en la que tenemos celdas. Una v ez defnida la cantidad de renglones
y columnas, procedemos a indicar el contenido de cada celda y, de
esta orma, ensamblamos la interaz de usuario.
Empecemos utilizando Grid de su manera más sencilla; para esto
colocamos el siguiente código XAML en la aplicación:
<Window x:Class=”Grid.MainWindow”
xmlns=”http://schemas.microso
xmlns=”http://schemas.microsot.com/winx/2006/
t.com/winx/2006/xaml/prese
xaml/presentation”
ntation”
xmlns:x=”http://schemas.micros
xmlns:x=”http://schemas.microsot.com/winx/
ot.com/winx/2006/xaml”
2006/xaml”
Title=”MainWindow” Height=”350” Width=”525
Width=”525”>
”>
<Grid>
<Grid.RowDefnitions>
<RowDefnition/>
<RowDefnition/>
<RowDefnition/>
www. redusers .com

C# AVANZADO 171
171
</Grid.RowDefnitions>
<Grid.ColumnDefnitions>
<ColumnDefnition/>
<ColumnDefnition/>
</Grid.ColumnDefnitions>


<Border Background=”AliceBlue” Grid.Row=”0” Grid.Column=”0”>
<TextBlock Text=”Hola”/>
</Border>
<Border Background=”AntiqueWhite” Grid.Row=”0” Grid.Column=”1”>
<TextBlock Text=”Mundo”/>
</Border>
<Border Background=”Aqua” Grid.Row=”1” Grid.Column=”0”>
<TextBlock
<TextBlock Text=”Hello”/>
</Border>
<Border Background=”Aquamarine” Grid.Row=”1” Grid.Column=”1”>
<TextBl
<TextBlock
ock Text=”
Text=”World”/>
World”/>
</Border>
<Border Background=”Azure” Grid.Row=”2” Grid.Column=”0”>
<TextBlock
<TextBlock Text=”---
Text=”--- Hola ---”/>
</Border>
<Border Background=”Beige” Grid.Row=”2” Grid.Column=”1”>
<TextBlock
Text=”--- Mundo ---”/>
</Border>
</Grid>
</Window>
UNIDADES PARA EL TAMAÑO DE LA VENTANA
Tengamos presente que, en forma predeterminada, la unidad con la que se colocan las dimensiones
de la ventana son los píxeles, tomados con 96 píxeles por pulgada. También es posible colocar las
unidades en pulgadas, centímetros o también puntos. Para hacer uso de estas opciones, simplemen-
te, después del valor, ponemos in , cm o pt , respectivamente.
www. redusers.com
172
En primer lugar, encontramos la defnición de la clase Window, para la

cual tenemos algunas propiedades que estamos utilizando. La propiedad
Title se emplea para colocar el título de la ventana; es el texto que
aparece en la parte superior de la ventana de la aplicación. La propiedad
Height nos sirve para indicar cuál es la altura de la ventana y,
y, de manera
similar, Width se usa para indicar el ancho de esta.
Ya dentro de la ventana, defnimos nuestro
Grid. Para hacerlo, es necesario indicar cuántos
renglones y columnas vamos a utilizar y con
JUNTO CON WPF
qué características. Para defnir los renglones,
ES NECESARIO recurrimos a la propiedad RowDefnitions de
Grid. Deseamos tener tres renglones y, por eso,
E IMPORTANTE
defnimos tres objetos de tipo RowDefnition.
APRENDER XAML El Grid también tendrá dos columnas, para
darnos un total de seis celdas. Las columnas
son defnidas por medio de la propiedad
ColumnDefnition de Grid y, en su interior,
colocamos dos objetos de tipo ColumnDefnition . Con esto tenemos las
características generales del Grid; ahora debemos proceder a colocar
elementos en cada una de las celdas que corresponden.
Si deseamos colocar comentarios en el código de XAML, podemos
hacerlo por medio del tag 

<Border Background=”AliceBlue” Grid.Row=”0” Grid.Column=”0”
BorderBrush=”DarkViolet” BorderThickness=”3”>
</Border>
<Border Background=”AntiqueWhite” Grid.Row=”0” Grid.Column=”1”>
</Border>
<Border Background=”Aqua” Grid.Row=”1” Grid.Column=”0”>
</Border>
<Border Background=”Aquamarine” Grid.Row=”1” Grid.Column=”1”>
<TextBlo
<TextBlock
ck Text=”
Text=”World”/>
World”/>
</Border>
<Border Background=”Azure” Grid.Row=”2” Grid.Column=”0”>
<TextBlock
Text=”--- Hola ---”/>
</Border>
www. redusers .com

C# AVANZADO 175
175
<Border Background=”Beige” Grid.Row=”2” Grid.Column=”1”>

<TextBlock
</Border>
</Grid>
</Window>
StackPanel
El siguiente panel que vamos a utilizar se conoce como StackPanel
y unciona, eectivamente, como un stack. Allí podemos adicionar
cualquier cantidad de elementos, cada uno de los cuales se agrega al
stack después del último. Los elementos se colocan uno después del
otro, lo que previene que se encimen entre sí. Es posible colocar en su
interior cualquier elemento válido de WPF.
Cuando usamos StackPanel podemos seleccionar entre dos
orientaciones: Horizontal y Vertical. Si seleccionamos y usamos
Horizontal , los elementos se irán agregando de izquierda a derecha,
mientras que con Vertical, lo harán de arriba hacia abajo. La
orientación se controla por medio de la propiedad Orientation .
Veamos el siguiente código que ejemplifca el uso de StackPanel:
<Window x:Class=”StackPanel.MainWindow”
xmlns=”http://schemas.microsot.
xmlns=”http://schemas.microsot.com/winx/2006/x
com/winx/2006/xaml/presen
aml/presentation”
tation”
xmlns:x=”http://schemas.microso
xmlns:x=”http://schemas.microsot.com/winx/200
t.com/winx/2006/xaml”
6/xaml”
Title=”MainWindow” Height=”350” Width=”410”
Width=”410”>>
<StackPanel Orientation=”Horizo
Orientation=”Horizontal”>
ntal”>
<Border Background=”AliceBlue”>
</Border>
<Border Background=”AntiqueWhite” Padding=”30”>
</Border>
<Border Background=”Aqua”>
<TextBlock
</Border>
<Border Background=”Aquamarine” Padding=”10,20,50,0”>
<TextBl
<TextBlock
ock Text=”
Text=”World”/>
World”/>
www. redusers.com
176
</Border>
<Border Background=”Azure” >
<TextBlock
Text=”--- Hola ---”/>
</Border>
<Border Background=”Beige”>
<TextBlock
</Border>
</StackPanel>
</Window>
Podemos observar que, en este caso, no necesitamos dar ningún

tipo de coordenada para los elementos correspondientes, ya que
estos se adicionan en el orden en el que los programamos.
En este ejemplo, estamos haciendo uso de una nueva propiedad
conocida como Padding, que indica la distancia que debe haber desde un
contenido en particular hasta los bordes. En el caso del segundo Border
se está colocando el código que vemos a continuación:
En este ejemplo hemos indicado un Padding de 30, lo que debe dar una
distancia mínima de 30 píxeles a partir del mensaje “Mundo” hasta los
límites del borde. Cuando se coloca un solo valor en el Padding, este se
usa para la parte superior, inerior, izquierda y derecha.
En el cuarto Border tenemos código ligeramente dierente:
PRONUNCIACIÓN DE XAML
Debemos tener en cuenta que la sigla XAML, tan conocida en la actualidad, puede pronunciarse
como una sola palabra o también letra por letra. Eso sí, consideremos que en el primer caso, debe
decirse “zammel ”. Cualquiera de las dos formas se considera correcta, aunque en algunos países
de Latinoamérica se da preferencia a nombrarla letra por letra. En este sentido es muy importante
conocer ambas formas de pronunciación por si nos encontramos con personas de habla inglesa. De
esta forma no nos sorprenderá oírlo nombrar de esa f orma.
www. redusers .com

C# AVANZADO 177
177
Para este caso, hemos colocado un valor distinto de Padding en cada

uno de los límites: 10 a la izquierda, 20 en la parte superior, 50 en el
extremo derecho y 0 para la parte inerior.
Ahora podemos compilar la aplicación y ver los resultados del código.
Figura 4. En este ejemplo se pone de manifiesto el comportamiento

del StackPanel con orientación horizontal.
WrapPanel
Otro panel que resulta ácil de utilizar es WrapPanel. Es similar al
anterior,, ya que los elementos se colocan uno después del otro. En el
anterior
StackPanel los elementos se van adicionando de orma indefnida, pero
en el WrapPanel, lo hacen cuando ya no hay
hay espacio en la ventana,
ventana, de
esta orma el elemento continúa en el siguiente renglón o columna.
WrapPanel también tiene orientación Horizontal y Vertical, las cuales se
controlan por medio de la propiedad Orientation. Para tener un poco más
de control sobre la orma en que se dibujan los elementos, lo mejor es
hacer uso de Padding; de esta manera, tenemos, al menos, un tamaño
mínimo garantizado en el área que corresponde a Border.
El código de una aplicación que usa WrapPanel es el siguiente:
www. redusers.com
178
<Window x:Class=”WrapPanel.MainWindow”
ntation”
2006/xaml”
Width=”525”>
”>
<WrapPanel Orientation=”Horiz
Orientation=”Horizontal”>
ontal”>
</Border>
</Border>
</Border>
<TextBlo
<TextBlock
ck Text=”
Text=”World”/>
World”/>
</Border>
<TextBlock
Text=”--- Hola ---”/>
</Border>
<TextBlock
</Border>
</WrapPanel>
</Window>
Ahora podemos ejecutar la aplicación. No olvidemos modifcar el

tamaño de la ventana para ver la orma en que se dibuja WrapPanel.
LA ORIENTACIÓN POR DEFAULT
Es importante tener en cuenta que cuando estamos trabajando con WrapPanel y no colocamos
explícitamente la propiedad de Orientation, por default se toma el valor de Horizontal. Esto también
sucede con otros paneles que tienen propiedades de orientación. Este es un punto para tomar en
cuenta si nuestra aplicación tendrá una orientación ver tical.
www. redusers .com

C# AVANZADO 179
179
Figura 5. WrapPanel dibuja los elementos y, al llegar al final de la

ventana, continúa dibujándolos en el siguiente renglón.
DockPanel
El siguiente panel es conocido como DockPanel, y es más complicado
que los anteriores. Cuando vamos a utilizarlo, es necesario planifcar
correctamente la interaz, ya que puede ser un poco complicado prever
la orma en que aparecen los dierentes elementos en el panel.
Al colocar un elemento en el DockPanel, debemos considerar el espacio
que está libre. En él es posible colocar el elemento en la parte superior,
inerior,, derecha o izquierda. Una vez hecho esto, quedará un nuevo
inerior
espacio libre, en el que se ubicará el siguiente elemento, otra vez,
dependiendo de donde queramos colocarlo. Este proceso se repite hasta
que ya no tengamos más elementos para ubicar.
La orma de indicar dónde se colocará el elemento es por medio
de la propiedad Dock de DockPanel . Si deseamos que se coloque en la
parte superior del espacio libre, usamos el valor de Top , mientras que
para la parte inerior se utiliza Bottom. En caso de que el objeto deba
colocarse a la izquierda, debemos cuidar de poner el valor de Let, y
para hacerlo en la derecha, usamos Right.
www. redusers.com
180
Veamos el código que ejemplifca estas opciones:
<Window x:Class=”DockPanel.MainWindow”
ntation”
2006/xaml”
Width=”525”>
”>
<DockPanel>
<Border Background=”AliceBlue” DockPanel.Dock=”Top”>
</Border>
<Border Background=”AntiqueWhite” DockPanel.Dock=”Let”>
</Border>
<Border Background=”Aqua” DockPanel.Dock=”Bottom”>
</Border>
<Border Background=”Aquamarine” DockPanel.Dock=”Let”>
<TextBlo
<TextBlock
ck Text=”
Text=”World”/>
World”/>
</Border>
<Border Background=”Azure” DockPanel.Dock=”Top”>
<TextBlock
Text=”--- Hola ---”/>
</Border>
<Border Background=”Beige” DockPanel.Dock=”Let”>
<TextBlock
</Border>
</DockPanel>
</Window>
Podemos observar que, en este caso, colocamos un borde azul en la

parte superior.
superior. Entonces, el espacio que nos queda libre es todo lo que
se encuentra entre dicho borde y la parte inerior de la ventana. En ese
lugar ponemos otro elemento a la derecha. Queda entonces defnido
un nuevo espacio libre, y se instala un Border de color Aqua en la parte
inerior de este lugar. Luego, se instala otro Border a la derecha, y en el
espacio libre, otro más en la parte superior
superior.. Para fnalizar, se pone un
último Border de color beige situado a la izquierda; como es el último
elemento colocado, utiliza todo el espacio libre disponible.
Ahora podemos compilar la aplicación y ver el dibujo del DockPanel.
www. redusers .com

C# AVANZADO 181
181
Figura 6. El DockPanel se ha dibujado; es conveniente entender la

forma en que se ubica cada elemento.
Canvas
El siguiente panel que aprenderemos a usar se conoce como Canvas y
es sumamente sencillo de manejar. En él nos imaginamos que tenemos
un lienzo sobre el cual vamos a dibujar los dierentes controles o
elementos de nuestra interaz. Es el panel más parecido a la orma
tradicional de desarrollar las interaces. Allí colocamos los dierentes
elementos dando sus coordenadas dentro del Canvas.
Las coordenadas pueden darse reerenciadas a la esquina superior
izquierda del Canvas. Si buscamos un esquema cartesiano de
coordenadas similar a (X,Y), podemos utilizar la propiedad Let para
indicar a qué distancia del borde izquierdo deseamos el elemento,
y la propiedad Top para defnir la distancia a la que el elemento
queda del borde superior del Canvas. De esta manera, resulta sencillo
ubicar los objetos en una posición en particular.
particular. Cabe notar que si
los elementos se traslapan o se enciman, el orden en que ueron
defnidos indica cuál se dibuja antes de cuál. Tengamos en cuenta
que es posible cambiar esto programáticamente.
www. redusers.com
182
Podemos utilizar las propiedades Height y Width para dar un

tamaño defnido al control que vamos a utilizar o, también, hacer
uso del Padding cuando sea necesario y, de esta orma, dar un margen
alrededor de los contenidos del control.
El código que nos muestra cómo usar Canvas es el siguiente:
<Window x:Class=”Canvas.MainWindow”
ntation”
2006/xaml”
Width=”525”>
”>
<Canvas>
<Border Background=”AliceBlue” Canvas.Let=”50” Canvas.Top=”70”>
</Border>
<Border Background=”AntiqueWhite” Padding=”30” Canvas.Let=”92”
Canvas.Top=”21”>
</Border>
<Border Background=”Aqua” Padding=”15” Canvas.Let=”160” Canvas.
Top=”85”>
</Border>
<Border Background=”Aquamarine” Padding=”10,20,50,0” Canvas.
Let=”176” Canvas.Top=”61”>
<TextBlo
<TextBlock
ck Text=”
Text=”World”/>
World”/>
</Border>
<Border Background=”Azure” Canvas.Let=”28” Canvas.Top=”36”>
<TextBlo
<TextBlock
ck Text=”
ext=”---
--- Mundo ---” />
DEFINIR LA POSICIÓN DE LOS ELEMENTOS
Si bien es bastante cómodo poder colocar las coordenadas del objeto usando las propiedades Let y
Top, ya que nos recuerdan al sistema cartesiano, también es posible indicar la posición en términos
de distancia desde Right y Bottom. La manera de hacerlo depende de nosotros, y podemos usar la
más cómoda o la que mejor funcione con nuestra lógica.
www. redusers .com

C# AVANZADO 183
183
</Border>
<Border Background=”Beige” Canvas.Let=”176” Canvas.Top=”12”
Height=”25” Width=”75”>
<TextBl
<TextBlock
ock Text=”
ext=”---
--- Hola ---” />
</Border>
</Canvas>
</Window>
Figura 7. Los diferentes elementos fueron dibujados en las coorde-

nadas especifi cadas en el
e l código.
có digo.
UniformGrid
UniormGrid puede ser una orma sencilla y efciente de sustituir
a Grid. Es similar a Grid, ya que tendrá una serie de celdas. En
UniormGrid defnimos la cantidad de renglones y columnas
que queremos tener; automáticamente, la v entana se dividirá
de modo uniorme para contener esas celdas. La indicación de
cuántas columnas y renglones deseamos se hace por medio de las
propiedades Columns y Rows de UniormGrid.
www. redusers.com
184
Cuando usamos Grid, debemos señalar las coordenadas de la celda

que vamos a utilizar para el control. En el caso de UniformGrid , las
celdas se van rellenando según vamos adicionand
adicionando
o los controles. El
relleno se realiza de izquierda a derecha y de arriba hacia abajo.
Figura 8. Existen empresas que han desarrollado controles basados

en WPF y que podemos utilizar en nuestras aplicaciones. En esta figura
observamos el sitio web de una de ellas (www.infragistics.com
(www.infragistics.com ).
Si lo que necesitamos es que la ventana esté dividida de manera

uniforme para todos los controles, UniformGrid es la mejor opción,
porque nos ayuda a reducir la cantidad de código necesario. La
ventana siempre estará dividida de manera uniforme sin importar sus
dimensiones, por lo que si cambiamos su tamaño, aún tendremos las
mismas divisiones pero con dimensiones diferentes.
Veamos un ejemplo con una aplicación que usa UniformGrid:
<Window x:Class=”UniformGrid.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/
ft.com/winfx/2006/xaml/prese
ntation”
xmlns:x=”http://schemas.microsoft.com/winfx/
oft.com/winfx/2006/xaml”
2006/xaml”
www.redusers .com
C# AVANZADO 185
185

Width=”525”>>
<UniormGrid Columns=”2” Rows=”3”>
</Border>
</Border>
<TextBlock
</Border>
<TextBl
<TextBlock
ock Text=”
Text=”World”/>
World”/>
</Border>
<TextBlock
Text=”--- Hola ---”/>
</Border>
<TextBlock
</Border>
</UniormGrid>
</Window>
Ahora podemos realizar la ejecución de la aplicación en la cual

estamos trabajando. No debemos olvidar que es completamente
necesario modifcar el tamaño de la ventana cuando se está
ejecutando para ver cómo se comporta.
CAMBIAR EL ORDEN DE RELLENO
UniormGrid se encarga de ir rellenando las celdas de izquierda a derecha, pero tengamos en cuenta que si
por algún motivo necesitamos que las celdas y los controles se completen en el sentido contrario, es decir,
de derecha a izquierda, debemos usar la propiedad denominada FlowDirection con el valor RightToLet.
Esto es útil si nuestro software lo requiere, por ejemplo, en caso de usar idiomas que se escriben en esa
dirección particular. Es importante experimentar cuando menos una vez con esta propiedad para poder
observar su comportamiento y sentirnos cómodos usándola.
www. redusers.com
186
Figura 9.
UniformGrid
dividió la ventana
en dos columnas
con tres renglo-
nes, para dar el
mismo tamaño a
cada una de las
celdas.
Scroll Viewer
Ahora que hemos visto los paneles más importantes, es momento
de analizar algunos de los controles que nos ayudarán a realizar
nuestras interaces. En nuestros programas es común que la cantidad de
elementos para mostrar sea mayor de lo que puede presentar la ventana.
En este caso, necesitamos tener un par de controles de scroll que nos
permitan movernos dentro de los contenidos.
Incorporar los scrolls en una aplicación de WPF es muy sencillo.
Lo que hacemos es crear un objeto de la clase ScrollViewer. Esta
clase representa un área que tiene elementos visibles, sobre la cual
es posible llevar a cabo el scroll. Para demostrar esto, haremos
que la aplicación con el panel Canvas tenga scrolls. El código se ha
modifcado de la siguiente manera:
<Window x:Class=”ScrollView.MainWindow”
ntation”
2006/xaml”
Width=”300”>
”>
<ScrollViewer HorizontalScrollBarVisibility=”Auto”>
<Canvas Height=”500” Width=”500”>
<Border Background=”AliceBlue” Canvas.Let=”50” Canvas.Top=”70”>
</Border>
www. redusers .com

C# AVANZADO 187
187
<Border Background=”AntiqueWhite” Padding=”30” Canvas.Let=”92”

Canvas.Top=”21”>
</Border>
<Border Background=”Aqua” Padding=”15” Canvas.Let=”160” Canvas.
Top=”85”>
</Border>
<Border Background=”Aquamarine” Padding=”10,20,50,0” Canvas.
Let=”176” Canvas.Top=”61”>
<TextBl
<TextBlock
ock Text=”
Text=”World”/>
World”/>
</Border>
<Border Background=”Azure” Canvas.Let=”28” Canvas.Top=”36”>
<TextBl
<TextBlock
ock Text=”
ext=”---
--- Mundo ---” />
</Border>
<Border Background=”Beige” Canvas.Let=”176” Canvas.Top=”12”>
<TextBl
<TextBlock
ock Text=”
ext=”---
--- Hola ---” />
</Border>
</Canvas>
</ScrollViewer>
</Window>
Es necesario que empecemos por cambiar el tamaño de la ventana,

para que el área del Canvas sea mayor que el de la ventana y podamos
observar el scroll que corresponde. El tamaño que se ha dado es de
300 tanto para Height como para Width.
A continuación, tenemos el ScrollViewer; en este caso, estamos
indicando que deseamos que la barra de scroll horizontal se presente
automáticamente cuando sea necesario. Para esto hacemos uso de la
VISIBILIDAD DEL SCROLL
Es muy importante saber que es posible dar diferentes valores a la visibilidad del scroll; por ejemplo,
Disabled impide que se muestre el scroll, Auto se encarga de mostrarlo solo cuando es necesario, y
también Visible lo muestra en todo momento, aun si no es preciso hacerlo. Cuando estamos diseñan-
do la interfaz de usuario, debemos tomar esto en cuenta.
www. redusers.com
188
propiedad HorizontalScrollBarVisibility con el valor Auto. Entre el tag de

apertura y el de cierre de ScrollViewer colocamos aquellos elementos que
queremos que queden dentro del área de scroll; por eso, en esta sección
ubicamos el panel de Canvas y sus contenidos.
Figura 10. Los

controles basa-
dos en WPF nos
permiten crear in-
terfaces de usua-
rio avanzadas,
para aplicaciones
de escritorio o
móviles.
Un punto que debemos notar es que a Canvas le estamos dando un

tamaño en especial, de 500 por 500, con el fn de hacerlo más grande que
la ventana y lograr que se muestren los scrolls. Para indicar el tamaño
del Canvas, simplemente hacemos uso de las propiedades denominadas
Height y Width, que ya conocemos de otros controles.
Podemos ejecutar la aplicación y experimentar con las barras
de scroll. También es buena idea probar a cambiar el tamaño de la
ventana y ver qué ocurre con el scroll correspondiente.
WPF SIN XAML
Debemos tener en cuenta que es posible que accedamos a realizar aplicaciones de WPF sin tener la
necesidad de escribir código de XAML. En este caso, se pueden definir los objetos y dar valores a las
propiedades directamente en C#. Se trata de una interesante opción si no estamos acostumbrados a
XAML, pero debemos recordar
recordar que perdemos parte de la flexibilida d que nos permite el código en él.
Es bueno conocer esta alternativa de programación, aunque la recomendación es aprender XAML ya
que es lo más utili zado y nos otorgará la flexibilidad necesaria para nuestros proyectos.
www. redusers .com

C# AVANZADO 189
189
Figura 11. En
esta figura po-
demos observar
las barras de
scroll, ya que el
Canvas es más
grande que la
ventana.
GroupBox
Debemos tener presente que GroupBox es un control que nos
permite realizar la tarea de agrupar en su interior dierentes
controles, según lo que necesitemos para la aplicación en la cual nos
encontramos trabajando. Esta agrupación se despliega visualmente
por medio de un marco que envuelve a los controles adecuados y
tiene también un título que nos indica qué tipo de contenidos
tenemos. El uso de GroupBox es muy útil porque permite que los
elementos comunes de las interaces de usuario queden agrupados
de una manera en que resulte
r esulte ácil utilizarlos.
Figura 12.
Algunas empre-
sas producen
colecciones de
controles que po-
demos utilizar e,
incluso, ofrecen
pruebas gratis
de los mismos.
www. redusers.com
190
GroupBox admite que solo coloquemos un elemento en su interior,

ya que desciende de HeaderedContentControl . Si por alguna razón
necesitamos poner más de uno, será necesario que coloquemos
un panel de los que ya hemos estudiado y,
y, dentro de él, nos
encarguemos de incluir todos los elementos que deseamos.
Veamos el código que lleva a cabo esta acción:
<Window x:Class=”GroupBox.MainWindow”
ntation”
2006/xaml”
Width=”250”>
”>
<Grid>
<GroupBox Header=”Mi grupo de controles” Margin=”30”>
<StackPanel>
<Button Content=”Un boton”/>
<TextBlock Text=”Mi texto”/>
<TextBox
<TextBox Text=”
Text=”dato
dato”/>
”/>
<Button Content=”Otro boton”/>
</StackPanel>
</GroupBox>
</Grid>
</Window>
Estamos creando un objeto GroupBox y, por medio de la propiedad

Header, colocamos el texto que servirá como título; en este caso,
hemos puesto Mi grupo de controles, pero podemos elegir cualquier
texto que deseemos. Hacemos uso de otra propiedad, llamada Margin,
con un valor de 30 , para crear un espacio en blanco alrededor del
control desde el borde de su contenedor.
contenedor.
DAR FORMATO A GROUPBOX
Es posible utilizar una gran cantidad de propiedades para hacer lucir el GroupBox de la manera en
que nosotros necesitamos. Podemos indicar sus dimensiones, color de fondo y del borde, y todas
las características de la fuente que será utilizada para la propiedad Header. Para conocer la lista
completa de propiedades, podemos visitar MSDN.
www. redusers .com

C# AVANZADO 191
191
Figura 13.
Existen controles
de WPF que nos
permite trabajar
con información
geográfica, como
en este ejemplo
de RadMap.
Ya en el interior, colocamos un StackPanel, con el fn de ubicar más de

un control allí. En el interior de StackPanel ponemos cuatro elementos
(algunos de ellos los veremos con más detalle en un ejemplo próximo).
En la parte superior ubicamos un botón, luego un texto seguido de un
TextBox y, en la parte inerior, otro botón. Ahora, ninguno de esos
botones tiene uncionalidad, pero luego veremos cómo usarlos.
Por medio de StackPanel o de cualquier otro panel podemos diseñar el
interior del StackPanel y hacerlo lucir según nuestras necesidades.
Ahora podemos acceder a realizar la compilación de la aplicación y
posteriormente ver los resultados en la ventana cuando se ejecute.
Figura 14. El
GroupBox se
ve claramente
en la ventana,
encerrando a los
controles que
hemos definido
en su interior.
www. redusers.com
192
Expander
El control Expander es muy similar a GroupBox ya que nos permite
agrupar en su interior otros controles relacionados entre sí. La dierencia
es que Expander puede contraerse o expandirse para mostrar sus
contenidos cuando sea necesario. La orma más usual para hacer esto es
por medio de un clic del mouse en el título del control.
Al igual que GroupBox, solo permite tener un elemento en su interior,
por lo que si deseamos colocar más de uno, tendremos que apoyarnos
en algún panel y colocar en su interior todo lo que precisemos.
Figura 15. En el sitio web de MSDN podemos encontrar una tabla de

equivalencias entre los controles tradicionales de las formas y los
controles de WPF. Muy útil cuando queremos saber cómo hacer algo.
El código que se presenta a continuación muestra la orma en que

podemos utilizar las características de Expander:
<Window x:Class=”Expander
x:Clas s=”Expander.MainWindow”
.MainWindow”
ntation”
2006/xaml”
www. redusers .com

C# AVANZADO 193
193

Width=”200”>>
<Grid>
<Expander Header=”Mi expander” Margin=”30”>
<StackPanel>
<Button Content=”Un boton”/>
<TextBlock Text=”Mi texto”/>
<TextBox x:Name=”txtTest” Text=”dato”/>
<Button Content=”Otro boton”/>
</StackPanel>
</Expander>
</Grid>
</Window>
El código no es muy dierente del visto en el ejemplo anterior,

pero si compilamos y ejecutamos la aplicación, veremos que el
comportamiento es distinto. No hay que olvidar hacer clic con el
botón del mouse sobre el título de Expander .
Figura 16. Podemos observar la forma como se comporta el control

Expander : ya sea mostrando sus contenidos u ocultándose.
www. redusers.com
194
Primera aplicación WPF

Es momento de crear nuestra primera aplicación de WPF
WPF.. Para esto
haremos uso de lo aprendido. La aplicación es sencilla: simplemente,
crearemos un sumador. Por medio de una interaz defnida en XAML,
pediremos al usuario dos valores y, cuando se oprima un botón, el
resultado será desplegado en la pantalla. El código es ácil de entender
entender,,
pero se encarga de sentar las bases para que podamos comprender cómo
podemos utilizar todo lo que ya conocemos con una interaz XAML:
<Window x:Class=”Cap5.MainWindow”
ntation”
2006/xaml”
Width=”525”>
”>
<Grid>

<RowDefnition Height=”Auto”/>
<RowDefnition Height=”Auto”/>
<ColumnDefnition Width=”Auto”/>
<ColumnDefnition
<ColumnDefnition Width=”100”/>
<ColumnDefnition Width=”*”/>

<TextBlock
<TextBlock Text=”Valor
Text=”Valor a:” Grid.Row=”0” Grid.Column=”
Grid.Column=”0”/>
0”/>
WRAPPANEL Y LA VENTANA
La forma en que se dibujan los elementos correspondientes a WrapPanel en la ventana depende del
tamaño que esta tenga. Esto significa que si se cambian las dimensiones de la ventana, los diferentes
elementos pueden variar su posición. Hay que tomar esto en cuenta para los diseños en los cuales
trabajemos. Un cambio de posición puede destruir nuestro diseño de interfaz.
www. redusers .com

C# AVANZADO 195
195
<TextBox
<TextBox x:Name=”txtA”
x:N ame=”txtA” Grid.Row=”0” Grid.Column=”1”
Grid.Colum n=”1” />
<Button Content=”Calcular” Grid.Row=”0” Grid.Column=”2”
Click=”btnCalcular_click” x:Name=”btnCalcular” />
<TextBlock
<TextBlock Text=”Valor
Text=”Valor b:”
b :” Grid.Row=”1” Grid.Column=”0”/
Grid. Column=”0”/>
>
<TextBox
<TextBox x:Name=”txtB”
x:N ame=”txtB” Grid.Row=”1” Grid.Column=”1”
Grid.Colum n=”1” />
<TextBlock
<TextBlock x:Name=”t
x:Name=”txtResult
xtResultado”
ado” Text=”Result
ext=”Resultado
ado =” Grid.Row=”1”
Grid.Column=”2”/>
</Grid>
</Window>
Empezamos utilizando un Grid para construir la interaz, que tiene

tres columnas y dos renglones. Por medio de TextBlock, colocamos el
mensaje para Valor a:. Luego agregamos un TextBox, que nos nos permite
introducir valores desde la interaz de usuario. Algo que debemos notar
es el uso de la propiedad x:Name, que nos permite colocar el nombre con
el que identifcaremos al control. Con este nombre, el código escrito en
C# puede tener acceso al control y a sus propiedades. El nombre es txtA.
Hemos creado un botón llamado btnCalcular, que muestra el texto
Calcular por medio de la propiedad Content. Cuando se oprime el
botón, deseamos que se invoque un método que llevará a cabo el
procesamiento; es decir,
decir, queremos colocar un handler para el evento clic
del botón. Hacemos uso de Click porque representa el evento que nos
interesa, y le colocamos como valor btnCalcular_click, que corresponde al
nombre del handler para dicho evento.
Luego ponemos otro TextBlock y posteriormente un TextBox que
serán usados para el segundo valor que debe introducir el usuario.
Un último TextBlock es defnido, al que le ponemos un nombre porque
necesitamos identifcarlo, dado que nuestro código en C# lo usará
para escribir el resultado de la operación.
DIBUJAR UN MARCO
Es importante tener en cuenta que con la clase llamada Border podemos hacer uso de la propiedad
denominada BorderBrush, la cual nos permite seleccionar el color que tendrá el marco correspondiente
de dicho elemento. Junto con esta propiedad, debemos usar también la llamada BorderThickness,
que indica cuán grueso es el marco que deseamos dibujar.
www. redusers.com
196
Figura 17. Microsoft ha creado un sitio web conocido como

WindowsClient.NET,, que se especializa en la creación de interfaces
WindowsClient.NET
de usuario para aplicaciones basadas en formas o en WPF.
WPF.
Ahora es tiempo de colocar el código del handler. La forma más

sencilla de hacerlo es, simplemente, dando doble clic sobre el botón
para que Visual Studio cree el esqueleto del método por nosotros.
Aparece el código C# e incluimos lo siguiente:
public partial class

c lass MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btnCalcular_click(object sender, RoutedEventArgs e)
{
int r = 0;
int a = Convert.ToInt32(txtA.Text);
int b = Convert.ToInt32(txtB.Text);
www.redusers .com
C# AVANZADO 197
197
r = a + b;
txtResultado.T
txtResult ado.Text
ext = “Resultado
“Result ado =”
= ” + r.T
r.ToString();
oString();
}
}
El código es muy simple, y solo debemos observar que hemos usado

los nombres de los controles colocados en el código XAML. Ya
Ya podemos
proceder a ejecutar y probar la aplicación.
Figura 18.
Nuestro primer
programa con
lógica escrito en
WPF está funcio-
nando en forma
correcta.
Como ya conocemos las bases que corresponden a WPF

WPF,, podemos
continuar trabajando con elementos más avanzados.
RESUMEN
WPF es una nueva tecnología que nos permite tener, bajo un mismo techo, lo que antes se hacia con diver-
sas APIs no directamente conectadas entre sí. Esto facilita la creación de interfaces de usuario complejas e
interactivas, al mismo tiempo que su renderizado es más rápido por ser acelerado por hardware. XAML se
emplea para definir la interfaz de usuario. Los elementos definidos en XAML pueden conectarse al código de
C#. Los paneles permiten colocar diferentes objetos y tener control sobre la posición de estos.
www. redusers.com

Ilide - Info C PR

Cargado por

Copyright:

Formatos disponibles

Ilide - Info C PR

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ilide - Info C PR

Cargado por

Copyright:

Formatos disponibles

por Nicolás Arrioja Landa Cosio

▼ Los paneles ............................

Servicio de atención al lector: [email protected]

elementos gráfcos de nuestra aplicación. La lógica se colocará en C#,

La capa no administrada también es conocida como milcore,

User32 Drivers GDI

www. redusers .com

Entender los contenedores

como nombre de proyecto Capitulo5. Al oprimir el botón de OK, Visual

www. redusers .com

UNIDADES PARA EL TAMAÑO DE LA VENTANA

En primer lugar, encontramos la defnición de la clase Window, para la

www. redusers .com

se indica por medio de la propiedad Row del Grid, y la columna, por

Figura 3. Como podemos darnos cuenta, en esta ﬁgura observamos la

El Grid, como lo hemos defnido, no tiene unas dimensiones

Podemos llevar a cabo algunas modifcaciones al código y ver

www. redusers .com

<Border Background=”Beige” Grid.Row=”2” Grid.Column=”1”>

Podemos observar que, en este caso, no necesitamos dar ningún

<Border Background=”AntiqueWhite” Padding=”30”>

<Border Background=”Aquamarine” Padding=”10,20,50,0”>

www. redusers .com

Para este caso, hemos colocado un valor distinto de Padding en cada

Figura 4. En este ejemplo se pone de maniﬁesto el comportamiento

Ahora podemos ejecutar la aplicación. No olvidemos modifcar el

LA ORIENTACIÓN POR DEFAULT

www. redusers .com

Figura 5. WrapPanel dibuja los elementos y, al llegar al ﬁnal de la

Veamos el código que ejemplifca estas opciones:

Podemos observar que, en este caso, colocamos un borde azul en la

www. redusers .com

Figura 6. El DockPanel se ha dibujado; es conveniente entender la

Podemos utilizar las propiedades Height y Width para dar un

DEFINIR LA POSICIÓN DE LOS ELEMENTOS

www. redusers .com

Figura 7. Los diferentes elementos fueron dibujados en las coorde-

Cuando usamos Grid, debemos señalar las coordenadas de la celda

Figura 8. Existen empresas que han desarrollado controles basados

Si lo que necesitamos es que la ventana esté dividida de manera

Title=”MainWindow” Height=”350” Width=”525”

Ahora podemos realizar la ejecución de la aplicación en la cual

CAMBIAR EL ORDEN DE RELLENO

www. redusers .com

<Border Background=”AntiqueWhite” Padding=”30” Canvas.Let=”92”

Es necesario que empecemos por cambiar el tamaño de la ventana,

VISIBILIDAD DEL SCROLL

propiedad HorizontalScrollBarVisibility con el valor Auto. Entre el tag de

Figura 10. Los

Un punto que debemos notar es que a Canvas le estamos dando un

WPF SIN XAML

www. redusers .com

GroupBox admite que solo coloquemos un elemento en su interior,

Estamos creando un objeto GroupBox y, por medio de la propiedad

DAR FORMATO A GROUPBOX

www. redusers .com

Ya en el interior, colocamos un StackPanel, con el fn de ubicar más de