Documentos de Académico
Documentos de Profesional
Documentos de Cultura
WPF Manual PDF
WPF Manual PDF
Presentation
Foundation
Introducción
¿Qué es Windows Presentation Foundation?
El Windows Framework Extension (WinFX) es la siguiente generación del framework
de programación de Windows. WinFX está basado en el Framework .NET 2.0; sin
embargo, incorpora una nueva API de programación 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 Developer’s 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 visión global de
Windows Presentation Foundation.
¿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 aplicación de Windows
Presentation Foundation, y viceversa. Cuando un desarrollador crea una aplicación en
Windows Presentation Foundation, la mayor parte del código se encuentra escrito e
implementado en XAML. XAML es más rápido, más fácil de implementar y de
localizar, y significa una elección mejor que cualquier código equivalente. Con XAML,
no existen errores de rendimiento, porque es una representación de un modelo de
objetos basado en XML.
¿Qué es AERO?
El término AERO, sigla de Auténtico, Energético, Reflexivo y Open (Abierto), remite a
las guías de experiencia de usuario para Windows Vista, y se encarga del look and feel
del sistema operativo. Estas guías no sólo determinan el modo en que se dibujan los
píxeles, sino también la forma en que el usuario interactúa con el sistema y evoca
sentimientos.
Página 1 de 55
Windows Presentation Fundation
Página 2 de 55
Windows Presentation Fundation
Implementación de estilos
Los estilos permiten a los diseñadores 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.
XAML fue diseñado para soportar las clases y los métodos de la plataforma de
desarrollo .NET que tienen relación con la interacción con el usuario, en especial, el
despliegue en pantalla.
Página 3 de 55
Windows Presentation Fundation
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 renderización de los
elementos (tamaño y dimensiones, posición, y el arreglo del contenido de sus hijos).
WPF proporciona un gran número de paneles, como Canvas, DockPanel y GridPanel,
que veremos más adelante.
Efectos 3D
La implementación 3D de Windows Presentation Foundation permite a los
desarrolladores dibujar, transformar y animar gráficos 3D de distintas formas, usando
las mismas habilidades afrontadas por la plataforma de gráficos 2D. También permite
combinar gráficos 2D y 3D para crear controles más atractivos, y proporcionar
complejas ilustraciones de información. Este soporte 3D que nos otorga Windows
Presentation Foundation no tiene todas las características 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 animación.
WPF proporciona todas las herramientas para que este proceso que tan complicado nos
parecía antes sea más fácil de implementar.
Página 4 de 55
Windows Presentation Fundation
Avalon proporciona una vista expandida de la capa de interfaz de usuario Avalon con
un modelo específico para documentos (1) y medios (2). Varias otras características
incluyen controles e, incluso, Servicios de personalización y profiling (3) para
ASP.NET, que son definidos también como parte de Windows Vista.
Avalon interactúa con el sistema operativo de base, que, por ejemplo, contiene
GDI/GDI+. Algunos de estos ítems se encuentran en el kernel, otros no.
Página 5 de 55
Windows Presentation Fundation
Document
WPF provee muchas características para combinar documentos, IU y contenidos
audiovisuales. Los documentos usualmente contienen un flujo de controles e imágenes,
los cuales son difíciles de proporcionar con los controles tradicionales de Windows.
UI
Los controles UI permiten una alta interacción con el usuario, pero no se concentran
tanto en el soporte para textos.
Media
Enriquecen la visión de las presentaciones interactivas, como video, audio y más.
Administrador de ventanas
Maneja la mayor parte del trabajo duro de la administración de ventanas, como
minimizar, maximizar y mostrar cuadros de diálogo. Las nuevas características incluyen
la navegación basada en páginas y soporte en Extensible Application Markup Language,
XAML.
Media Processing
Provee procesamiento de audio y video, como también nuevos codecs y APIs.
Página 6 de 55
Windows Presentation Fundation
El marco de programación
Proporciona soluciones para material audiovisual, diseño para interfaz de usuario y
documentos que van mucho más allá de lo que los desarrolladores tienen hoy. El
framework de Windows Presentation Foundation proporciona soluciones para material
audiovisual, diseño para interfaz de usuario y documentos que van mucho más allá de lo
que los desarrolladores tienen hoy. Creado con criterios de extensibilidad, Windows
Presentation Foundation permite que los desarrolladores creen sus propios controles
sobre el motor de Windows Presentation Foundation “desde el ground up” o haciendo
una subclase con los controles ya existentes de Windows Presentation Foundation. Son
centrales en el framework de Windows Presentation Foundation los controles para
formas, documentos, imágenes, videos, animaciones, 3D y “paneles” donde ubicar
controles y contenido. Estas cuestiones “primitivas” proporcionan los blocks de
construcción para el desarrollo de la nueva generación de experiencias de usuario.
Página 7 de 55
Windows Presentation Fundation
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 través 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 aplicación. Éste
incluye menús, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels,
borders, y sliders para audio y video. El Viewport3D está también localizado en este
namespace para controlar todo el contenido 3D y el contenido con interacción.
System.Windows.Data
El namespace de datos controla todas las propiedades para enlace a datos. Éste es usado
específicamente para la fuente, para estas clases y para cualquier otra asociada a la
implementación 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 interactúa el usuario cuando usa la aplicación.
Página 8 de 55
Windows Presentation Fundation
System.Windows.Media
El namespace Media controla todas las clases de gráficos tanto para 2D como para 3D.
Éste también define el camino para las clases de segmento, brochas, colores, efectos de
imágenes, clases geométricas, colecciones, audio, video, enumeraciones y estructuras.
System.Windows.Media.Animation
Este namespace contiene las clases utilizadas para animación 2D y 3D. Esta área
incluye tipos para Timelines, KeyFrames y Animation.
System.Windows.Media.Media3D
Contiene una variedad de clases específicas para gráficos en 3D.
Estas clases son utilizadas para definir cómo los gráficos van a ser presentados dentro
de la aplicación.
System.Windows.Navigation
Este namespace está dedicado a las clases e interfaces utilizadas para la navegación de
aplicaciones, donde la navegación 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 podrían definir
propiedades para estilos de animación y localización, y que pueden ser accedidas por un
objeto referenciando el nombre como Style=”{StaticResource ResourceName}”
dentro de la aplicación.
System.Windows.Serialization
Este namespace soporta la conversión 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 diseño, la posición y la interacción con el usuario.
FrameworkElement
Derivado de UIElement, FrameworkElement es también una clase base. Es una clase de
la cual la mayoría de los elementos visuales heredan la apariencia y las características
(por ejemplo, altura, ancho, etc.). Cuando escribimos código en .NET, podemos acceder
a un objeto que se encuentra dentro del XAML referenciándolo con la propiedad
“Name”.
Página 9 de 55
Windows Presentation Fundation
Página 10 de 55
Windows Presentation Fundation
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 más práctica 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.
Si creamos una clase que herede de UIElement, se pueden obtener las siguientes
funcionalidades, además de las que nos provee la clase DependencyObject:
Soporte para animaciones.
Soporte básico para entrada y de comandos.
Métodos virtuales que pueden sobrecargar para proveer información para
el manejador de layout.
Página 11 de 55
Windows Presentation Fundation
Página 12 de 55
Windows Presentation Fundation
Freezable Objects
Los objetos del tipo Freezable presentan características especiales que ayudan a
desarrollar una aplicación 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.
Un objeto del tipo Freezable provee un evento Changed para notificar cualquier
modificación del objeto.
La clase Freezable facilita el uso del sistema de gráficos de forma más segura.
Incluso cuando no se modifica un objeto del sistema gráfico, el sistema debe gastar
recursos de su método de monitoreo para el caso de que se haya realizado alguna
modificación.
Ejemplo Freezable
Por ejemplo, creamos un SolidColorBrush y lo usamos para pintar el fondo de un
botón. Cuando el botón es renderizado, el sistema de gráficos de Windows
Presentation Foundation usa la información que se le provee para pintar un grupo de
píxeles y crear la apariencia de un botón.
Button myButton = new Button(); SolidColorBrush myBrush = new
SolidColorBrush(Colors.Yellow); myButton.Background = myBrush;
Página 13 de 55
Windows Presentation Fundation
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.
Este ejemplo muestra todo lo que se necesita para escribir un “Hola Mundo” en XAML.
Los archivos XAML son, convencionalmente, archivos XML con una extensión de tipo
.xaml y un namespace referenciado a los namespaces de XML. Aquí, como estamos
trabajando con Windows Presentation Foundation, todos los nombres serán
referenciados hacia Windows Presentation Foundation y los namespaces de XAML.
Los archivos de tipo XAML serán producidos por una herramienta de diseño visual,
como Microsoft Visual Studio o Microsoft Expression.
Página 14 de 55
Windows Presentation Fundation
XAML fue diseñado para soportar las clases y los métodos de la plataforma de
desarrollo .NET que tienen relación con la interacción con el usuario, en especial, el
despliegue en pantalla. La sigla XAML originalmente significaba Extensible Avalon
Markup Language, Lenguaje de Formato para Extensibilidad de Avalon, habiendo
sido Avalon el nombre clave original de la Base de Presentación de Windows, nombre
que engloba a este grupo de clases de .NET.
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
La primera referencia el total de los namespaces de WPF como predeterminado.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
La segunda referencia a un namespace de XAML separado, que típicamente empieza
con el prefijo “x:”
Página 15 de 55
Windows Presentation Fundation
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 botón en una página, XAML puede
crearlo y mostrarlo por pantalla. Pero el botón no hizo nada hasta ahora. El modelo de
programación de Windows Presentation Foundation permite, a través 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 código XAML. Hay elementos que no
tienen esta propiedad ya que su clase no hereda, pero pueden usar x:Name para el
mismo propósito.
X:Name
<element x:Name="aStringNameValue".../>
Página 16 de 55
Windows Presentation Fundation
Este ejemplo es muy sencillo: hay un botón llamado “button1”, y al cliquear sobre éste,
se procesa el evento Clicked. Lo único que hace este evento es cambiar el texto que
aparece dentro del botón.
Hay muchas razones para desalentar sobre el uso de código en XAML. En términos de
arquitectura y filosofía de codificación, separar el XAML y el code-behind permite que
las funciones del desarrollador y del diseñador sean distintas. No se pueden declarar
múltiples clases dentro del código XAML, y todo debe existir en un miembro o variable
dentro del código generado de la clase parcial.
Página 17 de 55
Windows Presentation Fundation
Programando en XAML
En muchas aplicaciones, gran parte del código se escribe para crear o actualizar la
interfaz de usuario. En los últimos años, 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 programación tradicionales:
Sin embargo, para crear una aplicación productiva será necesario trabajar con eventos,
proporcionar una lógica de decisiones personalizadas, o incluir algunas operaciones que
no tengan nada que ver con la IU. Esto requiere mezclar XAML con código y,
afortunadamente, es muy sencillo de conseguir, gracias al code-behind.
Documentos en XAML
Página 18 de 55
Windows Presentation Fundation
XAML es un lenguaje declarativo basado en XML, que puede ser utilizado para
programar en el modelo de objetos de Windows Presentation Foundation. Es
especialmente útil a la hora de implementar las IU de sus aplicaciones. Cada etiqueta (o
tag, en inglés) de XAML corresponde a una clase de modelo de objetos. En general, una
etiqueta también posee una colección de atributos que remiten a las propiedades de la
clase asociada de etiqueta.
Separar la parte visual de la parte lógica les permite a las personas utilizar diversos
utilitarios gráficos para crear el layout y el diseño de la parte gráfica de la interfaz de
usuario, sin afectar la parte lógica del programa. Entonces, podemos combinar
diferentes disciplinas de trabajo en la misma aplicación, algo que hoy es difícil de
lograr.
Página 19 de 55
Windows Presentation Fundation
Página 20 de 55
Windows Presentation Fundation
Un control es cualquier cosa que requiere interacción 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 código fuente complejo. La mayor parte
del “look and feel” de estos controles puede ser realizada declarativamente en el
documento XAML.
Jerarquía de controles
La jerarquía de clases nos será muy útil, ya que cada hijo puede heredar propiedades y
estilos de su padre. Por ejemplo, los elementos del StackPanel tendrán un estilo de
posición distinto de los hijos que tendrán los hijos del DockPanel. También podemos
crear distintos estilos y aplicarlos a los diferentes grupos de controles que tengamos.
Página 21 de 55
Windows Presentation Fundation
En el ejemplo del botón que vimos, nos podemos dar cuenta de cómo Windows
Presentation Foundation interpreta el código XAML.
Los atributos ID, Height, Width, Content y Click, por lo general, se encuentran en la
mayoría de los controles, ya que describen aspectos generales, pero hay algunos
controles que tienen atributos que sólo ellos poseen, y es por eso por lo que se
diferencian de los demás. Como vemos, en el Label tenemos atributos parecidos a los
del botón, lo único que cambia para que sean distintos es que en el comienzo del tag
especificamos el control que queremos mostrar.
Página 22 de 55
Windows Presentation Fundation
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 imágenes y textos. Los estados de los ítems pueden ser
seleccionado o deseleccionado (checked y unchecked).
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.
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.
Página 23 de 55
Windows Presentation Fundation
Control Expander
Muestra información 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 región de Header para
el área del título, 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>
Página 24 de 55
Windows Presentation Fundation
Control MenuBase
Dentro de esta clase hay dos tipos de menús: “Menu” y “ContextMenu”. El primero
actúa como contenedor para el control “MenuItem”. “ContextMenu” le permite al
desarrollador extender las opciones de un control a través del clic derecho. En el
ejemplo que tenemos, vemos que la ventaja que nos brinda adherir un control
“ContextMenu” es que le da al botón mucha más 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 botón, aparece un
menú donde hay muchas más 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>
Página 25 de 55
Windows Presentation Fundation
Paneles
Una página de XAML comienza típicamente con un elemento del panel.
Los paneles son contenedores de controles que pueden ser jerarquizados. El conjunto de
atributos sobre un panel es heredado por los controles que están 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.
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
Página 26 de 55
Windows Presentation Fundation
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.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
WindowTitle="DockPanel Sample">
<DockPanel LastChildFill="True">
<Border Height="25" Background="SkyBlue" BorderBrush="Black"
BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="SkyBlue" BorderBrush="Black"
BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="LemonChiffon" BorderBrush="Black"
BorderThickness="1" DockPanel.Dock="Bottom">
<TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
</Border>
<Border Width="200" Background="PaleGreen" BorderBrush="Black"
BorderThickness="1" DockPanel.Dock="Left">
<TextBlock Foreground="Black">Dock = "Left"</TextBlock>
</Border>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<TextBlock Foreground="Black">This content will "Fill" the remaining
space</TextBlock>
</Border>
</DockPanel>
</Page>
Página 27 de 55
Windows Presentation Fundation
Panel FlowPanel
El panel FlowPanel proporciona un gran número de características automáticas, y
nos permite trabajar con textos y gráficos complejos.
Se define el tamaño del panel usando las propiedades Width y Height. El panel se
muestra dependiendo de estas dimensiones, como se ve en las figuras.
Se trata, por tanto, de un elemento potente que, a partir de sus dimensiones (propiedades
Width y Height), distribuye el espacio de forma adecuada. Por defecto, los elementos
son colocados de izquierda a derecha, y de arriba hacia abajo. El siguiente fragmento
XAML muestra la forma en que el FlowPanel separa y redistribuye sus elementos
(cuatro cuadrados Canvas), tras ser redimensionado:
Página 28 de 55
Windows Presentation Fundation
Panel TextPanel
Soporta textos multilínea y textos multiformato.
El uso típico es el caso de tener que realizar un diseño complejo del texto.
El siguiente código XAML nos muestra cómo este tipo de panel distribuye el contenido,
ajustando el número y la altura de las columnas.
<Block Background="LightGray">
<Inline FontFamily="Arial" FontWeight="Bold"
FontSize="16pt">Transcript of the
<Italic>Nicolay Draft</Italic>
of the Gettysburg Address.
</Inline>
</Block>
</TextPanel>
</Border>
Página 29 de 55
Windows Presentation Fundation
Panel GridPanel
Soporta muchas propiedades que se pueden usar para especificar el diseño de los
datos por mostrar.
Cada hijo del GridPanel está dibujado en el orden en que aparece en el código 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 común, 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. También nos permite
mantener el contenido en una capa, donde más de un elemento puede existir sin estar en
una simple celda; las tablas no soportan capas.
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>Botón 1</Button>
<Button>Botón 2</Button>
<Button>Botón 3</Button>
</StackPanel>
Página 30 de 55
Windows Presentation Fundation
Documento Fixed
Los documentos Fixed están pensados para aplicaciones que requieren una precisa
presentación de WYSIWYG (“What you see is what you get”, lo que ve es lo que
obtiene).
Un documento Fixed mantiene con precisión la posición de los elementos del contenido,
independientemente de la pantalla o de la impresora en uso. Por ejemplo, una página del
documento Fixed mostrada en 96 dpi aparecerá en la misma posición cuando la salida
sea en una impresora láser con 600 dpi o cuando se necesite imprimir en dimensiones
mucho más grandes, con 4800 dpi. La estructura de la página se mantiene en todos los
casos, mientras la calidad del documento se maximiza para las capacidades de cada tipo
de dispositivo.
Página 31 de 55
Windows Presentation Fundation
ToolBar
El estilo predeterminado del DocumentViewer incluye una barra de herramientas que
permite el uso de algunas funciones como las siguientes:
Página 32 de 55
Windows Presentation Fundation
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>
Página 33 de 55
Windows Presentation Fundation
try
{
ParserContext parserContext = new ParserContext();
parserContext.Mapper = XmlParserDefaults.DefaultMapper;
parserContext.Parent = MyDocumentViewer;
// Let the parser know where the related content files and resource files are.
parserContext.BaseUri = parserContext.ResourceUri = contentUri;
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. */ }
}
}
Página 34 de 55
Windows Presentation Fundation
Documento Flow
Está diseñado para optimizar la visión y la legibilidad por parte del usuario. Se ajusta
dinámicamente según el contenido que haya en él. Una página web es un ejemplo
sencillo de un documento Flow.
Página 35 de 55
Windows Presentation Fundation
FlowDocumentPageViewer
Muestra el contenido de forma paginada, se ve una página a la vez. En el caso de que
tengamos un contenido muy extenso, al darle este contenido al control,
automáticamente lo paginará para ofrecer una mejor lectura.
Tool Bar: la barra de herramientas predeterminada está debajo del área de contenido, y
tiene controles de navegación entre páginas, un control para cambiar el nivel de zoom, y
un indicador que nos muestra qué número de página estamos viendo actualmente y la
cantidad total de páginas.
Page Navigation Controls: incluye un botón para saltar a la página siguiente y otro
para saltar a la página anterior.
Zoom Controls: permiten al usuario aumentar y disminuir el nivel del zoom, haciendo
clic en el botón de más y en el de menos.
FlowDocumentScrollViewer
La barra desplazadora vertical es siempre mostrada, y la horizontal se exhibe sólo 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,
botón de búsqueda, etc.), pero se puede hacer visible modificando la propiedad
IsToolBarVisible.
Página 36 de 55
Windows Presentation Fundation
FlowDocumentReader
Permite al usuario elegir varios tipos de vistas de forma dinámica. Puede ver el
contenido en una simple página, en dos páginas a la vez, o con un scroll continuo.
Find Button: el botón de búsqueda abre una ventana de diálogo, la cual permite al
usuario buscar algún contenido del FlowDocumentReader. El botón Find no se
mostrará si la propiedad IsFindEnable es falsa.
Viewing Mode Buttons: los botones de tipo de vista le permiten al usuario seleccionar
las distintas vistas. Puede ser una o varias páginas a la vez.
Página 37 de 55
Windows Presentation Fundation
Para utilizar las nuevas herramientas multimedia no es necesario contar con librerías
especiales.
Tanto con Visual Studio como con el Notepad se pueden crear gráficos con vectores
o animaciones complejas, e integrarlos a nuestras aplicaciones.
Aceleración del hardware: El sistema de WPF está diseñado para aprovechar más
hardware de gráficos y minimizar la utilización del CPU.
Página 38 de 55
Windows Presentation Fundation
Objeto Shape
Windows Presentation Foundation provee un gran número de objetos “listos para usar”.
Todos los objetos Shape heredan propiedades de la clase Shape. El Shape de tipo Line
permite dibujar una línea 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. Además, 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.
<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 más versátiles que aquéllos.
Pueden ser definidos, por ejemplo, para describir curvas. También es posible
renderizarlos usando otro elemento del framework, controles o brushes.
Objeto Pen
Dibuja una línea de una altura y un ancho específicos. Una línea dibujada con un Pen
puede adquirir una variedad de estilos, incluidos colores sólidos y texturas. El relleno
depende del brush o la textura que se utilice como objeto de relleno.
Página 39 de 55
Windows Presentation Fundation
<Ellipse
Height="100"
Width="200"
Fill="Yellow"
Stroke="Black"
StrokeThickness="2" />
Vimos dos ejemplos, Ellipse y Line, pero además de éstos, existen otros tipos de
Shapes, como Path, Polygon, Polyline y Rectangle. Algunas de las características que
tienen en común estos objetos Shape son:
Como los Shapes son elementos de IU, se pueden agregar dentro de paneles y de otros
controles. El panel de tipo Canvas es la mejor opción para trabajar con dibujos
complejos, ya que éste soporta posición absoluta de los hijos del panel.
Tipos de transformaciones
Rotation
Con este tipo de transformación 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 tamaño 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% más 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 transformación estiramos la figura, modificando las propiedades AngleX,
AngleY y Center.
Son útiles para la simulación 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.
Página 40 de 55
Windows Presentation Fundation
Cámaras y proyecciones
Cuando los desarrolladores trabajan en 2D, la posición de los dibujos es primitiva, pero
cuando se crea un escenario 3D, es importante recordar que sólo se está creando una
representación 2D de un objeto 3D. Porque una escena 3D se ve diferente según el
punto de vista desde donde se mire, se debe marcar el punto desde donde se está viendo
el gráfico. La clase Camera permite especificar el punto desde donde queremos que se
vea el gráfico.
Otra manera de entender cómo está representada una imagen 3D en una superficie 2D es
describiendo la escena como una proyección sobre la superficie de la visión. 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 gráfico 3D. Las
propiedades NearPlaneDistance (distancia mínima) y FarPlaneDistance (distancia
máxima) limitan la distancia de la proyección de la cámara. Esto es porque la cámara
puede ubicarse en cualquier lugar de la escena; entonces, podríamos ubicar la cámara
muy cerca y no se podría distinguir nuestro gráfico 3D, y hasta podríamos estar dentro
de él.
Traslación y rotación
Traslación
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 dirección del vector
que se define en la propiedad Offset. Por ejemplo, tenemos un cubo donde el vértice se
encuentra en el (2, 2, 2), y queremos que el vértice esté en el (2, 3.6, 3). Para hacerlo, en
la propiedad Offset tendríamos que asignar el vector de traslación (0, 1.6, 1), y entonces
el vértice del cubo cambiaría de posición y toda nuestra gráfica 3D sería trasladada.
Rotación
Un gráfico 3D se puede rotar de muchas maneras. Una rotación típica especifica un eje
y un ángulo de rotación alrededor del eje. La clase RotateTransform3D nos permite
rotar con la propiedad Rotation, y luego las propiedades del eje y el ángulo de la
rotación para definirlo.
Página 41 de 55
Windows Presentation Fundation
Animaciones
Introduccion
WPF se encarga del trabajo de “detrás de la escena” para administrar el sistema de
sincronización y el de rediseñar la pantalla eficientemente.
Hay varios puntos fundamentales sobre el concepto del sistema de sincronización que
serán útiles para entender cómo usar las animaciones de WPF. El más importante es
que, en WPF, el desarrollador les da animación a los objetos aplicándoles la animación.
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.
WPF contiene muchos objetos con la propiedad Animación. Controles como Button y
TabControl heredan propiedades desde DependencyObject. La mayoría de sus
propiedades son propiedades de dependencia.
Todos los objetos tienen propiedades que pueden modificarse para poder animarlos,
pero tendremos que, además de cambiar su propiedad, utilizar un tipo de “Animation”
apropiado.
Propiedad: Color – Animation: ColorAnimation.
Propiedad: Point – Animation: PointAnimation (cambia la posición de un elemento
Geometry).
Página 42 de 55
Windows Presentation Fundation
Podemos asignar tres tipos de valores a TargetProperty según el caso. Éstos son:
• 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 animación se encarga de
hacer la transición 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 animación tomará el valor base de la propiedad del
objeto.
• Offset Value
Propiedades
Duration. Determina cuánto va a durar nuestra animación.
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 parámetro un Double, usamos una animación que produce
valores del tipo Double. Para animar una propiedad que toma como parámetro un valor
del tipo Point, usamos una animación que produce valores del tipo Point.
Página 43 de 55
Windows Presentation Fundation
Ejemplo Animación
<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>
Para finalizar, le pasamos los valores por modificar. Si se fijan en el ejemplo, verán que
esto lo hacemos con From y To; luego le pasamos el tiempo que queremos que dure la
animación, que está representado con el formato de “day:hour:second”. También
habilitamos las opciones de AutoReverse y repetición continua, y podemos configurar
la aceleración o desaceleración.
Página 44 de 55
Windows Presentation Fundation
Estilos
Introduccion
Permiten diseñar una aplicación, documento o interfaz de usuario de forma estándar
para un determinado producto.
Los estilos son recursos, y obedecen a las mismas reglas de alcance que se aplican a
todos los recursos.
Los estilos permiten diseñar una aplicación, documento o interfaz de usuario de forma
estándar para un determinado producto. El diseñador 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 separación entre la lógica y la interfaz significa que los diseñadores pueden diseñar
las pantallas de una aplicación al mismo tiempo que los desarrolladores escriben la
lógica de esa aplicación.
Declaracion
La forma más común de declarar un estilo es a través de XAML.
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 cómo 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}" />
Página 45 de 55
Windows Presentation Fundation
TargetType
Podemos aplicar estilos a todos los elementos de un tipo usando la propiedad
TargetType y la llave x:Type.
Extendiendo estilos
Los estilos de Windows Presentation Foundation pueden ser extendidos o
heredados.
<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>
Página 46 de 55
Windows Presentation Fundation
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.
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.
Página 47 de 55
Windows Presentation Fundation
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="#EEEEEE" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasItems" Value="false" />
<Condition Property="Width" Value="Auto" />
</MultiTrigger.Conditions>
<Setter Property="MinWidth" Value="120"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasItems" Value="false" />
<Condition Property="Height" Value="Auto" />
</MultiTrigger.Conditions>
<Setter Property="MinHeight" Value="95"/>
</MultiTrigger>
</Style.Triggers>
Página 48 de 55
Windows Presentation Fundation
Tipos de aplicaciones
Aplicaciones de navegador XAML
No están 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 aplicación es similar a las aplicaciones instaladas en términos de dónde
corre y seguridad. Pero, en realidad, es una colección de componentes empaquetados en
una DLL para el uso de aplicaciones después de que el usuario haya ejecutado la
aplicación. Como ésta no tiene una IU para el usuario, no utiliza XAML.
Aplicaciones instaladas
Estas aplicaciones están 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.
Página 49 de 55
Windows Presentation Fundation
Además, pueden ejecutarse tanto en un navegador como en una ventana. De hecho, una
aplicación de escritorio soporta la mayoría de las características tradicionalmente
asociadas a una aplicación Web, incluidas las siguientes:
Window
Estas aplicaciones siguen un modelo similar a las aplicaciones Windows Forms. Una
aplicación Window puede mostrar pop-ups. Es muy habitual que estas aplicaciones
tengan asociado Procedural Code para responderle al usuario.
Document
Las aplicaciones Document, por otra parte, no tienen Procedural Code asociado. En vez
de eso, constituyen simplemente presentación de información para el usuario, de la
misma manera que las presentaciones PDF.
Página 50 de 55
Windows Presentation Fundation
Aplicaciones Web
Son más simples y mucho más poderosas que DHTML.
El modelo WPF permite implementar una aplicación de forma similar a las aplicaciones
Web. Esto simplifica la migración de desarrolladores Web, pues el código es similar al
de las páginas HTML dinámicas (DHTML). Etiquetas y lógica de la aplicación
coexisten en un mismo archivo; los archivos son desplegados desde un servidor Web, y
las páginas de la aplicación se muestran en un navegador.
Sin embargo, el modelo objeto de una aplicación WPF orientada a la Web es más
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 contarán
con ricos controles, soporte multimedia avanzado, gráficos y manejo local de eventos.
Básicamente, lo que cualquier aplicación cliente ofrece. De hecho, las principales
diferencias entre una aplicación Web WPF y una aplicación de escritorio no son otras
que el alojamiento de los archivos (servidor o máquina cliente) y que, en el primer caso,
algunos permisos de la aplicación estarán restringidos.
En muchos casos, para las campañas de marketing puede resultar útil crear una
experiencia más atractiva para los usuarios de Windows, mediante la creación 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 máxima calidad al
tiempo que ofrecen las herramientas para crear la lógica de la aplicación necesaria. El
lenguaje XAML flexible y la integración total con el explorador proporcionan métodos
eficaces para migrar los sitios existentes. Las WBA cuentan con un historial de
implementación intachable y un recinto de seguridad, lo cual las convierte en una
opción de tecnología Web de gran eficacia.
Página 51 de 55
Windows Presentation Fundation
En la primera forma, usamos el archivo XAML para definir la IU. Se puede adherir un
archivo code-behind con las clases y los métodos para manejar los eventos de la página.
Ésta es una parte de un código 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();
Página 52 de 55
Windows Presentation Fundation
Nuevos efectos en las imágenes, como aspecto borroso, sombras, corrección del
color y filtros.
Distorsione imágenes usando Warp Mesh, la cual puede ser combinada con Live
Effects y otras propiedades mientras se mantiene la fuente de píxeles para edición.
Trabaje con la paleta de Effect Lines para crear grupos controlados de movimientos
con parámetros seleccionados al azar.
Agregue profundidad y texturas a objetos con bordes resaltados o suaves, y cree una
apariencia única con rellenos personalizados, movimientos y texturas de fondo.
Convierta objetos de tipo vectores a capas de píxeles para que puedan ser
modificadas con herramientas de las imágenes de píxeles.
Cree efectos de giro interactivos y exporte imágenes optimizadas junto con código
HTML y JavaScript para edición futura en diseño Web y herramientas de desarrollo
como Visual Studio y FrontPage.
Página 53 de 55
Windows Presentation Fundation
Mejore el diseño inicial empezando con los templates profesionales llenos que utilizan
CSS y XHTML.
Conozca y configure todas las propiedades del tag HTML seleccionado. Se tiene un
acceso total al poder de HTML a través de una sola paleta.
Presentación de información
Diseñe vistas personalizadas de información XML usando “drag and drop” para
alcanzar rápidamente visualizaciones que se adaptan a los CSS del diseño del sitio.
Consuma servicios RSS para su sitio, y haga que tengan los mismos estilos de su sitio.
Tecnología de servidor
Utilice todas las ventajas de ASP.NET 2.0 con el soporte integrado del servidor y los
controles de usuario. Cree sitios dinámicos e interactivos. Use la caja de herramientas
de controles y la tabla de propiedades para poder insertar y configurar rápidamente los
controles ASP.NET.
Puede mantener la vista de su sitio de forma correcta con el uso de Master Pages;
ahorrará tiempo en el diseño del sitio, y podrá acceder a él rápidamente 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.
Página 54 de 55
Windows Presentation Fundation
Es posible importar y combinar los dos tipos de imágenes que se manejan (vectores
y bitmap), o dibujar y editar vectores, y aplicar gradientes avanzadas, transparencias
y bordes personalizados.
Página 55 de 55