Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Bginners WPF
Bginners WPF
Presentation
Foundation
ndice
Introduccin ............................................................................................................................... 1
Qu es Windows Presentation Foundation? ..................................................................... 1
Qu es XAML?................................................................................................................. 1
Qu es AERO? ................................................................................................................. 1
Windows Presentation Foundation es la nueva generacin del sistema grfico. ............... 2
Aprovecha la potencia y la capacidad que hoy en da brindan los sistemas grficos. ....... 2
Proporciona una base para construir aplicaciones y dar al usuario una experiencia de alta
fidelidad en el uso de Windows Vista................................................................................ 2
Los desarrolladores podrn proporcionar una experiencia de usuario ms rica y precisa
para sus propias aplicaciones. ............................................................................................ 2
Se podrn aprovechar nuevas funciones visuales, por ejemplo, AERO. ........................... 2
XAML y WPF separan los controles segn su funcionalidad y sus habilidades. .............. 3
Implementacin de estilos.................................................................................................. 3
Un nuevo modelo de aplicacin mediante un Objeto Aplicacin ...................................... 3
WPF nos introduce en una nueva forma declarativa de programar, llamada XAML........ 3
Los paneles son la clase base para todos los elementos que proporciona WPF en el
soporte de layout ................................................................................................................ 4
Efectos 3D .......................................................................................................................... 4
Animaciones....................................................................................................................... 4
Grficos basados en vectores ............................................................................................. 4
Framework de Windows Presentation Foundation .................................................................... 5
Arquitectura de Windows Presentation Foundation........................................................... 5
Capacidades de Windows Presentation Foundation........................................................... 7
Modelo de clases ................................................................................................................ 8
System.Windows................................................................................................................ 8
System.Windows.Controls ................................................................................................. 8
System.Windows.Data ....................................................................................................... 8
System.Windows.Input ...................................................................................................... 8
System.Windows.Media..................................................................................................... 9
System.Windows.Media.Animation .................................................................................. 9
System.Windows.Media.Media3D .................................................................................... 9
System.Windows.Navigation ............................................................................................. 9
System.Windows.Shapes ................................................................................................... 9
System.Windows.Resources .............................................................................................. 9
System.Windows.Serialization........................................................................................... 9
UIElement .......................................................................................................................... 9
FrameworkElement ............................................................................................................ 9
Ejemplo del Namespace System.IO ................................................................................. 10
Bases de WPF........................................................................................................................... 11
Introduccion ..................................................................................................................... 11
SubClass ........................................................................................................................... 11
Freezable Objects ............................................................................................................. 13
Qu es Freezable?........................................................................................................... 13
Ejemplo Freezable............................................................................................................ 13
XAML ...................................................................................................................................... 14
Introduccion ..................................................................................................................... 14
Declaraciones de namespaces en XAML......................................................................... 15
XAML y code-behind ...................................................................................................... 16
XAML sin code-behind.................................................................................................... 17
Programando en XAML................................................................................................... 18
Documentos en XAML .................................................................................................... 18
Ejemplo XAML y Code-behind....................................................................................... 20
User Interfaces Controles ...................................................................................................... 21
Introduccion ..................................................................................................................... 21
Jerarqua de controles....................................................................................................... 21
Lista de controles XAML................................................................................................. 22
Control Button y Label..................................................................................................... 22
Control Checkbox ............................................................................................................ 23
Control ListBox................................................................................................................ 23
Control RadioButton ........................................................................................................ 23
Control Expander ............................................................................................................. 24
Control MenuBase............................................................................................................ 25
Control ComboBox .......................................................................................................... 25
Control TreeView............................................................................................................. 25
Paneles.............................................................................................................................. 26
Panel Canvas .................................................................................................................... 26
Panel DockPanel .............................................................................................................. 27
Panel FlowPanel ............................................................................................................... 28
Panel TextPanel................................................................................................................ 29
Panel GridPanel................................................................................................................ 30
Panel StackPanel .............................................................................................................. 30
Trabajando con documentos............................................................................................. 31
Documento Fixed ............................................................................................................. 31
Control FixedDocument DocumentViewer .................................................................. 32
Ejemplo de DocumentViewer .......................................................................................... 33
Documento Flow .............................................................................................................. 35
FlowDocumentPageViewer ............................................................................................. 36
FlowDocumentScrollViewer............................................................................................ 36
FlowDocumentReader...................................................................................................... 37
Trabajando con grficos y animaciones ................................................................................... 38
Introduccion ..................................................................................................................... 38
Objeto Shape .................................................................................................................... 39
Objeto Geometries............................................................................................................ 39
Objeto Pen ........................................................................................................................ 39
Ejemplo objeto Ellipse ..................................................................................................... 40
Tipos de transformaciones ............................................................................................... 40
Cmaras y proyecciones................................................................................................... 41
Traslacin y rotacin ........................................................................................................ 41
Animaciones............................................................................................................................. 42
Introduccion ..................................................................................................................... 42
Propiedades ...................................................................................................................... 43
Compatibilidad de tipos de animaciones.......................................................................... 43
Ejemplo Animacin.......................................................................................................... 44
Estilos ....................................................................................................................................... 45
Introduccion ..................................................................................................................... 45
Declaracion....................................................................................................................... 45
x:Key ................................................................................................................................ 45
TargetType ....................................................................................................................... 46
Extendiendo estilos .......................................................................................................... 46
Triggers ............................................................................................................................ 47
Ejemplo de uso de triggers ............................................................................................... 48
Tipos de aplicaciones ............................................................................................................... 49
Aplicaciones de navegador XAML.................................................................................. 49
Control Library................................................................................................................. 49
Aplicaciones instaladas .................................................................................................... 49
Tipos Aplicaciones instaladas .......................................................................................... 50
Aplicaciones Web ............................................................................................................ 51
Formas de escribir aplicaciones ....................................................................................... 52
Microsoft Expression Graphic Designer .................................................................................. 53
Microsoft Expression Interactive Designer.............................................................................. 54
Standards-Based Web Sites.............................................................................................. 54
Entorno sofisticado basado en CSS.................................................................................. 54
Presentacin de informacin ............................................................................................ 54
Tecnologa de servidor ..................................................................................................... 54
Microsoft Expression Interactive Designer.............................................................................. 55
Capacidades de diseo ..................................................................................................... 55
Completo control en creatividad ...................................................................................... 55
Incrementa la satisfaccin del uso de IU.......................................................................... 55
Introduccin
Qu es Windows Presentation Foundation?
El Windows Framework Extension (WinFX) es la siguiente generacin del framework
de programacin de Windows. WinFX est basado en el Framework .NET 2.0; sin
embargo, incorpora una nueva API de programacin compuesta por Avalon (ahora
llamado Windows Presentation Foundation) e Indigo (ahora conocido como Windows
Communication Foundation). WinFX fue presentado por primera vez al mundo en el
PDC 2003 (Professional Developers Conference) en Los Angeles, e inicialmente ha
sido integrado como parte del cliente de Windows Longhorn, ahora ya conocido
como Windows Vista. En esta serie de presentaciones se da una visin global de
Windows Presentation Foundation.
Windows Presentation Foundation es el subsistema de presentacin unificado de
Microsoft para Windows, expuesto a travs de WinFX, modelo de cdigo administrado
de Windows Vista que extiende Microsoft .NET Framework. Windows Presentation
Foundation est compuesto por un motor que saca ventaja del hardware con grficos
modernos y por un conjunto de clases administradas que los desarrolladores pueden
usar para crear aplicaciones visualmente ricas. Tambin presenta XAML, que permite
que los desarrolladores utilicen un modelo basado en XML para manipular modelos de
objetos.
Qu es XAML?
En Windows Vista, WinFX admite una API con la cual los desarrolladores pueden
alojar los controles y formularios de Windows Forms en una aplicacin de Windows
Presentation Foundation, y viceversa. Cuando un desarrollador crea una aplicacin en
Windows Presentation Foundation, la mayor parte del cdigo se encuentra escrito e
implementado en XAML. XAML es ms rpido, ms fcil de implementar y de
localizar, y significa una eleccin mejor que cualquier cdigo equivalente. Con XAML,
no existen errores de rendimiento, porque es una representacin de un modelo de
objetos basado en XML.
Qu es AERO?
El trmino AERO, sigla de Autntico, Energtico, Reflexivo y Open (Abierto), remite a
las guas de experiencia de usuario para Windows Vista, y se encarga del look and feel
del sistema operativo. Estas guas no slo determinan el modo en que se dibujan los
pxeles, sino tambin la forma en que el usuario interacta con el sistema y evoca
sentimientos.
Pgina 1 de 55
Pgina 2 de 55
Implementacin de estilos
Los estilos permiten a los diseadores de aplicaciones, documentos e IU, estandarizar
una apariencia particular de un elemento. Esto se puede realizar, pero es necesario un
fuerte modelo de estilo para poder compartir la apariencia. WPF provee ese modelo.
Se puede declarar un estilo de cualquier elemento que derive desde
FrameworkElement o de FrameworkContentElement. La forma ms comn de
declarar un estilo es hacindolo dentro del archivo XAML. Si se declara un estilo en el
elemento principal de la aplicacin, ste puede ser utilizado en cualquier lugar de la
aplicacin.
Pgina 3 de 55
Los paneles son la clase base para todos los elementos que proporciona
WPF en el soporte de layout
Los elementos de un panel son componentes que controlan la renderizacin de los
elementos (tamao y dimensiones, posicin, y el arreglo del contenido de sus hijos).
WPF proporciona un gran nmero de paneles, como Canvas, DockPanel y GridPanel,
que veremos ms adelante.
Efectos 3D
La implementacin 3D de Windows Presentation Foundation permite a los
desarrolladores dibujar, transformar y animar grficos 3D de distintas formas, usando
las mismas habilidades afrontadas por la plataforma de grficos 2D. Tambin permite
combinar grficos 2D y 3D para crear controles ms atractivos, y proporcionar
complejas ilustraciones de informacin. Este soporte 3D que nos otorga Windows
Presentation Foundation no tiene todas las caractersticas para el desarrollo de juegos.
Animaciones
Las animaciones pueden ser un atractivo para una interfaz de usuario. Solamente con
pocas animaciones se pueden crear sorprendentes efectos de animacin.
WPF proporciona todas las herramientas para que este proceso que tan complicado nos
pareca antes sea ms fcil de implementar.
Pgina 4 de 55
Pgina 5 de 55
Pgina 6 de 55
Pgina 7 de 55
Modelo de clases
System.Windows
Este namespace contiene las clases e interfaces que son utilizadas para crear
aplicaciones. Define varias interfaces y estructuras comunes usadas a travs de la API,
como la clase Application, la clase Window, styling, dependency, y clases base
comunes.
System.Windows.Controls
El namespace de controles est asociado a la interfaz de usuario de la aplicacin. ste
incluye mens, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels,
borders, y sliders para audio y video. El Viewport3D est tambin localizado en este
namespace para controlar todo el contenido 3D y el contenido con interaccin.
System.Windows.Data
El namespace de datos controla todas las propiedades para enlace a datos. ste es usado
especficamente para la fuente, para estas clases y para cualquier otra asociada a la
implementacin de datos y colecciones.
System.Windows.Input
Este namespace controla todos los modos de entrada, como el mouse, el teclado o
Tablet, con los cuales interacta el usuario cuando usa la aplicacin.
Pgina 8 de 55
System.Windows.Media
El namespace Media controla todas las clases de grficos tanto para 2D como para 3D.
ste tambin define el camino para las clases de segmento, brochas, colores, efectos de
imgenes, clases geomtricas, colecciones, audio, video, enumeraciones y estructuras.
System.Windows.Media.Animation
Este namespace contiene las clases utilizadas para animacin 2D y 3D. Esta rea
incluye tipos para Timelines, KeyFrames y Animation.
System.Windows.Media.Media3D
Contiene una variedad de clases especficas para grficos en 3D.
Estas clases son utilizadas para definir cmo los grficos van a ser presentados dentro
de la aplicacin.
System.Windows.Navigation
Este namespace est dedicado a las clases e interfaces utilizadas para la navegacin de
aplicaciones, donde la navegacin puede ser entre ventanas, paneles o journaling.
System.Windows.Shapes
Este namespace es para todas las formas primitivas 2D usadas dentro de la API. stas
son ellipse, glyphs, line, path, polygon, polyline y rectangle. Estas clases con similares a
las encontradas en Scalable Vector Graphics (SVG).
System.Windows.Resources
Este namespace contiene todas las clases que usan recursos, que podran definir
propiedades para estilos de animacin y localizacin, y que pueden ser accedidas por un
objeto referenciando el nombre como Style={StaticResource ResourceName}
dentro de la aplicacin.
System.Windows.Serialization
Este namespace soporta la conversin de objetos Avalon al modelo XAML y viceversa.
UIElement
El elemento UIElement, que proviene del namespace System.Windows, es la clase base
de la cual derivan muchos objetos visuales. Determina de cada elemento la apariencia
inicial, el diseo, la posicin y la interaccin con el usuario.
FrameworkElement
Derivado de UIElement, FrameworkElement es tambin una clase base. Es una clase de
la cual la mayora de los elementos visuales heredan la apariencia y las caractersticas
(por ejemplo, altura, ancho, etc.). Cuando escribimos cdigo en .NET, podemos acceder
a un objeto que se encuentra dentro del XAML referencindolo con la propiedad
Name.
Pgina 9 de 55
txt2.FontSize = 22;
txt2.Text = Hola Mundo 2!";
Canvas.SetTop(txt2, 200);
Canvas.SetLeft(txt2, 75);
myCanvas.Children.Add(txt2);
mainWindow.Content
=
myCanvas;
mainWindow.Title
=
Ejemplo";
mainWindow.Show();
}
}
Pgina 10 de 55
Bases de WPF
Introduccion
Un gran porcentaje de las clases de Windows Presentation Foundation hereda de cuatro
clases:
UIElement
FrameworkElement
ContentElement
FrameworkContentElement
SubClass
La forma ms prctica de crear una clase personalizada que se extienda de Windows
Presentation Foundation es creando una subclase que herede de una de las clases de
WPF.
Tendremos todas las funcionalidades a travs de la herencia.
Se destacan tres clases cuyas funcionalidades podemos utilizar.
En la prctica, UIElement es para elementos que podrn soportar un largo modelo de
objeto. Est para renderizar y definir IU dentro de regiones que pueden ser descriptas
como regiones rectangulares en pantalla, y donde el contenido del modelo es entregado
un poco ms abierto, para permitir diferentes combinaciones de elementos.
Si creamos una clase que herede de DependencyObject, se obtienen las siguientes
funcionalidades:
Se adquieren los mtodos GetValue y SetValue, para obtener y asignar
una propiedad.
La habilidad de usar propiedades dependientes y adjuntar propiedades.
Si creamos una clase que herede de UIElement, se pueden obtener las siguientes
funcionalidades, adems de las que nos provee la clase DependencyObject:
Soporte para animaciones.
Soporte bsico para entrada y de comandos.
Mtodos virtuales que pueden sobrecargar para proveer informacin para
el manejador de layout.
Pgina 11 de 55
Pgina 12 de 55
Freezable Objects
Los objetos del tipo Freezable presentan caractersticas especiales que ayudan a
desarrollar una aplicacin con mejor funcionamiento. Los ejemplos de objetos del tipo
Freezable incluyen brushes, pens, transformaciones y animaciones.
Qu es Freezable?
Es un tipo especial de objeto que tiene dos estados posibles: Unfrozen o Frozen.
Cuando se encuentra en el estado Unfrozen, un objeto Freezable se comporta como
cualquier otro objeto. Cuando se encuentra en estado Frozen, ya no puede ser
modificado.
Un objeto del tipo Freezable provee un evento Changed para notificar cualquier
modificacin del objeto.
La mayora de los objetos del tipo Freezable de Windows Presentation Foundation
pertenece al sistema de grficos.
La clase Freezable facilita el uso del sistema de grficos de forma ms segura.
Ayuda a mejorar el rendimiento de la aplicacin.
Ejemplos de clases que heredan de Freezable incluyen Brush, Transform y
Geometry. Ya que estos objetos contienen recursos sin manejar, el sistema debe
monitorear las modificaciones generadas en ellos, y luego actualizar los recursos
correspondientes cuando hay algn cambio en el objeto original.
Incluso cuando no se modifica un objeto del sistema grfico, el sistema debe gastar
recursos de su mtodo de monitoreo para el caso de que se haya realizado alguna
modificacin.
Ejemplo Freezable
Por ejemplo, creamos un SolidColorBrush y lo usamos para pintar el fondo de un
botn. Cuando el botn es renderizado, el sistema de grficos de Windows
Presentation Foundation usa la informacin que se le provee para pintar un grupo de
pxeles y crear la apariencia de un botn.
Button myButton = new Button(); SolidColorBrush myBrush = new
SolidColorBrush(Colors.Yellow); myButton.Background = myBrush;
El mtodo Freeze permite deshabilitar la capacidad de un objeto de actualizarse por
s mismo. Se puede usar este mtodo para hacer que un Brush se congele o se vuelva
inmodificable.
if (myBrush.CanFreeze) { // Convertirmos el Brush en inmodificable
myBrush.Freeze(); }
Pgina 13 de 55
XAML
Introduccion
XAML es un lenguaje declarativo
XAML es un lenguaje declarativo basado en XML que define objetos y propiedades en
XML. Un parser XAML instancia y ejecuta los objetos usando una API apropiada.
Creando una IU en XAML
XAML y Avalon (Windows Presentation Foundation) son dos cosas distintas. XAML
es, simplemente, una forma de marcado XML. Avalon es la API grfica y de interfaz de
usuario. Mientras que XAML es usado para instanciar objetos Avalon, nada impide usar
XAML para crear otros objetos no grficos.
XAML es la manera recomendada para crear interfaces de usuario en el modelo de
programacin de Windows Presentation Foundation, porque nos proporciona un mtodo
para separar la definicin del diseo de la IU y la lgica. Tambin permite integrar
cdigo usando archivos code-behind.
Con XAML tambin es posible crear una IU entera sin utilizar cdigo.
Creando un archivo bsico de XAML
<?xml version="1.0" standalone="yes"?>
<Window>
<Button>Hola Mundo</Button>
</Window>
Este ejemplo muestra todo lo que se necesita para escribir un Hola Mundo en XAML.
Los archivos XAML son, convencionalmente, archivos XML con una extensin de tipo
.xaml y un namespace referenciado a los namespaces de XML. Aqu, como estamos
trabajando con Windows Presentation Foundation, todos los nombres sern
referenciados hacia Windows Presentation Foundation y los namespaces de XAML.
XAML es la sigla de Extensible Application Markup Language, Lenguaje de
Formato para Aplicaciones Extensibles.
Es un lenguaje para la interfaz de WPF.
Est optimizado para describir grficamente interfaces visuales de usuario ricas
desde el punto de vista grfico.
Los archivos de tipo XAML sern producidos por una herramienta de diseo visual,
como Microsoft Visual Studio o Microsoft Expression.
Pgina 14 de 55
Pgina 15 de 55
XAML y code-behind
XAML
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyNamespace.MyCanvasCode">
<Button Click="Button_Click">Click Me!</Button>
</Canvas>
Code-behind
namespace MyNamespace{
public partial class MyCanvasCode : Canvas {
void Button_Click(object sender, RoutedEventArgs e){
Button b = e.Source as Button;
b.Background = Brushes.Red;
}}}
XAML crea elementos de la interfaz de usuario, como botones, cajas de texto, paneles,
etc., pero no maneja eventos. Por ejemplo, si hay un botn en una pgina, XAML puede
crearlo y mostrarlo por pantalla. Pero el botn no hizo nada hasta ahora. El modelo de
programacin de Windows Presentation Foundation permite, a travs de los atributos
del elemento XAML, asociar un evento que definimos en code-behind. El code-behind
puede estar en lenguajes como Microsoft Visual Basic .NET o C#. Para poder asociar
los eventos que definimos en el XAML con los manejadores en el code-behind, los
nombres de los eventos en el code-behind y el valor del atributo en el elemento XAML
tienen que coincidir, como se ve en el ejemplo.
Propiedad Name
Muchos elementos XAML soportan la propiedad Name. sta es muy importante, ya
que permite referenciar un elemento particular desde el code-behind, cuando ese
elemento fue originalmente creado desde el cdigo XAML. Hay elementos que no
tienen esta propiedad ya que su clase no hereda, pero pueden usar x:Name para el
mismo propsito.
X:Name
<element x:Name="aStringNameValue".../>
Adems de la propiedad x:Name, existen muchas propiedades que nos brindan
facilidades para el desarrollo, como X:Key, x:Code, x:ClassModifies, x:Class,
x:Array, etc.
Pgina 16 de 55
Pgina 17 de 55
Programando en XAML
Mediante el uso de XAML se puede:
Escribir un documento que muestre contenido esttico.
Crear un documento que muestre por pantalla datos de un enlace y actualice su
contenido desde el archivo fuente.
Definir animaciones y efectos de ratn.
En muchas aplicaciones, gran parte del cdigo se escribe para crear o actualizar la
interfaz de usuario. En los ltimos aos, muchos desarrolladores han aprendido a
escribir las IU utilizando lenguajes basados en etiquetas. La plataforma Longhorn
(Windows Vista) define un nuevo lenguaje de este tipo, llamado XAML. Usar un
lenguaje de etiquetas para definir una interfaz de usuario tiene ventajas sobre los
lenguajes de programacin tradicionales:
Sin embargo, para crear una aplicacin productiva ser necesario trabajar con eventos,
proporcionar una lgica de decisiones personalizadas, o incluir algunas operaciones que
no tengan nada que ver con la IU. Esto requiere mezclar XAML con cdigo y,
afortunadamente, es muy sencillo de conseguir, gracias al code-behind.
Documentos en XAML
Extensible Application Markup Language (Lenguaje de Formato para Aplicaciones
Extensibles).
Describe grficamente interfaces de usuario visuales ricas desde el punto de vista
grfico.
Permite a los desarrolladores especificar una jerarqua de objetos con un sistema de
caractersticas y de lgica.
Soporta las clases y los mtodos de la plataforma de desarrollo .NET.
Es interpretado de forma instantnea.
Separa el aspecto lgico del aspecto visual.
XAML es un lenguaje declarativo basado en XML
Pgina 18 de 55
Pgina 19 de 55
Pgina 20 de 55
Un control es cualquier cosa que requiere interaccin del usuario. Avalon tiene un
conjunto rico de controles, incluidos varios muy similares a los de Win32 y otros muy
distintos. Una diferencia clave entre los controles de Avalon y los previamente usados
en el desarrollo de aplicaciones Windows, es que su apariencia y su comportamiento
pueden ser modificados completamente con un cdigo fuente complejo. La mayor parte
del look and feel de estos controles puede ser realizada declarativamente en el
documento XAML.
La funcionalidad de un control en Avalon viene de dos clases: FrameworkElement y
Control. La primera es la base de la implementacin que puede ser usada tpicamente
para definir una Control. Comnmente usan propiedades dependientes.
Jerarqua de controles
Pgina 21 de 55
Canvas
CheckBox
DockPanel
DocumentViewer
FlowDocumentSc Frame
rollViewer
Grid
GridSplitter
ListBox
ListView
PopIp
ProgressBar
RichTextBox ScrollBar
StackPanel StatusBar
ToolBar
ToolTip
GroupBox
Panel
RaduiButton
Separator
TextBix
WrapPanel
GridView
Menu
PrintDialog
ScrollViewer
TabControl
TreeView
ImageLabel
PasswordBox
RepeatButton
Slider
Thumb
ViewBox
Pgina 22 de 55
Control Checkbox
El control CheckBox permite a los usuarios seleccionar y deseleccionar opciones dentro
de una IU. Este control es un contenedor, lo que significa que puede haber otros
contenidos dentro de l, como imgenes y textos. Los estados de los tems pueden ser
seleccionado o deseleccionado (checked y unchecked).
<CheckBox Margin="10, 10, 3, 3" Grid.Column="0" Grid.Row="2" Name="cb1"
FontSize="12"
Checked="HandleChange">Check Box</CheckBox>
Control ListBox
Representa el control que provee una lista de tems entre los cuales el usuario puede
seleccionar.
Note en el ejemplo que todos los elementos hijos de ListBox son envueltos por el tag
ListBoxItem.
<ListBox Width="100" Height="55" SelectionChanged="PrintText"
SelectionMode="Single">
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
</ListBox>
Control RadioButton
Es un control que se usa como un conjunto de estos controles; por lo general, no se
utiliza un solo RadioButton, pero es posible crear un simple RadioButton. RadioButton
es de tipo ContentControls.
<RadioButton Name="rb1" Checked="WriteText2">Si</RadioButton>
<RadioButton Name="rb2" Checked="WriteText2">No</RadioButton>
Pgina 23 de 55
Control Expander
Muestra informacin que puede desplegarse y esconderse. El usuario lo conoce, ya que
es un control de la ventana Explorer en Windows XP.
Windows Presentation Foundation nos permite dar estilo para adaptar nuestro
desarrollo.
Para crear este control simplemente se genera un Expander, una regin de Header para
el rea del ttulo, y luego se agregan algunos contenidos dentro del cuerpo del Expander.
Se puede, opcionalmente, usar el ScrollViewer para prevenir que la lista se haga muy
larga.
<Expander >
<Expander.Header>
<TextBlock > Books </TextBlock>
</Expander.Header>
<ScrollViewer >
<ListBox >
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
<ListBoxItem>Item 4</ListBoxItem>
</ListBox >
</ScrollViewer>
</Expander>
Pgina 24 de 55
Control MenuBase
Dentro de esta clase hay dos tipos de mens: Menu y ContextMenu. El primero
acta como contenedor para el control MenuItem. ContextMenu le permite al
desarrollador extender las opciones de un control a travs del clic derecho. En el
ejemplo que tenemos, vemos que la ventaja que nos brinda adherir un control
ContextMenu es que le da al botn mucha ms potencia en el evento Click. El clic
izquierdo es usado normalmente, pero el derecho se utiliza para ver y seleccionar desde
un men. Como vemos en la imagen, al hacer clic derecho sobre el botn, aparece un
men donde hay muchas ms opciones.
<Canvas>
<Button Width=300 Height==45 >A ContextMenu within a Button
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header=File />
<MenuItem Header=New />
<MenuItem Header=SaveAs />
<MenuItem Header=Recent Files >
<MenuItem Header=DocumentOne.txt />
<MenuItem Header=SpeadSheetOne.xls />
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
</Button>
</Canvas>
Control ComboBox
<ComboBox Text="Cerrado" Width="100 Height="20">
<ComboBoxItem MouseMove="OnHover" Name="cbi1">Item1</ComboBoxItem>
<ComboBoxItem MouseMove="OnHover" Name="cbi2">Item2</ComboBoxItem>
<ComboBoxItem MouseMove="OnHover" Name="cbi3">Item3</ComboBoxItem>
</ComboBox>
Control TreeView
<TreeView>
<TreeViewItem Header ="Animales">
<TreeViewItem Header="Mamiferos">
<TreeViewItem Header="Perro"/>
<TreeViewItem Header="Gato"/>
</TreeViewItem>
<TextBlock>Anfibios</TextBlock>
<TreeViewItem Header="Aves">
<TextBlock>Condor</TextBlock>
<TextBlock>Aguila</TextBlock>
</TreeViewItem>
</TreeViewItem>
</TreeView>
Pgina 25 de 55
Paneles
Una pgina de XAML comienza tpicamente con un elemento del panel.
El panel es un envase para el contenido de una pgina, y controla la colocacin y la
representacin de ese contenido.
Un panel puede contener otros paneles, lo que permite repartir la superficie de
exhibicin en regiones, cada una controlada por su panel.
Los paneles son contenedores de controles que pueden ser jerarquizados. El conjunto de
atributos sobre un panel es heredado por los controles que estn contenidos por l. Se
puede usar un panel para las siguientes funciones:
Panel Canvas
Un panel Canvas coloca cada elemento hijo en coordenadas dentro del rea del
panel de Canvas.
Cuando las coordenadas de los elementos se superponen, se puede especificar el
orden de aparicin de los elementos.
Todos los hijos del Canvas usan las siguientes propiedades para poder situarse
dentro de l y, como su nombre lo indica, la distancia con respecto a un extremo:
Top (parte superior) Button (parte inferior). Left Right
Canvas es un panel que no hereda caractersticas de diseo. Tiene predefinidos la altura
y el ancho en cero, a menos que sea hijo de otro elemento del que automticamente
hereda esas propiedades. Los hijos de Canvas nunca cambian de tamao segn la
herencia sobre el canvas, simplemente se sitan sobre los puntos de coordenadas
designados.
<Canvas xmlns="http://schemas.microsoft.com/2003/xaml" >
<Rectangle Fill="#33CC66" Width="2in" Height="1in" Canvas.Top="25"
Canvas.Left="50" StrokeThickness="6px" Stroke="Orange" />
<Ellipse Fill="yellow" CenterX="1.5in" CenterY="1.1in" RadiusX=".5in"
RadiusY="1in" StrokeThickness="4px" Stroke="Blue" />
<Text Canvas.Top="50" Canvas.Left="60" Foreground="#000000"
FontWeight="Bold" FontFamily="Arial" FontStyle="Normal" FontSize="25">
Hello Shapes!
</Text>
</Canvas>
Pgina 26 de 55
Panel DockPanel
Un DockPanel permite acomodar sus elementos de forma horizontal o vertical. Cuando
se le asignan al DockPanel dos elementos en la misma rea, ste los acomoda de forma
vertical u horizontal dentro de ella.
Panel FlowPanel
El panel FlowPanel proporciona un gran nmero de caractersticas automticas, y
nos permite trabajar con textos y grficos complejos.
Exhibe sus elementos de la mejor manera posible, teniendo en cuenta el rea de
trabajo, y envolviendo y alineando los elementos como sea necesario.
Pgina 28 de 55
Panel TextPanel
Soporta textos multilnea y textos multiformato.
El uso tpico es el caso de tener que realizar un diseo complejo del texto.
Para mostrar un simple texto es recomendable usar el elemento Text.
Pgina 29 de 55
Panel GridPanel
Soporta muchas propiedades que se pueden usar para especificar el diseo de los
datos por mostrar.
La distribucin de los elementos hijos empieza en la esquina superior izquierda.
Un elemento puede ocupar varias filas o varias columnas, utilizando la propiedad
ColumnSpan o RowSpan.
Cada hijo del GridPanel est dibujado en el orden en que aparece en el cdigo XAML.
Como consecuencia, el orden de las capas puede ser alcanzado cuando los controles
comparten las mismas coordenadas.
El control Grid y las tablas comparten una funcionalidad en comn, pero cada uno
puede ser aplicado en escenarios distintos para su mejor uso. El control Grid agrega
elementos basados en columnas y filas indexadas, las tablas no. Tambin nos permite
mantener el contenido en una capa, donde ms de un elemento puede existir sin estar en
una simple celda; las tablas no soportan capas.
Si un elemento se agrega dentro de un Grid y la columna tiene auto en la propiedad
Width, se acomodar sin restricciones.
Panel StackPanel
StackPanel es para crear un conjunto de botones situados verticalmente. Para
posicionamiento horizontal, se debe colocar la propiedad Orientation en Horizontal.
<StackPanel HorizontalAlignment="Left"
VerticalAlignment="Top">
<Button>Botn 1</Button>
<Button>Botn 2</Button>
<Button>Botn 3</Button>
</StackPanel>
Pgina 30 de 55
Documento Fixed
Los documentos Fixed estn pensados para aplicaciones que requieren una precisa
presentacin de WYSIWYG (What you see is what you get, lo que ve es lo que
obtiene).
El uso tpico del documento Fixed incluye procesamiento de textos, publicaciones de
escritorio y diseo de formularios, donde la necesidad de mantener el diseo de la
pgina es crtica.
Un documento Fixed mantiene con precisin la posicin de los elementos del contenido,
independientemente de la pantalla o de la impresora en uso. Por ejemplo, una pgina del
documento Fixed mostrada en 96 dpi aparecer en la misma posicin cuando la salida
sea en una impresora lser con 600 dpi o cuando se necesite imprimir en dimensiones
mucho ms grandes, con 4800 dpi. La estructura de la pgina se mantiene en todos los
casos, mientras la calidad del documento se maximiza para las capacidades de cada tipo
de dispositivo.
Pgina 31 de 55
Pgina 32 de 55
Ejemplo de DocumentViewer
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="Archivo">
<MenuItem Header="Abrir"
Click="MenuFileOpen"/>
</MenuItem>
</Menu>
<DocumentViewer
Name="MyDocumentViewer"
Grid.Row="1"
HorizontalAlignment="Stretch />
</Grid>
El anterior ejemplo de XAML define un DocumentViewer llamado
MyDocumentViewer, como tambin un men para acceder al dilogo file-loading. El
siguiente cdigo C# implementa la accin abrir del men:
private void MenuFileOpen(object sender, RoutedEventArgs e)
{
OpenFileDialog fileOpenDialog = new OpenFileDialog();
// Ask the user what file to open.
System.Windows.Forms.DialogResult openResult = fileOpenDialog.ShowDialog();
if (openResult != System.Windows.Forms.DialogResult.OK) return;
// Open and parse the XAML file.
if (File.Exists(fileOpenDialog.FileName))
{
FileInfo fileInfo = new FileInfo(fileOpenDialog.FileName);
FileStream documentStream = fileInfo.OpenRead();
Uri contentUri = new Uri(fileInfo.DirectoryName + "\\", UriKind.Absolute);
Pgina 33 de 55
Parser.LoadXml(documentStream,
parserContext)
if (content == null)
{
System.Windows.MessageBox.Show(
"The parsed content cannot be cast to an IDocumentPaginator object.",
"Cannot Create IDocumentPaginator",
MessageBoxButton.OK);
}
else MyDocumentViewer.Content = (IDocumentPaginator)content;
}
catch { /* An exception was raised during parsing. */ }
}
}
Pgina 34 de 55
as
Documento Flow
Est diseado para optimizar la visin y la legibilidad por parte del usuario. Se ajusta
dinmicamente segn el contenido que haya en l. Una pgina web es un ejemplo
sencillo de un documento Flow.
Mientras que los Fixed Documents se enfocan en representar el contenido de forma
consistente y precisa, los Flow Documents estn diseados para optimizar la
experiencia del lector cuando el contenido es mostrado en diferentes tamaos y
resoluciones de dispositivos.
El Flow Document soporta algunos controles para la visualizacin de documentos:
FlowDocumentPageViewer
FlowDocumentReader
FlowDocumentScrollViewer
La figura muestra cmo la vista del documento Flow se modifica con los severos
cambios de tamao de ventana. Como cambia el rea de la pantalla, el contenido se
mueve para lograr la mejor vista del espacio visible.
Pgina 35 de 55
FlowDocumentPageViewer
Muestra el contenido de forma paginada, se ve una pgina a la vez. En el caso de que
tengamos un contenido muy extenso, al darle este contenido al control,
automticamente lo paginar para ofrecer una mejor lectura.
FlowDocumentScrollViewer
La barra desplazadora vertical es siempre mostrada, y la horizontal se exhibe slo si es
necesario. De forma predeterminada, el FlowDocumentScrollViewer no incluye una
barra de herramientas (la cual trae los controles de los otros documentos, como zoom,
botn de bsqueda, etc.), pero se puede hacer visible modificando la propiedad
IsToolBarVisible.
Pgina 36 de 55
FlowDocumentReader
Permite al usuario elegir varios tipos de vistas de forma dinmica. Puede ver el
contenido en una simple pgina, en dos pginas a la vez, o con un scroll continuo.
Pgina 38 de 55
Objeto Shape
Windows Presentation Foundation provee un gran nmero de objetos listos para usar.
Todos los objetos Shape heredan propiedades de la clase Shape. El Shape de tipo Line
permite dibujar una lnea entre dos puntos dados.
En el ejemplo damos las coordenadas del primer punto (X1, Y1) y las del segundo
punto (X2, Y2) donde se va a encontrar nuestro Shape. Adems, especificamos el color,
el grosor y otras propiedades. Son elementos para crear y dibujar Shapes 2D.
Las propiedades de los Shapes son dependientes de los objetos y pueden ser animados.
Soportan una variedad de eventos, hacindolos adecuados para su uso.Pertenecen a la
clase System.Windows.Shape.
<Line
Stroke="Black"
StrokeThickness="10"
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
X1="10"
Y1="10"
X2="75"
Y2="90"/>
Objeto Geometries
Como los objetos Shape, representan Shapes 2D, pero son ms verstiles que aqullos.
Pueden ser definidos, por ejemplo, para describir curvas. Tambin es posible
renderizarlos usando otro elemento del framework, controles o brushes.
Objeto Pen
Dibuja una lnea de una altura y un ancho especficos. Una lnea dibujada con un Pen
puede adquirir una variedad de estilos, incluidos colores slidos y texturas. El relleno
depende del brush o la textura que se utilice como objeto de relleno.
Pgina 39 de 55
Tipos de transformaciones
Rotation
Con este tipo de transformacin podemos rotar un objeto con un determinado ngulo.
Con la propiedad Angle en 45 se rota un elemento 45 grados en el sentido de las agujas
del reloj. Se pueden especificar las propiedades CenterX y CenterY si se quiere
controlar el punto donde el elemento es rotado.
Scale
Cambia el tamao de nuestro dibujo de forma escalar.
Las propiedades ScaleX y ScaleY redimensionan el elemento. Por ejemplo, si el valor
ScaleX es 1.5, el elemento se estira un 150% ms con respecto al ancho. Si ScaleY tiene
un valor de 0.5, el elemento se reduce un 50% con respecto a la altura.
Skew
Con esta transformacin estiramos la figura, modificando las propiedades AngleX,
AngleY y Center.
Son tiles para la simulacin 3D en objetos 2D. La propiedad Center especifica el punto
central del estiramiento. Las propiedades AngleX y AngleY establecen los ngulos de
estiramiento de eje X y de eje Y.
Pgina 40 de 55
Cmaras y proyecciones
Cuando los desarrolladores trabajan en 2D, la posicin de los dibujos es primitiva, pero
cuando se crea un escenario 3D, es importante recordar que slo se est creando una
representacin 2D de un objeto 3D. Porque una escena 3D se ve diferente segn el
punto de vista desde donde se mire, se debe marcar el punto desde donde se est viendo
el grfico. La clase Camera permite especificar el punto desde donde queremos que se
vea el grfico.
Otra manera de entender cmo est representada una imagen 3D en una superficie 2D es
describiendo la escena como una proyeccin sobre la superficie de la visin. La clase
ProjectionCamera nos permite especificar las diferentes proyecciones y sus propiedades
para modificar el modo en que se va a representar el modelo del grfico 3D. Las
propiedades NearPlaneDistance (distancia mnima) y FarPlaneDistance (distancia
mxima) limitan la distancia de la proyeccin de la cmara. Esto es porque la cmara
puede ubicarse en cualquier lugar de la escena; entonces, podramos ubicar la cmara
muy cerca y no se podra distinguir nuestro grfico 3D, y hasta podramos estar dentro
de l.
Traslacin y rotacin
Traslacin
Las traslaciones se heredan desde la clase Transform3D, e incluyen las clases
TranslateTransform3D, ScaleTransform3D y RotateTransform3D.
TranslateTransform3D mueve todos los puntos del modelo 3D en direccin del vector
que se define en la propiedad Offset. Por ejemplo, tenemos un cubo donde el vrtice se
encuentra en el (2, 2, 2), y queremos que el vrtice est en el (2, 3.6, 3). Para hacerlo, en
la propiedad Offset tendramos que asignar el vector de traslacin (0, 1.6, 1), y entonces
el vrtice del cubo cambiara de posicin y toda nuestra grfica 3D sera trasladada.
Rotacin
Un grfico 3D se puede rotar de muchas maneras. Una rotacin tpica especifica un eje
y un ngulo de rotacin alrededor del eje. La clase RotateTransform3D nos permite
rotar con la propiedad Rotation, y luego las propiedades del eje y el ngulo de la
rotacin para definirlo.
Pgina 41 de 55
Animaciones
Introduccion
WPF se encarga del trabajo de detrs de la escena para administrar el sistema de
sincronizacin y el de redisear la pantalla eficientemente.
WPF provee un conjunto de clases de sincronizacin que le permite al desarrollador
enfocarse en los efectos que quiera crear.
Hay varios puntos fundamentales sobre el concepto del sistema de sincronizacin que
sern tiles para entender cmo usar las animaciones de WPF. El ms importante es
que, en WPF, el desarrollador les da animacin a los objetos aplicndoles la animacin.
Por ejemplo, si el desarrollador quiere que un elemento se agrande, tiene que animar las
propiedades Width y Height. Para que un objeto se desvanezca, hay que animar la
propiedad Opacity.
Para que la propiedad sea animable, hay tres requisitos:
Debe haber una dependencia de propiedad.
Debe haber un tipo compatible de la animacin.
Debe ser una clase que herede de DependencyObject.
WPF contiene muchos objetos con la propiedad Animacin. Controles como Button y
TabControl heredan propiedades desde DependencyObject. La mayora de sus
propiedades son propiedades de dependencia.
Nos brindan la posibilidad de animar objetos muy fcilmente.
Todos los objetos tienen propiedades que pueden modificarse para poder animarlos,
pero tendremos que, adems de cambiar su propiedad, utilizar un tipo de Animation
apropiado.
Propiedad: Color Animation: ColorAnimation.
Propiedad: Point Animation: PointAnimation (cambia la posicin de un elemento
Geometry).
Cada una de las Animations deriva de la clase Timeline.
Timeline es una medida de tiempo a la que podemos especificar la duracin, la
velocidad y las veces que repetiremos esta medida.
StoryBoard y ParallelTimeline son clases que derivan de TimelineGroup, y nos
permiten contener y organizar varias Timelines.
Con TargetName especificamos qu objeto vamos a animar, y con TargetProperty
especificamos la propiedad que utilizaremos.
Pgina 42 de 55
Starting Value
From es utilizado cuando se desea especificar el valor inicial preciso de la
propiedad del objeto que se va a animar, y puede usarse junto con To y By. Es
posible usar From de forma solitaria; de esta manera la animacin se encarga de
hacer la transicin usando el valor de base que tiene la propiedad del objeto por
animar.
Ending Value
To lo utilizaremos cuando queramos precisar el valor final de la propiedad del
objeto que vamos a animar; puede utilizarse junto con From o de forma
individual. En el ltimo caso, la animacin tomar el valor base de la propiedad del
objeto.
Offset Value
Propiedades
Duration. Determina cunto va a durar nuestra animacin.
RepeatBehavior. Es la cantidad de veces que se va a reproducir nuestra animacin.
RepeatBehavior puede recibir tambin un valor de tipo days:minutes:seconds, y
en el caso de que asignemos un tiempo ms largo de lo que realmente dura nuestra
animacin, sta se repetir.
Compatibilidad de tipos de animaciones
<Type> Animation. Conocida como Basic (bsica), sta anima entre un valor de
comienzo y uno de destino.
<Type>AnimationUsingKeyFrames. Son ms poderosas que las animaciones Basic,
porque se puede especificar cualquier nmero de valores y, tambin, controlar su
mtodo de interpolacin. Algunos tipos slo pueden ser animados con esta clase de
animaciones.
<Type>AnimationBase. Clase abstracta que realiza una animacin a valor <Type>.
Esta clase sirve como base para las clases de <Type>Animation y
<Type>AnimationUsingKeyFrames. Se usa para crear animaciones propias
predeterminadas.
Como los valores de la salida de las animaciones son utilizados para establecer una
propiedad, hay distintas animaciones para diferentes propiedades. Para animar una
propiedad que toma como parmetro un Double, usamos una animacin que produce
valores del tipo Double. Para animar una propiedad que toma como parmetro un valor
del tipo Point, usamos una animacin que produce valores del tipo Point.
Pgina 43 de 55
Ejemplo Animacin
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard Name="Storyboard01">
<DoubleAnimation Storyboard.TargetName="myImage"
Storyboard.TargetProperty="(Image.Width)"
From="250" To="0" Duration="0:0:5" AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Image Name="myImage" Source="d:/webcasts.jpg" Width="250"/>
</Grid>
Dentro de un EventTrigger, lo primero que debemos hacer es iniciar el
BeginStoryBoard. Luego creamos una etiqueta del tipo StoryBoard en la cual
insertamos un DoubleAnimation. El elemento Double nos indica cun precisos somos
en el tipo de datos. Luego configuramos el control objetivo y la propiedad que vamos a
controlar, con TargetName y TargetProperty, respectivamente.
Para finalizar, le pasamos los valores por modificar. Si se fijan en el ejemplo, vern que
esto lo hacemos con From y To; luego le pasamos el tiempo que queremos que dure la
animacin, que est representado con el formato de day:hour:second. Tambin
habilitamos las opciones de AutoReverse y repeticin continua, y podemos configurar
la aceleracin o desaceleracin.
Pgina 44 de 55
Estilos
Introduccion
Permiten disear una aplicacin, documento o interfaz de usuario de forma estndar
para un determinado producto.
El modelo de estilo que presenta Windows Presentation Foundation separa la lgica
y la interfaz.
Los estilos son recursos, y obedecen a las mismas reglas de alcance que se aplican a
todos los recursos.
Los estilos permiten disear una aplicacin, documento o interfaz de usuario de forma
estndar para un determinado producto. El diseador puede personalizar una interfaz de
usuario, pero se necesita un fuerte modelo de estilo para el mantenimiento y para poder
compartir esa interfaz. Windows Presentation Foundation provee ese modelo.
La separacin entre la lgica y la interfaz significa que los diseadores pueden disear
las pantallas de una aplicacin al mismo tiempo que los desarrolladores escriben la
lgica de esa aplicacin.
Declaracion
La forma ms comn de declarar un estilo es a travs de XAML.
Es posible declarar un estilo a cualquier elemento que derive de FrameworkElement
o de FrameworkContentElement.
XAML
<Style x:Key="Style1"> <Setter Property="Control.Background" Value="Yellow"/>
</Style>
x:Key
El valor del recurso x:Key es utilizado para asociar el estilo con elementos que
deben usar ese estilo.
En el siguiente ejemplo vemos cmo el estilo del elemento Label hace referencia al
estilo Style1.
En el este ejemplo vemos como el estilo del elemento Label hace referencia al estilo
Style1
<Label Content="Yellow Background" Style="{StaticResource Style1}" />
Pgina 45 de 55
TargetType
Podemos aplicar estilos a todos los elementos de un tipo usando la propiedad
TargetType y la llave x:Type.
Insertando el TargetType en el estilo, no habr que asignar la propiedad a los
elementos que se definen.
Insertando el TargetType en el estilo, no habr que asignar la propiedad a los
elementos que se definen. El TargetType tambin determina que slo se pueda
aplicar ese estilo a los elementos del tipo que se define.
<Style TargetType="{x:Type TextBlock}"> <Setter Property="FontFamily"
Value="Segoe Black" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontSize" Value="12pt" /> <Setter Property="Foreground"
Value="#777777" /> </Style>
Extendiendo estilos
Los estilos de Windows Presentation Foundation pueden ser extendidos o
heredados.
Pueden estar basados en otros estilos mediante la propiedad BasedOn.
En el ejemplo, Style2 hereda el background amarillo, y tambin se agrega el estilo
Foreground con valor azul.
<Style x:Key="Style1">
<Setter Property="Control.Background" Value="Yellow"/>
</Style>
<Style x:Key="Style2" BasedOn="{StaticResource Style1}">
<Setter Property="Control.Foreground" Value="Blue"/>
</Style>
Pgina 46 de 55
Triggers
Windows Presentation Foundation define propiedades que corresponden a las
acciones de los usuarios finales.
IsMouseOver se vuelve verdadera cuando el usuario pasa el mouse sobre
un elemento de tipo UIElement o un ContentElement.
Los triggers permiten a los usuarios de Windows Presentation Foundation cambiar
las propiedades basadas en las acciones de los usuarios finales.
Podemos usar un conjunto de triggers con un grupo de propiedades para cambiar otras
propiedades del estilo de un elemento. De la misma manera, podemos cambiar los
valores de un elemento en respuesta a un evento usando el elemento Eventrigger. El
siguiente ejemplo contiene dos eventos de un trigger; uno de ellos ocurre cuando el
puntero de mouse entra en el elemento y el otro se produce cuando el mouse sale del
elemento.
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="50" />
<Setter Property="Margin" Value="20" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Style.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
To="300"
Duration="0:0:1.5"
AccelerationRatio="0.10"
DecelerationRatio="0.25"
Storyboard.TargetProperty="(Canvas.Width)"/> </Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:1.5"
AccelerationRatio="0.10"
DecelerationRatio="0.25"
Storyboard.TargetProperty="(Canvas.Width)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Pgina 47 de 55
Pgina 48 de 55
Tipos de aplicaciones
Aplicaciones de navegador XAML
No estn instaladas en el sistema del usuario. Pueden correr con permisos de Internet, y
garantizan el acceso limitado a los recursos del sistema del usuario.
Control Library
Este tipo de aplicacin es similar a las aplicaciones instaladas en trminos de dnde
corre y seguridad. Pero, en realidad, es una coleccin de componentes empaquetados en
una DLL para el uso de aplicaciones despus de que el usuario haya ejecutado la
aplicacin. Como sta no tiene una IU para el usuario, no utiliza XAML.
Aplicaciones instaladas
Estas aplicaciones estn instaladas en el sistema del usuario. Poseen acceso total a los
recursos del sistema del usuario y deben tener el permiso del usuario antes de
ejecutarse.
Se instalan en la mquina local.
Pueden ejecutarse estando conectado o desconectado de Internet.
Tambin se pueden ejecutar en una ventana del explorador.
Comparten caractersticas tpicas soportadas por las Web Applications.
Las aplicaciones instaladas estn tpicamente en una ventana. No pueden correr en
un navegador.
Seguridad. Diferentes de las aplicaciones XAML de navegador, estas aplicaciones
tienen acceso total a los recursos del sistema.
Quedan en el sistema del usuario hasta que l decida desinstalarlas.
El modelo de aplicacin Windows Vista (Longhorn) tambin define cmo escribir
aplicaciones de escritorio, aquellas que el usuario ha instalado de forma local. Este tipo
de aplicaciones pueden funcionar online u offline, colocar iconos en el escritorio, aadir
accesos directos al men Inicio...
Pgina 49 de 55
Pgina 50 de 55
Aplicaciones Web
Son ms simples y mucho ms poderosas que DHTML.
El cdigo de la aplicacin puede usar toda la capa de WPF.
Manejan los eventos localmente.
Soportan grficos y multimedia en la pgina.
El modelo WPF permite implementar una aplicacin de forma similar a las aplicaciones
Web. Esto simplifica la migracin de desarrolladores Web, pues el cdigo es similar al
de las pginas HTML dinmicas (DHTML). Etiquetas y lgica de la aplicacin
coexisten en un mismo archivo; los archivos son desplegados desde un servidor Web, y
las pginas de la aplicacin se muestran en un navegador.
Sin embargo, el modelo objeto de una aplicacin WPF orientada a la Web es ms
simple y poderoso que el de DHTML: la interfaz de sta se encuentra construida sobre
la completa API de WPF (Avalon). Es por ello por lo que las aplicaciones Web contarn
con ricos controles, soporte multimedia avanzado, grficos y manejo local de eventos.
Bsicamente, lo que cualquier aplicacin cliente ofrece. De hecho, las principales
diferencias entre una aplicacin Web WPF y una aplicacin de escritorio no son otras
que el alojamiento de los archivos (servidor o mquina cliente) y que, en el primer caso,
algunos permisos de la aplicacin estarn restringidos.
Describimos algunos escenarios en los que se debera considerar el uso de aplicaciones
del explorador Web. En funcin de la relativa importancia de la complejidad visual, la
facilidad para el desarrollo y los clientes a los que se dirige, puede ser recomendable la
creacin de una experiencia de WBA preferida, adems de una versin HTML que
llegue a un sector ms amplio.
En muchos casos, para las campaas de marketing puede resultar til crear una
experiencia ms atractiva para los usuarios de Windows, mediante la creacin de
aplicaciones del explorador Web.
Las aplicaciones del explorador Web (WBA) permiten trasladar a Internet el potencial
de Windows Presentation Foundation. Proporcionan unas vistas de mxima calidad al
tiempo que ofrecen las herramientas para crear la lgica de la aplicacin necesaria. El
lenguaje XAML flexible y la integracin total con el explorador proporcionan mtodos
eficaces para migrar los sitios existentes. Las WBA cuentan con un historial de
implementacin intachable y un recinto de seguridad, lo cual las convierte en una
opcin de tecnologa Web de gran eficacia.
Pgina 51 de 55
XAML y codebehind
Procedural
Code
Archivo XAML
con
Archivo VB o
CS
Archivo
VB o CS
En la primera forma, usamos el archivo XAML para definir la IU. Se puede adherir un
archivo code-behind con las clases y los mtodos para manejar los eventos de la pgina.
En la segunda forma, se puede escribir toda la aplicacin totalmente en nuestro codebehind. Para poder hacer este tipo de aplicacin, hay que crear una clase que herede
desde la clase Application, se debe crear una clase del tipo Windows o
NavigationWindow, y objetos del tipo TextBox y ListBox para poder mostrarlos.
sta es una parte de un cdigo que nos puede servir como ejemplo:
win = new System.Windows.Window();
rootPanel = new StackPanel();
txtElement = new TextBlock();
txtElement.Text = "Some Text";
win.Content = rootPanel;
rootPanel.Children.Add(txtElement);
win.Show();
Pgina 52 de 55
Presentacin de informacin
Disee vistas personalizadas de informacin XML usando drag and drop para
alcanzar rpidamente visualizaciones que se adaptan a los CSS del diseo del sitio.
Consuma servicios RSS para su sitio, y haga que tengan los mismos estilos de su sitio.
Tecnologa de servidor
Utilice todas las ventajas de ASP.NET 2.0 con el soporte integrado del servidor y los
controles de usuario. Cree sitios dinmicos e interactivos. Use la caja de herramientas
de controles y la tabla de propiedades para poder insertar y configurar rpidamente los
controles ASP.NET.
Puede mantener la vista de su sitio de forma correcta con el uso de Master Pages;
ahorrar tiempo en el diseo del sitio, y podr acceder a l rpidamente para realizar
modificaciones. Es posible acceder a los controles de ASP.NET y a sus propiedades con
el mismo poder que nos brinda Microsoft Visual Studio 2005.
Pgina 54 de 55
Pgina 55 de 55