Manual wpf

Programación en .Net
(Avanzado)
WPF

2
MARÍA TERESA CRESPI NOIR
PROGRAMACIÓN EN .NET
(AVANZADO) - MANUAL
WPF
Buffa Sistemas S.R.L
2010
Buenos Aires

3
Programación en .Net (Avanzado) - Manual WPF
Crespi Noir, María Teresa
1a Edición
Buffa Sistemas SRL
Alsina 655 4° Piso
Buenos Aires
ISBN Nº 978-987-25214-2-4
Multigraphic
Avenida Belgrano 520 – Capital Federal
10 de agosto de 2010
Crespi Noir, María Teresa
Programación en .Net (Avanzado) - Manual WPF
Buenos Aires : Buffa Sistemas S.R.L., 2010.
307 p. ; 21 x 29,7 cm.
ISBN 978-987-25214-2-4
(c), 2010 Buffa Sistemas SRL
Queda hecho el depósito que establece la Ley 11.723.
Libro de edición Argentina
No se permite la reproducción parcial o total, el almacenamiento, el alquiler, la
transmisión o la transformación de este libro, en cualquier forma o por cualquier
medio, sea electrónico o mecánico, mediante fotocopias, digitalización u otros
métodos, sin el permiso previo y escrito del editor.Su infracción está penada
por las leyes 11723 y 25446.-

4
Windows
Presentation
Foundation
(WPF)

5
NOTA: El material incluido en el presente puede contener datos y ejemplos extraídos de sitios
web públicos sin restricción de acceso. Los mismos son utilizados solamente a fines didácticos
y pueden encontrarse en el final de la publicación agrupados bajo el título Links Relacionados.

6
MÓDULO 1 : INTRODUCCIÓN A WPF ..................................................................................... 12
1- Introducción........................................................................................................................... 13
Definición ................................................................................................................................ 13
Programar con WPF ............................................................................................................... 13
Código de lenguaje marcado y código subyacente................................................................ 13
XAML ...................................................................................................................................... 13
Código Subyacente................................................................................................................. 14
Aplicaciones WPF................................................................................................................... 15
Seguridad................................................................................................................................ 15
2- Conceptos Básicos............................................................................................................... 15
Controles................................................................................................................................. 15
Diseño ..................................................................................................................................... 15
Enlace de Datos...................................................................................................................... 16
Gráficos................................................................................................................................... 16
Formas 2D .............................................................................................................................. 17
Geometrías 2D........................................................................................................................ 17
Efectos 2D............................................................................................................................... 17
Representaciones 3D.............................................................................................................. 17
Animaciones............................................................................................................................ 17
Multimedia............................................................................................................................... 17
Texto y Tipografía ................................................................................................................... 18
Documentos............................................................................................................................ 18
Anotaciones ............................................................................................................................ 18
Empaquetado.......................................................................................................................... 18
Impresión ................................................................................................................................ 18
Personalización....................................................................................................................... 19
3- Eventos y Comandos............................................................................................................ 20
Información general sobre Eventos Enrutados....................................................................... 20
Árboles de elementos WPF .................................................................................................... 21
Enrutamiento de eventos ........................................................................................................ 22
Eventos enrutados y composición .......................................................................................... 22
Eventos adjuntos..................................................................................................................... 23
Información general sobre Comandos enrutados................................................................... 23
Enrutamiento de comandos .................................................................................................... 25
Definición de comandos.......................................................................................................... 25
Desafíos de los comandos enrutados..................................................................................... 25
MÓDULO 2: CREANDO APLICACIONES WPF........................................................................ 26
1- Crear una aplicación WFP.................................................................................................... 27
Aplicación WPF....................................................................................................................... 27
Clase Window ......................................................................................................................... 28
Configurar la ventana de inicio ............................................................................................... 28
Propiedades de la Clase Window........................................................................................... 29
Controles WPF y su equivalente con Controles Windows Forms .......................................... 29
Controladores de Eventos ...................................................................................................... 31
Recursos ................................................................................................................................. 32
Recursos Estáticos y Dinámicos............................................................................................. 32

7
2- Controles de Diseño ............................................................................................................. 33
Sistema de Diseño de Interfase de Usuario ........................................................................... 33
Border ..................................................................................................................................... 34
Canvas .................................................................................................................................... 34
DockPanel............................................................................................................................... 35
Grid.......................................................................................................................................... 36
StackPanel.............................................................................................................................. 37
GroupBox ................................................................................................................................ 37
Expander................................................................................................................................. 38
InkCanvas ............................................................................................................................... 38
Menu ....................................................................................................................................... 39
Frame...................................................................................................................................... 39
WrapPanel .............................................................................................................................. 40
3- Otros Controles..................................................................................................................... 41
Label - AccessText.................................................................................................................. 41
TextBox................................................................................................................................... 41
TextBlock ................................................................................................................................ 41
Button...................................................................................................................................... 41
ListBox - ComboBox ............................................................................................................... 42
CheckBox................................................................................................................................ 43
RadioButton ............................................................................................................................ 43
Otros Controles....................................................................................................................... 44
4- Información General de Controles ...................................................................................... 45
Propiedades Generales de los Controles ............................................................................... 45
Creación dinámica de controles.............................................................................................. 45
MÓDULO 3: PERSONALIZANDO LA APARIENCIA DE APLICACIONES WPF .................... 47
1- Personalizar Apariencia ....................................................................................................... 48
Composición ........................................................................................................................... 48
Estilos...................................................................................................................................... 48
Plantillas.................................................................................................................................. 50
Desencadenadores (Triggers) ................................................................................................ 52
2- Crear Controles de Usuario ................................................................................................. 54
Controles................................................................................................................................. 54
Controles de Usuario .............................................................................................................. 54
Personalizando Controles de Usuario .................................................................................... 56
Controles Personalizados ....................................................................................................... 57
MÓDULO 4: ENLACE A DATOS ............................................................................................... 58
1- Enlazar Datos......................................................................................................................... 59
Enlace a Datos........................................................................................................................ 59
Clase Binding......................................................................................................................... 59
Modos de Enlazar – Propiedad Mode..................................................................................... 59
Momento del Enlace ............................................................................................................... 60
Propiedad Asociadas al Enlace de Datos............................................................................... 61
Enlace entre Controles ........................................................................................................... 62
XmlDataProvider..................................................................................................................... 63
ObjectDataProvider................................................................................................................. 64

8
MethodParameters.................................................................................................................. 65
DataTemplate.......................................................................................................................... 67
DataContext ............................................................................................................................ 68
Controles ListView - Gridview................................................................................................. 69
2- Notificaciones de Cambio de Propiedad ............................................................................ 70
Interfase INotifyPropertyChanged........................................................................................... 70
3- Convertir Datos ..................................................................................................................... 74
ValueConverters ..................................................................................................................... 74
Interfase IValueConverter ....................................................................................................... 74
4- Validar Datos ......................................................................................................................... 76
ValidationRules ....................................................................................................................... 76
Clase Binding.ValidationRule.................................................................................................. 77
IDataErrorInfo.......................................................................................................................... 79
ExceptionValidationRule ......................................................................................................... 81
DataErrorValidationRule ......................................................................................................... 81
MÓDULO 5: ENLACE A COLECCIONES ................................................................................. 82
1- Enlace a Colecciones ........................................................................................................... 83
Enlace a Colecciones.............................................................................................................. 83
Cómo implementar colecciones.............................................................................................. 83
2- Vistas de Colecciones .......................................................................................................... 86
Vistas de colecciones.............................................................................................................. 86
Cómo crear una vista.............................................................................................................. 86
Ordenar ................................................................................................................................... 86
Agrupar ................................................................................................................................... 87
Filtrar ....................................................................................................................................... 89
Punteros de elemento actual .................................................................................................. 91
Navegación de Colecciones ................................................................................................... 91
MÓDULO 6: ADMINISTRAR DOCUMENTOS........................................................................... 93
1- Documentos........................................................................................................................... 94
Definición ................................................................................................................................ 94
Tipos de documentos.............................................................................................................. 94
2- Documentos Dinámicos (FlowDocuments)........................................................................ 94
Definición ................................................................................................................................ 94
Contenedores para Documentos Dinámicos .......................................................................... 95
FlowDocumentScrollViewer .................................................................................................... 95
FlowDocumentPageViewer..................................................................................................... 95
FlowDocumentReader ............................................................................................................ 96
Formateando Documentos Dinámicos.................................................................................... 96
Elementos en Bloque.............................................................................................................. 96
List........................................................................................................................................... 97
Tabla ....................................................................................................................................... 98
Section .................................................................................................................................... 99
BlockUIContainer .................................................................................................................... 99
Elementos en Línea (Contenido dinámico)........................................................................... 100

9
3- Documentos Fijos ............................................................................................................... 101
Definición .............................................................................................................................. 101
PageContent ......................................................................................................................... 101
FixedPage ............................................................................................................................. 101
DocumentViewer................................................................................................................... 102
4- Empaquetado e Impresión de Documentos ..................................................................... 104
Empaquetado........................................................................................................................ 104
Empaquetar componentes.................................................................................................... 105
Documentos XPS (XPSDocument)....................................................................................... 105
XpsDocumentWriter.............................................................................................................. 105
Impresión de Documentos .................................................................................................... 106
MÓDULO 7: GRÁFICOS, ANIMACIONES Y MULTIMEDIA ................................................... 107
1- Gráficos 2D .......................................................................................................................... 108
Dibujos y formas ................................................................................................................... 108
Shape.................................................................................................................................... 108
Propiedades de las formas ................................................................................................... 108
Drawing ................................................................................................................................. 109
Propiedad Clip....................................................................................................................... 110
Brush..................................................................................................................................... 110
2- Imágenes.............................................................................................................................. 112
Imágenes .............................................................................................................................. 112
Control Image........................................................................................................................ 112
Girar, Convertir y Recortar Imágenes................................................................................... 113
Expandir imágenes ............................................................................................................... 114
Pintar con imágenes ............................................................................................................. 115
3- Gráficos 3D .......................................................................................................................... 115
Viewport3D............................................................................................................................ 115
Espacio de coordenadas 3D................................................................................................. 116
Cámaras y proyecciones ...................................................................................................... 116
Elementos primitivos de modelo y malla............................................................................... 117
Materiales del Modelo........................................................................................................... 118
Iluminar la escena................................................................................................................. 118
Transformar modelos............................................................................................................ 120
Animar modelos .................................................................................................................... 120
Transformaciones de Traslación........................................................................................... 121
Transformaciones de Escala ................................................................................................ 123
Transformaciones de Giro .................................................................................................... 125
4- Multimedia............................................................................................................................ 127
Media API.............................................................................................................................. 127
Modos Media Playback......................................................................................................... 127
SoundPlayer.......................................................................................................................... 128
MÓDULO 8: CONFIGURACIÓN Y DISTRIBUCIÓN................................................................ 129
1- Configuración...................................................................................................................... 130
Configurar Aplicaciones ........................................................................................................ 130
App.config ............................................................................................................................. 130

10
Recuperando información de app.config .............................................................................. 132
Almacenar información en app.config en run-time .............................................................. 132
2- Distribución de Aplicaciones WPF.................................................................................... 132
XCopy ................................................................................................................................... 132
Microsoft Windows Installer .................................................................................................. 132
ClickOnce.............................................................................................................................. 133
Publicación ClickOnce .......................................................................................................... 133
Como Publicar....................................................................................................................... 134
Comparación entre ClickOnce y Microsoft Windows Installer .............................................. 135
Links Relacionados................................................................................................................. 137

11
Audiencia
Este curso está orientado a aquellos profesionales o estudiantes que quieran adquirir los
conocimientos y habilidades necesarias para desarrollarse como proveedor de software
independiente. Así mismo desarrolladores .NET (C#) que quieran incursionar en las nuevas
tecnologías de .NET.
Pre-requisitos
Desarrolladores en Programación .NET (C #) o bien personas que hayan aprobado el curso
de MS Net Junior (160 hs)
Duración
El curso tiene una duración de 28 horas reloj con una carga horaria no superior a 12 horas
semanales.
Al Finalizar el curso
Después de completar este curso los alumnos serán capaces de:
 Construir un interfase de usuario en una aplicación WPF
 Personalizar la apariencia de una aplicación WPF
 Crear controles de usuario en una aplicación WPF
 Enlazar controles a fuentes de datos
 Enlazar controles a colecciones
 Manejar documentos en aplicaciones WPF
 Trabajar con gráficos y multimedia en aplicaciones WPF
 Configurar e instalar aplicaciones WPF

12
Módulo 1
Introducción a WPF

13
1- Introducción
Definición
Windows Presentation Foundation (WPF) es un sistema de presentación para crear
aplicaciones cliente de Windows que proporcionen una experiencia impactante para el usuario
desde el punto de vista visual. Con WPF, puede crear una amplia gama de aplicaciones
independientes y hospedadas en explorador.
El núcleo de WPF es un motor de representación independiente de la resolución y basado en
vectores construido para aprovechar al máximo el hardware de gráficos moderno. WPF amplía
el núcleo con un completo conjunto de características de programación de aplicaciones, entre
las que se incluyen Lenguaje de marcado de aplicaciones extensible (XAML), controles, enlace
de datos, diseño, gráficos 2D y 3D, animación, estilos, plantillas, documentos, multimedia, texto
y tipografía. WPF se incluye en Microsoft .NET Framework, lo que permite crear aplicaciones
que incorporen otros elementos de la biblioteca de clases de .NET Framework.
Programar con WPF
WPF constituye un subconjunto de tipos de .NET Framework, en su mayoría ubicados en el
espacio de nombres de System.Windows. Si ha creado previamente aplicaciones con .NET
Framework mediante tecnologías administradas como ASP.NET y formularios Windows Forms,
los conceptos fundamentales de la programación en WPF deberán resultarle familiares; creará
instancias de clases, definirá propiedades, llamará a métodos y controlará eventos con el
lenguaje de programación de .NET Framework que prefiera, como C# o Visual Basic.
Para admitir algunas de las funciones de WPF más eficaces y simplificar la experiencia de
programación, WPF incluye construcciones de programación adicionales que mejoran las
propiedades y los eventos
Código de lenguaje marcado y código subyacente
WPF proporciona mejoras de programación adicionales para el desarrollo de aplicaciones
cliente de Windows. Una mejora evidente es la capacidad para programar una aplicación
mediante código de lenguaje marcado y subyacente, una experiencia con la que resultará
familiar a los programadores de ASP.NET. En general, se utiliza el lenguaje marcado Lenguaje
de marcado de aplicaciones extensible (XAML) para implementar la apariencia de una
aplicación, y los lenguajes de programación administrados (c#, visual Basic, etc.) para
implementar su comportamiento. Esta separación entre la apariencia y el comportamiento
aporta las ventajas siguientes:
 Se reducen los costos de programación y mantenimiento, al no estar el marcado
específico de la apariencia estrechamente relacionado con el código específico del
comportamiento.
 La programación es más eficaz porque los diseñadores pueden implementar la
apariencia de una aplicación al mismo tiempo que los programadores implementan su
comportamiento.
 Se pueden utilizar varias herramientas de diseño para implementar y compartir el
lenguaje marcado XAML, a fin de responder a los requisitos de los colaboradores de
programación de aplicaciones. Microsoft Expression Blend proporciona una experiencia
apropiada para los diseñadores, mientras que Visual Studio 2008 está dirigido a los
programadores.
 La globalización y localización de las aplicaciones WPF se ha simplificado en gran
medida.
XAML
XAML es un lenguaje de marcado basado en XML que se utiliza para implementar la apariencia
de una aplicación mediante declaración. Se suele utilizar para crear ventanas, cuadros de

14
diálogo, páginas y controles de usuario, así como para rellenarlos con controles, formas y
gráficos.
Ejemplo:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="Ventana con un Botón"
Width="250" Height="100">
<Button Name="button">Presionar</Button>
</Window>
El código XAML define una ventana y un botón mediante los elementos Window y Button,
respectivamente. Cada elemento se configura con atributos o propiedades, como el atributo
Title del elemento Window, para especificar el texto de la barra de título de la ventana. En
tiempo de ejecución, WPF convierte los elementos y los atributos definidos en el marcado en
instancias de clases de WPF.
Puesto que XAML se basa en XML, la interfaz de usuario que se crea con este lenguaje se
ensambla en una jerarquía de elementos anidados que se denomina árbol de elementos. El
árbol de elementos proporciona una manera lógica e intuitiva de crear y administrar las
interfases de usuario.
Código Subyacente
El comportamiento principal de una aplicación es implementar la funcionalidad que responde a
las interacciones con el usuario, lo que incluye controlar los eventos (por ejemplo, hacer clic en
un menú, una barra de herramientas o un botón) y llamar, en respuesta, a la lógica de negocios
y de acceso a los datos. En WPF, este comportamiento se suele implementar en código
asociado al marcado. Este tipo de código se denomina subyacente.
En el ejemplo siguiente se muestran el código subyacente y el marcado actualizado del
ejemplo anterior.
<Window
Title="Ventana con un Botón"
Width="250" Height="100">
<Button Name="button" Click=”button_Click”>Presionar</Button>
</Window>
Código subyacente:
using System.Windows;
namespace EjemploWFP
{
public partial class miEjemplo : Window
{
public void button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Probando Windows Presentation Foundation!");
}
}
}

15
Aplicaciones WPF
Microsoft .NET Framework, System.Windows, así como el código de lenguaje marcado y
subyacente, constituyen la base de la experiencia de programación de aplicaciones en WPF.
Además, WPF cuenta con características completas para crear experiencias de usuario con
contenido enriquecido. Para empaquetar este contenido y distribuirlo a los usuarios en forma
de aplicaciones, WPF proporciona tipos y servicios denominados colectivamente el modelo de
aplicación. El modelo de aplicación admite la programación de aplicaciones independientes y
hospedadas en explorador.
 Aplicaciones independientes: Para las aplicaciones independientes, puede utilizar la
clase Window para crear las ventanas y cuadros de diálogo a los que se tiene acceso
desde las barras de menús y las barras de herramientas.
 Aplicaciones hospedadas en explorador: También denominadas Aplicaciones del
explorador XAML (XBAPs – XAML Browsers Applications, generan archivos con
extensión xbap), puede crear páginas (Page) y funciones de página (PageFunction<T>)
entre las que se puede navegar mediante hipervínculos (clases Hyperlink). Estas
aplicaciones pueden hospedarse en Internet Explorer a partir de la versión 6.
Seguridad
Dado que las XBAPs se hospedan en un explorador, la seguridad es importante. En particular,
las XBAPs utilizan un recinto de seguridad de confianza parcial para aplicar restricciones
menores o iguales a las que se imponen a las aplicaciones basadas en HTML. Aún así, la
mayoría de las características de WPF se pueden ejecutar con seguridad desde las XBAPs.
2- Conceptos Básicos
Controles
En WPF, un control es un término general que se aplica a una categoría de clases de WPF
hospedadas en una ventana o una página, tienen una interfaz de usuario (UI) e implementa un
comportamiento determinado.
Los controles casi siempre detectan las acciones del usuario y responden a ellas. El sistema de
entrada de WPF utiliza eventos directos y enrutados para admitir entradas de texto, la
administración del enfoque y la posición del mouse.
A continuación se muestra la lista de controles de WPF integrados.
 Botones: Button y RepeatButton.
 Cuadros de diálogo: OpenFileDialog, PrintDialog y SaveFileDialog.
 Entradas manuscritas digitales: InkCanvas y InkPresenter.
 Documentos: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader,
FlowDocumentScrollViewer y StickyNoteControl.
 Entrada: TextBox, RichTextBox y PasswordBox.
 Diseño: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView,
GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer,
StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window y WrapPanel.
 Multimedia: Image, MediaElement y SoundPlayerAction.
 Menús: ContextMenu, Menu y ToolBar.
 Navegación: Frame, Hyperlink, Page, NavigationWindow y TabControl.
 Selección: CheckBox, ComboBox, ListBox, TreeView y RadioButton, Slider.
 Información para el usuario: AccessText, Label, Popup, ProgressBar, StatusBar,
TextBlock y ToolTip.
Diseño

16
Al crear una interfaz de usuario, se organizan los controles según su ubicación y tamaño para
crear un diseño. Un requisito fundamental de cualquier diseño es adaptarse a los cambios de
tamaño de la ventana y de configuración de pantalla. En lugar de obligarle a escribir código que
adapte el diseño en estas circunstancias, WPF le proporciona un sistema de diseño extensible
de primera clase.
La base del sistema de diseño es la situación relativa, que aumenta la capacidad de adaptación
a los cambios en la configuración de las ventanas y de la pantalla. Además, el sistema de
diseño administra la negociación entre los controles para determinar el diseño. La negociación
es un proceso de dos pasos: en primer lugar, el control indica a su elemento primario qué
ubicación y tamaño necesita; en segundo lugar, el elemento primario indica al control de qué
espacio dispone.
El sistema de diseño se expone a los controles secundarios mediante las clases base de WPF.
Para los diseños comunes, como son las cuadrículas, el apilamiento y el acoplamiento, WPF
incluye varios controles de diseño:
 Canvas: los controles secundarios proporcionan su propio diseño.
 DockPanel: los controles secundarios se alinean con los bordes del panel.
 Grid: los controles secundarios se sitúan por filas y columnas.
 StackPanel: los controles secundarios se apilan vertical u horizontalmente.
 VirtualizingStackPanel: los controles secundarios se organizan en una vista "virtual" de
una sola línea en sentido horizontal o vertical.
 WrapPanel: los controles secundarios se sitúan por orden de izquierda a derecha y se
ajustan a la línea siguiente cuando hay más controles de los que caben en la línea
actual.
Enlace de Datos
La mayoría de las aplicaciones se crean para proporcionar recursos a los usuarios que les
permitan ver y editar los datos. Para aplicaciones WPF, el trabajo de almacenar los datos y
tener acceso a ellos se proporciona mediante tecnologías existentes, como Microsoft SQL
Server y ADO.NET. Para simplificar la programación de aplicaciones, WPF proporciona un
motor de enlace de datos que realiza estos pasos automáticamente. La unidad que constituye
el núcleo del motor de enlace de datos es la clase Binding, encargada de enlazar un control (el
destino del enlace) a un objeto de datos (el origen del enlace).
El motor de enlace de datos de WPF proporciona compatibilidad adicional que incluye
validación, ordenación, filtrado y agrupación. Además, el enlace de datos admite el uso de
plantillas de datos, a fin de crear una interfaz de usuario personalizada para los datos
enlazados cuando la interfaz de usuario mostrada por los controles estándar de WPF no es
adecuada.
Gráficos
WPF presenta un conjunto extenso, escalable y flexible de características de gráficos que
aportan las ventajas siguientes:
 Gráficos independientes de la resolución e independientes del dispositivo. La unidad de
medida básica del sistema de gráficos de WPF es el píxel independiente del
dispositivo, que es 1/96 de pulgada, independientemente de la resolución de pantalla
real, y que proporciona la base para la representación independiente de la resolución y
del dispositivo. Cada píxel independiente del dispositivo se escala automáticamente
para coincidir con el valor de puntos por pulgada (ppp) del sistema en que se
representa.
 Precisión mejorada. El sistema de coordenadas de WPF se mide con números de
punto flotante de precisión doble, en lugar de precisión simple. Las transformaciones y
los valores de opacidad también se expresan como doble precisión. WPF admite

17
también una amplia gama de colores (scRGB) y proporciona compatibilidad integrada
para administrar las entradas desde espacios de color diferentes.
 Compatibilidad con gráficos avanzados y animación. WPF simplifica la programación
de gráficos administrando automáticamente las escenas de animación.
 Aceleración de hardware. El sistema de gráficos de WPF saca partido del hardware de
gráficos para minimizar el uso de CPU.
Formas 2D
WPF proporciona una biblioteca de formas 2D comunes dibujadas mediante vectores. Una
función interesante de las formas es que no sirven únicamente para su presentación; las
formas implementan muchas de las características que cabe esperar de los controles, incluida
la entrada de datos desde el teclado y el Mouse.
Geometrías 2D
Las formas 2D proporcionadas por WPF abarcan el conjunto estándar de formas básicas. Sin
embargo, puede que sea preciso crear formas personalizadas para facilitar el diseño de una
interfaz de usuario personalizada. Para este fin, WPF proporciona las geometrías. Estas
permiten dibujar directamente, utilizar como un pincel o utilizar para recortar otras formas y
controles.
Los objetos Path se pueden utilizar para dibujar formas cerradas o abiertas, varias formas o
incluso formas curvas.
Los objetos Geometry se pueden utilizar para el recorte, la comprobación de visitas y la
representación de datos de gráficos 2D.
Efectos 2D
Un subconjunto de las funciones 2D de WPF son los efectos visuales, tales como degradados,
mapas de bits, dibujos, pintar con vídeos, rotación, ajuste de escala y sesgo. Todas ellas se
aplican mediante pinceles.
Representaciones 3D
WPF también incluye funciones de representación 3D que se integran con los gráficos 2D para
permitir la creación de interfases de usuarios más importantes.
Animaciones
La compatibilidad de WPF con la animación permite hacer que los controles crezcan, tiemblen,
giren o se desvanezcan, crear transiciones de página interesante, y mucho más. Puede animar
la mayoría de las clases de WPF, incluso las personalizadas.
Multimedia
Una manera de mostrar un contenido enriquecido es utilizar medios audiovisuales (multimedia).
WPF proporciona compatibilidad especial con imágenes, vídeo y audio.
 Imágenes: Las imágenes están presentes en la mayoría de las aplicaciones y WPF
proporciona varias maneras de utilizarlas.
 Video y Audio: El control MediaElement es capaz de reproducir vídeo y audio y
presenta la flexibilidad suficiente para constituir la base de un reproductor multimedia
personalizado. El marcado XAML siguiente implementa un reproductor multimedia.

18
Texto y Tipografía
Para facilitar una representación de texto de gran calidad, WPF ofrece las características
siguientes:
 Compatibilidad con fuentes OpenType.
 Mejoras de ClearType.
 Alto rendimiento que saca partido de la aceleración de hardware.
 Integración de texto con multimedia, gráficos y animación.
 Compatibilidad con fuentes internacionales y mecanismos de reserva.
Documentos
WPF permite trabajar de forma nativa con tres tipos de documentos: documentos dinámicos,
documentos fijos y documentos de XML Paper Specification (XPS). WPF proporciona también
servicios para crear, ver, administrar, anotar, empaquetar e imprimir documentos.
 Documentos dinámicos: Los documentos dinámicos se han diseñado para optimizar su
presentación y legibilidad ajustando dinámicamente su contenido y modificando su flujo
cuando se producen cambios en el tamaño de la ventana y la configuración de pantalla.
 Documentos Fijos: Los documentos fijos están destinados a aplicaciones que requieren
una presentación con representación fiel (lo que se ve es lo que se obtiene, o
WYSIWYG, en sus siglas en inglés) precisa, especialmente por lo que respecta a su
impresión. Los usos típicos para los documentos fijos incluyen la creación de
publicaciones, el procesamiento de textos y el diseño de formularios, donde es vital que
se respete el diseño de página original. Los documentos fijos conservan la
organización precisa de su contenido de una manera independiente del dispositivo. El
diseño permanece inalterado en todos los casos, aunque la calidad del documento
varía según las funciones de cada dispositivo.
 Documentos XPS: Los documentos de XML Paper Specification (XPS) se basan en
documentos fijos de WPF. Los documentos de XPS se describen con un esquema
basado en XML que básicamente es una representación en forma de página de
documentos electrónicos. XPS es un formato de documento abierto habilitado para
varios exploradores y diseñado para facilitar la creación, el uso compartido, la
impresión y el almacenamiento de documentos paginados.
Anotaciones
Las anotaciones son notas o comentarios que se agregan a los documentos para marcar la
información o resaltar elementos de interés, a fin de consultarlos más adelante. Aunque escribir
notas en documentos impresos es fácil, la posibilidad de "escribir" notas en los documentos
electrónicos con frecuencia es limitada o no está disponible en absoluto. Sin embargo, en WPF
se proporciona un sistema de anotaciones que admite la inserción de notas rápidas y el
resaltado.
Empaquetado
Las APISystem.IO.Packaging de WPF permiten que las aplicaciones organicen los datos, el
contenido y los recursos en un único documento ZIP portátil, sencillo de distribuir y de fácil
acceso. Es posible incluir firmas digitales para autenticar los elementos contenidos en un
paquete y comprobar que el elemento firmado no se haya manipulado ni modificado. También
puede cifrar los paquetes mediante la administración de derechos para restringir el acceso a la
información protegida.
Impresión

19
Microsoft .NET Framework incluye un subsistema de impresión al que WPF aporta, además,
compatibilidad con el control de sistemas de impresión mejorados. Las mejoras de impresión
incluyen las siguientes:
 Instalación en tiempo real de servidores de impresión y colas remotos.
 Detección dinámica de funciones de impresora.
 Configuración dinámica de opciones de impresión.
 Modificación del enrutamiento y las prioridades de los trabajos de impresión.
Los documentos XPS presenta, además, una mejora fundamental del rendimiento. La ruta de
acceso de Interfaz de dispositivo gráfico de Microsoft Windows (GDI) de impresión suele
requerir dos conversiones:
 La primera conversión del documento a un formato de procesador de impresión, como
Metarchivo mejorado (EMF).
 Una segunda conversión al lenguaje de descripción de páginas de la impresora, como
PCL o PostScript.
Sin embargo, los documentos XPS evitan estas conversiones porque un componente del
formato de archivo XPS es un lenguaje de procesador de impresión y un lenguaje de
descripción de páginas. Esta compatibilidad ayuda a reducir el tamaño del archivo de cola y las
cargas de las impresoras integradas en red.
Personalización
Para simplificar la organización de los controles en una interfase de usuario y asegurarse de
que la organización se conserve aunque se modifiquen el tamaño de la ventana y la
configuración de pantalla, se utiliza el sistema de diseño de WPF. Dado que la mayoría de las
aplicaciones permiten a los usuarios interactuar con los datos, los enlaces de datos se utilizan
para reducir el trabajo de integración de la interfaz de usuario con esos datos. A fin de mejorar
la apariencia visual de la aplicación, se utiliza toda la gama de gráficos, animación y multimedia
que WPF proporciona. Por último, si la aplicación funciona a través de texto y documentos,
puede utilizar las funciones de tipografía, documentos, anotación, empaquetado e impresión de
WPF.
Sin embargo, con frecuencia estos elementos fundamentales no bastan para crear y
administrar una experiencia del usuario realmente diferenciada y visualmente impactante.
Puede que los controles de WPF no se integren con la apariencia deseada de la aplicación. Es
posible que los datos no se muestren del modo más eficaz. La apariencia y el funcionamiento
predeterminados de los temas de Windows pueden no ser adecuados para proporcionar la
experiencia global del usuario con respecto a la aplicación. En muchos aspectos, una
tecnología de presentación requiere la extensibilidad visual tanto como cualquier otro tipo de
extensibilidad.
Por esta razón, WPF proporciona gran variedad de mecanismos para la creación de
experiencias de usuario únicas, incluido un modelo de contenido enriquecido para los
controles, estilos, desencadenadores, plantillas de controles y datos, estilos, recursos de la
interfaz de usuario, temas y máscaras.
 Modelo de Contenido: El propósito principal de la mayoría de los controles de WPF es
mostrar contenido. En WPF, el tipo y número de elementos que pueden constituir el
contenido de un control se denomina el modelo de contenido del control. Algunos
controles pueden contener un solo elemento y tipo de contenido; por ejemplo, el
contenido de un control TextBox es un valor de tipo String que está asignado a la
propiedad Text. Otros controles, sin embargo, pueden contener varios elementos con
tipos diferentes de contenido; el contenido de un control Button, especificado por la
propiedad Content, puede contener gran variedad de elementos, entre los que se
incluyen controles de diseño, texto, imágenes y formas.
 Desencadenadores (Triggers): Aunque el propósito principal del marcado XAML es
implementar la apariencia de una aplicación, también puede utilizar XAML para
implementar algunos aspectos del comportamiento de una aplicación. Un ejemplo de

20
ello es el uso de desencadenadores para cambiar la apariencia de una aplicación de
acuerdo con las interacciones con el usuario.
 Plantillas de Control: Las UIs predeterminadas para los controles de WPF suelen
construirse a partir de otros controles y formas. A veces, la apariencia predeterminada
de un control puede ser incongruente con la apariencia global de una aplicación. En
este caso, puede utilizar una plantilla de control ControlTemplate para cambiar la
apariencia de la interfase de usuario del control sin modificar su contenido ni su
comportamiento.
 Plantilla de Datos: Mientras que una plantilla de control permite especificar la
apariencia de un control, una plantilla de datos permite especificar la apariencia del
contenido del control. Las plantillas de datos se utilizan con frecuencia para mejorar la
manera de mostrar los datos enlazados.
 Estilos: Los estilos permiten a los programadores y diseñadores normalizar un aspecto
determinado de sus productos. WPF proporciona un modelo de estilo sólido, que es la
base del elemento Style.
 Recursos: Los controles de una aplicación deben tener la misma apariencia, que puede
incluir todo tipo de recursos, desde fuentes y colores de fondo hasta plantillas de
control, pasando por las plantillas de datos y los estilos. Puede utilizar la compatibilidad
de WPF con los recursos de la interfase de usuario (UI) para encapsular estos recursos
en una ubicación única y poder reutilizarlos.
 Temas y Máscaras: Desde una perspectiva visual, un tema define la apariencia global
de Windows y de las aplicaciones que se ejecutan dentro del mismo. La apariencia
definida por un tema establece la apariencia predeterminada de una aplicación WPF.
Sin embargo, WPF no se integra directamente con los temas de Windows. Como la
apariencia de WPF se define mediante plantillas, WPF incluye una plantilla para cada
uno de los temas conocidos de Windows, como Aero (Windows Vista), Clásico
(Microsoft Windows 2000), etc. Estos temas están empaquetados en diccionarios de
recursos que se resuelven cuando no se encuentran los recursos correspondientes en
una aplicación. Por otro lado, la experiencia del usuario para algunas aplicaciones no
procede necesariamente de los temas estándar. Tales UIs tienden a proporcionar
temas personalizados, específicos de cada aplicación. Se denominan máscaras, y las
aplicaciones con máscaras suelen proporcionar enlaces que permiten a los usuarios
personalizar diversos aspectos de la máscara.
 Controles Personalizados: Aunque WPF proporciona una amplísima compatibilidad con
funciones de personalización, puede encontrar situaciones en que los controles
existentes de WPF no satisfagan las necesidades de la aplicación o de los usuarios.
WPF permite crear controles.
3- Eventos y Comandos
Información general sobre Eventos Enrutados
En los primeros pasos con WPF, lo más probable es que use eventos enrutados aún sin saber
que los está usando. Por ejemplo, si agrega un botón a una ventana en el diseñador de Visual
Studio®, modifica el nombre a miBoton y después hacer doble clic sobre él, el evento Click se
conectará al marcado XAML y se agregará un controlador de eventos para este evento al
código que hay tras la clase Window. Esto es lo mismo que la conexión de eventos en
Windows Forms y ASP.NET. En concreto, en el marcado XAML para el botón, terminará por
tener un código parecido a este:
<Button Name=" miBoton " Click="miBoton_Click">Click Me</Button>

21
La declaración de XAML para incorporar un evento es parecida a una asignación de propiedad
en XAML, pero el resultado es un enlace de evento normal en el objeto que especificó el
controlador de eventos. Si cambia la ventana al editor de código verá lo siguiente:
private void myButton_Click(object sender, RoutedEventArgs e) { }
Esto es igual a cualquier otra conexión de evento .NET, se tiene un delegado explícitamente
declarado y enlazado a un evento de un objeto, y el delegado apunta a un método de control.
El único indicio de que se están usando eventos enrutados es el tipo del argumento de evento
para el evento Click, que es RoutedEventArgs. Entonces, ¿qué tienen de especial los eventos
enrutados?
Un evento enrutado es un tipo de evento que puede invocar controladores o varios agentes de
escucha en un árbol de elementos, en lugar de simplemente en el objeto que lo desencadenó.
Para comprender mejor esta definición, necesitará antes comprender el modelo de
composición elemental de WPF.
Árboles de elementos WPF
Si empieza con una ventana nueva en un proyecto y arrastra un botón en la ventana del
diseñador, terminará con un árbol de elementos en el XAML parecido a éste (los atributos se
omitieron para mejorar la claridad):
<Window>
<Grid>
<Button/>
</Grid>
</Window>
Cada uno de estos elementos representa una instancia en tiempo de ejecución de un tipo .NET
correspondiente y la jerarquía declarada de elementos forma lo que se denomina un árbol
lógico. Además, muchos controles de WPF son a su vez contenedores, lo que significa que
pueden tener elementos secundarios. Por ejemplo, un Button puede tener un elemento
secundario complejo como contenido. El árbol lógico se podría expandir como se muestra aquí:
<Window>
<Grid>
<Button>
<StackPanel>
<Image/>
<TextBlock/>
</StackPanel>
</Button>
</Grid>
</Window>
Como puede imaginar, el árbol podría contener varias ramas y el árbol lógico puede crecer
considerablemente en complejidad. Lo más importante a tener en cuenta sobre los elementos
WPF del árbol lógico es que lo que se ve no es realmente lo que se obtiene en tiempo de
ejecución. Cada uno de esos elementos suele ampliarse hasta formar un árbol más complejo
de elementos visuales en tiempo de ejecución.
Cuando hago clic en mi botón, puede que en realidad no esté haciendo clic en el elemento
Button; puedo estar haciendo clic en un elemento secundario del árbol visual, posiblemente
incluso uno que no se muestre en mi árbol lógico (como ButtonChrome). Por ejemplo, digamos
que hago clic sobre la imagen que contiene mi botón. En realidad, el clic se manifiesta

22
inicialmente como un evento de MouseLeftButtonDown incluido dentro del elemento Image.
Pero de alguna forma esto hay que trasladarlo a un evento Click al nivel del Button. Es aquí
donde entra en juego el enrutamiento en eventos.
Enrutamiento de eventos
Es importante entender un poco los árboles lógicos y visuales porque los eventos enrutados se
enrutan principalmente según el árbol visual. Los eventos enrutados admiten una
RoutingStrategy que puede ser Bubble, Tunnel o Direct.
 Bubble es la más común y significa que un evento se propagará hacia la parte superior
del árbol visual a partir del elemento origen hasta que se controle o alcance el
elemento raíz. Esto le permite controlar un evento de un objeto aún más arriba de la
jerarquía de elementos desde el elemento origen. Por ejemplo, se podría adjuntar un
controlador Button.Click en elemento Grid que lo contiene en vez de directamente en el
propio botón.
 Tunnel: Los eventos Tunnel van en dirección contraria, se inician en el elemento raíz y
van bajando por el árbol de elementos hasta que se controlan o alcanzan el elemento
origen para el evento. Esto permite que los elementos precedentes intercepten el
evento y lo controlen antes de que alcance el elemento origen. Los eventos Tunnel
usan como prefijo de sus nombres Preview como convención (por ejemplo,
PreviewMouseDown).
 Direct: Los eventos directos se comportan como eventos normales de .NET
Framework. El único controlador posible para el evento es un delegado que se enlaza
al evento.
Eventos enrutados y composición
Vayamos paso a paso para ver cómo el evento Button.Click se produce y regresa a casa, ya
que es importante. Como he mencionado anteriormente, un usuario iniciará un evento Click con
un evento MouseLeftButtonDown en algún elemento secundario del árbol visual del Button,
como en el caso de Image en el ejemplo anterior.
Cuando se produce el evento MouseLeftButtonDown dentro del elemento Image, se inicia un
evento PreviewMouseLeftButtonDown en la raíz y profundiza hacia Image. Si ningunos de los
controladores establecen la marca Handled en verdadero para el evento de vista previa, se
inicia la propagación del evento MouseLeftButtonDown desde el elemento Image hasta que

23
llega a Button. El botón controla ese evento, establece la marca Handled en verdadero y
acciona su propio evento Click.
Las implicaciones son bastante eficaces. Por ejemplo, si elijo reemplazar la apariencia
predeterminada del botón aplicando una plantilla de control que contenga un elemento Ellipse,
no tengo que hacer nada para garantizar que los clics hechos fuera de Ellipse no accionen el
evento Click. Los clics que quedan justo fuera del borde de Ellipse seguirán estando dentro de
los límites rectangulares de mi botón, pero Ellipse tiene su propia detección de aciertos para
MouseLeftButtonDown, cosa que no ocurre para las partes vacías del botón que están fuera de
Ellipse.
Así que sólo los clics que se hacen dentro de Ellipse accionan el evento
MouseLeftButtonDown. Sigue estando controlado por la clase Button a la que se adjunta la
plantilla, así que se obtendrá el comportamiento previsible incluso del botón personalizado.
Esto también es un concepto muy importante que recordar al escribir sus propios controles
compuestos personalizados, porque lo más probable es que necesite hacer cosas parecidas a
las que hace Button para administrar eventos de elementos secundarios que se coloquen
dentro de su control.
Eventos adjuntos
Los eventos adjuntos son eventos enrutados que admiten un enlace XAML sobre elementos
distintos del tipo en el que se declara el evento. Por ejemplo, si desea que el elemento Grid
esté atento al paso de un evento Button.Click, sólo tendría que enlazarlo de esta forma:
<Grid Button.Click="myButton_Click">
<Button Name="myButton" >Presionar</Button>
</Grid>
Los eventos adjuntos sólo dan un poco más de flexibilidad en los sitios donde conecta sus
controladores de eventos. Pero si los elementos están contenidos en la misma clase (como en
este ejemplo), puede no resultar aparente qué diferencia hay porque, en ambos casos, el
método de control sigue siendo sólo un método de la clase Window.
Información general sobre Comandos enrutados
Los comandos enrutados de WPF ofrecen un mecanismo específico para enlazar controles de
IU como botones de barra de herramientas y elementos de menú a controladores, sin tener que
realizar muchos emparejamientos integrados ni código repetitivo en la aplicación. Los
comandos enrutados ofrecen tres cosas importantes además del control normal de eventos:
 Los elementos origen del comando enrutado (invocadores) pueden estar
desconectados de los destinos de comandos (controladores), no es necesario que
haya referencias directas entre ellos, como ocurriría si estuvieran vinculados por un
controlador de eventos.
 Los comandos enrutados habilitarán o deshabilitarán todos los controles de IU
asociados cuando el controlador indica que el comando está deshabilitado.
 Los comandos enrutados le permiten asociar métodos abreviados de teclado y otras
formas de movimientos de entrada (movimientos de lápiz óptico, por ejemplo) como
otra manera de invocar el comando.
Además, una variedad específica del comando enrutado (la clase RoutedUICommand) agrega
la capacidad de definir una sola propiedad Text para usarla como indicaciones de texto de
cualquier control que sea invocador para el comando. La propiedad Text también se puede
localizar más fácilmente que visitando todos los controles del invocador asociado.
Para declarar un comando en un invocador, sólo tiene que establecer una propiedad
Command sobre el control que iniciará el comando:

24
<Button Command="ApplicationCommands.Save">Guardar</Button>
La propiedad Command la admiten MenuItem, Button, RadioButton, Checkbox, Hyperlink y
otros controles.
Para concretar y ver rápidamente las ventajas de los comandos enrutados, veamos un ejemplo
sencillo. En la siguiente figura se puede ver una IU con dos TextBoxs y un botón de barra de
herramientas para realizar una acción Cortar sobre el texto de los cuadros de texto.
Para poder conectar esto usando eventos, necesitaría definir un controlador Click para el botón
de la barra de herramientas y ese código necesitaría hacer referencia a los dos cuadros de
texto. Tendría que determinar qué cuadro de texto tiene el foco y llamar a operaciones
apropiadas del portapapeles según la selección del texto en el control. También tendría que
preocuparse de habilitar y deshabilitar el botón de la barra de herramientas según donde esté
el foco y si se seleccionó algo en el cuadro de texto. Esto generaría un código complejo y
desordenado.
Con comandos, lo único que hay que hacer es establecer la propiedad Command del botón de
la barra de herramientas en el comando ApplicationCommands.Cut que está definido en WPF
y ya está listo.
<StackPanel>
<ToolBar DockPanel.Dock="Top" Height="25">
<Button Command="ApplicationCommands.Cut">
<Image Source="cut.ico"/>
</Button>
</ToolBar>
<TextBox Name="txt1" Width="100" Height ="23"></TextBox>
<TextBox Name="txt2" Width="100" Height ="23"></TextBox>
</StackPanel>
Ahora podría ejecutar la aplicación y comprobar que el botón de la barra de herramientas está
inicialmente deshabilitado. Después de seleccionar texto en uno de los cuadros de texto, el
botón de la barra de herramientas pasa a estar habilitado y, si se hace clic en él, el texto se
corta y pasa al portapapeles. Y funcionaría para cualquier TextBox de cualquier lugar de la IU.
Lo que sucede aquí es que la implementación de la clase TextBox tiene un enlace de
comandos integrado para el comando Cut y encapsula automáticamente el control del
portapapeles para ese comando (además de Copy y Paste). Pero, ¿cómo se invoca solamente
el comando en el cuadro de texto enfocado, y cómo llega el mensaje al cuadro de texto para
decirle que controle el comando? Aquí es donde entra en juego el enrutamiento de comandos.

25
Enrutamiento de comandos
La diferencia entre comandos enrutados y eventos enrutados es la forma en que el comando
se dirige desde el invocador del comando al controlador del comando. Concretamente, los
eventos enrutados se usan internamente para dirigir mensajes entre los invocadores y los
controladores de comandos (mediante el enlace de comandos que se engancha en el árbol
visual).
Aquí podría haber una relación de varios a varios, pero sólo un controlador de comando estará
realmente activo en cada momento. El controlador de comandos activo lo determina una
combinación de las posiciones del invocador y del administrador de comandos en el árbol
visual, y de la posición del foco en la interfase de usuario. Los eventos enrutados se usan para
llamar al controlador de comandos activo para preguntarle si se debe habilitar el comando, así
como para invocar al controlador de método Execute del controlador de comandos.
Generalmente, un invocador de comandos busca un enlace de comandos entre su propia
ubicación en el árbol visual y la raíz del árbol visual. Si encuentra uno, el controlador de
comandos enlazado determinará si el comando está habilitado y se llamará cuando se invoque
el comando. Si el comando está conectado a un control de una barra de herramientas o de un
menú, entonces se ejecuta lógica adicional que también examina la ruta de acceso del árbol
visual desde la raíz al elemento del foco buscando un enlace de comando.
Definición de comandos
Existen cinco clases de comandos integradas en WPF:
 ApplicationCommands: Close, Cut, Copy, Paste, Save, Print
 NavigationCommands: BrowseForward, BrowseBack, Zoom, Search
 EditingCommands: AlignXXX, MoveXXX, SelectXXX
 MediaCommands: Play, Pause, NextTrack, IncreaseVolume, Record, Stop
 ComponentCommands: MoveXXX, SelectXXX, ScrollXXX, ExtendSelectionXXX
XXX indica diversas operaciones como MoveNext y MovePrevious. Los comandos de cada
clase están definidos como propiedades para que pueda conectarlos fácilmente.
También puede usar estos comandos con una notación abreviada
<Button Command="Save">Save</Button>
Desafíos de los comandos enrutados
Los comandos enrutados funcionan bien en escenarios de interfases de usuario sencillas,
conectando barras de herramientas y elementos de menú, y controlando esas cosas que están
emparejadas intrínsecamente al foco del teclado (como las operaciones con el portapapeles).
Sin embargo, donde los comandos enrutados se muestran insuficientes, es cuando se empieza
a crear interfases de usuario complejas, donde la lógica del control de comandos está en el
código de soporte para las definiciones de vista y los invocadores de comando no siempre
están dentro de una barra de herramientas o de un menú.
El problema que surge al trabajar de este modo es que la habilitación y el control de lógica para
un comando puede no formar parte del árbol visual directamente; en su lugar puede estar
situada en un presentador o en un modelo de presentación. Además, el estado que determina
si el comando debe habilitarse puede no tener relación con la situación de los invocadores de
comandos y las vistas en el árbol visual. También puede encontrar casos donde haya más de
un controlador válido al mismo tiempo para un comando particular.
Para evitar los problemas potenciales de la ubicación del árbol visual con comandos enrutados,
necesitará simplificar las cosas. Normalmente necesitará asegurarse de que los controladores
de comando están en el mismo elemento o en niveles superiores del árbol visual del elemento
que invocará el comando.

26
Módulo 2
Creando Aplicaciones
WPF

27
1- Crear una aplicación WFP
Aplicación WPF
Dentro de Visual Studio:
 En el menú Archivo, haga clic en Nuevo proyecto. Aparecerá el cuadro de diálogo de
Nuevo proyecto.
 Seleccione el lenguaje y elija Aplicación WPF.
 Cambie el nombre de la aplicación.
 Haga clic en Aceptar.
Se creará una nueva carpeta para el proyecto con el nombre del proyecto y, a continuación,
mostrará el nuevo formulario WPF titulado Window1 en la vista Diseñador. Dentro de esta vista
se puede trabajar el formulario de forma similar al de las aplicaciones Windows. Arrastre
controles y modifique sus propiedades usando la ventana de propiedades. Escriba los
atajadores de eventos en el archivo .xaml.cs o .xaml.vb según el lenguaje seleccionado.
La ventana de WPF que se ve en la vista Diseñador es una representación visual de la ventana
que se abrirá al iniciar la aplicación. En la vista Diseñador, puede arrastrar diversos controles
desde el Cuadro de herramientas hasta la ventana WPF. Después de haber colocado un
control a la ventana de WPF, Visual C# crea automáticamente código que hará que el control
se sitúe apropiadamente cuando se ejecute el programa.

28
Clase Window
Permite crear, configurar, mostrar y administrar la duración de las ventanas y los cuadros de
diálogo. El punto de interacción entre el usuario y una aplicación independiente es una
ventana. Una ventana de WPF se compone de dos áreas distintas:
 Un área no cliente, que hospeda los elementos gráficos de las ventanas, incluidos un
icono, título, menú del sistema, botón para minimizar, botón para maximizar, botón para
restablecer, botón para cerrar y un borde.
 Un área cliente, que hospeda el contenido específico de la aplicación.
<Window x:Class="AplWPF.Principal"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Principal" Height="500" Width="500" WindowStyle="ThreeDBorderWindow"
ResizeMode="CanResize" ShowInTaskbar="True" WindowState="Maximized">
Configurar la ventana de inicio
El archivo App.xaml y el archivo de código subyacente correspondiente se crean de forma
predeterminada en un proyecto WPF. Este archivo contiene recursos de nivel de aplicación que
pueden ser usados en cualquier documento de la aplicación. Dentro de este archivo se
implementa la clase Application. La ventana de inicio se establece a través de la propiedad
StartupUri.
<Application x:Class="WpfCSharp.App"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Principal.xaml">

29
<Application.Resources>
</Application.Resources>
</Application>
Propiedades de la Clase Window
AllowsTransparency: Obtiene o establece un valor que indica si se puede ajustar la opacidad
del formulario
Background: Obtiene o establece un pincel (Brush) que describe el fondo de un control.
BorderBrush: Obtiene o establece un pincel (Brush) que describe el fondo del borde de un
control.
BorderThickNess: Obtiene o establece el grosor del borde de un control.
Cursor: Obtiene o establece el cursor que se muestra cuando el puntero del mouse se sitúa
sobre este elemento.
Foreground: Obtiene o establece un pincel (Brush) que describe el color de primer plano,
generalmente la letra.
Height: Obtiene o establece el alto sugerido del elemento, expresados en unidades
independientes de dispositivo (1/96 de pulgada por unidad).
Icon: Obtiene o establece el icono de una ventana.
IsEnabled: Obtiene o establece si la ventana permite recibir entradas del usuario.
Left: Obtiene o establece la posición del borde izquierdo de la ventana con respecto al
escritorio.
ResizeMode: Obtiene o establece el modo de cambio de tamaño.
ShowInTaskBar: Obtiene o establece un valor que indica si la ventana tiene un botón de barra
de tareas.
SizeToContent: Obtiene o establece un valor que indica si una ventana ajustará
automáticamente su tamaño al de su contenido.
Title: Obtiene o establece el título de una ventana.
Top: Obtiene o establece la posición del borde superior de la ventana con respecto al
escritorio.
TopMost: Obtiene o establece un valor que indica si una ventana aparece en el punto más alto
en el orden Z.
Width: Obtiene o establece el ancho del elemento, expresados en unidades independientes de
dispositivo (1/96 de pulgada por unidad).
WindowStartupLocation: Obtiene o establece la posición de la ventana cuando se muestra por
primera vez.
WindowState: Obtiene o establece un valor que indica si una ventana está restaurada,
minimizada o maximizada.
WindowStyle: Obtiene o establece el estilo de borde de una ventana.
Controles WPF y su equivalente con Controles Windows Forms
Windows Forms WPF Comentarios
Button Button
CheckBox CheckBox
CheckedListBox ListBox Compuestos
ColorDialog

30
ComboBox ComboBox
ContextMenuStrip ContextMenu
DataGridView Algunas funcionalidades de DataGridView
se pueden reproducir usando los controles
ListView y GridView.
DateTimePicker
ErrorProvider
FlowLayoutPanel WrapPanel o StackPanel
FolderBrowserDialog
FontDialog
Form Window
GroupBox GroupBox
HelpProvider No tiene ayuda con F1. Se puede
reemplazar esta funcionalidad con
ToolTips
ImageList
Label Label
LinkLabel Se puede utilizar la clase Hyperlink.
ListBox ListBox
ListView ListView Solo contiene la vista de detalle en
formato de solo.
MaskedTextBox
MenuStrip Menu
MonthCalendar
NotifyIcon
NumericUpDown TextBox y dos RepeatButton
OpenFileDialog OpenFileDialog
PageSetupDialog
Panel Canvas

31
PictureBox Image
PrintDialog PrintDialog
PrintDocument
PrintPreviewControl DocumentViewer
PrintPreviewDialog
ProgressBar ProgressBar
RadioButton RadioButton
RichTextBox RichTextBox
SaveFileDialog SaveFileDialog
SoundPlayer MediaPlayer
SplitContainer GridSplitter
StatusStrip StatusBar
TabControl TabControl
TableLayoutPanel Grid
TextBox TextBox
Timer DispatcherTimer
ToolStrip ToolBar
ToolTip ToolTip
TrackBar Slider
TreeView TreeView
WebBrowser Frame,
System.Windows.Controls.WebBr
owser
The Frame control can host HTML pages.
Controladores de Eventos
Para crear un controlador de eventos se puede hacer doble clic sobre el control. De esta
manera se crea el atajador del evento predeterminado de un control.
También puede agregarse como atributo escribiendo sobre el editor XAML. Al escribir el
nombre del evento o seleccionarlo de la lista de ayuda aparecerá una opción <Nuevo

32
Controlador de Eventos> y el nombre de procedimientos posibles de ser seleccionados
teniendo en cuenta la firma del atajador del evento seleccionado. El nombre predeterminado
del atajador del evento será NombreObjeto_Evento. El controlador de eventos se escribirá en
la clase asociada al formulario.
Todas las librerías del Framework de .Net esta disponible para ser usada en este tipo de
aplicaciones.
Recursos
WPF provee recursos como una forma simple de reusar objetos y valores definidos. Se pueden
crear recursos en XAML o por código. Todos los elementos de nivel FrameWork tienen la
propiedad Resources, aunque generalmente se los usa en elementos de tipo raíz como
Window.
Los recursos deben contener una identificación única. Esta se declara usando x:Key.
Generalmente la clave se la declara como carácter (string), aunque puede ser declarada
usando otros tipos de datos.
<Page.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Gold"/>
<Style TargetType="Border" x:Key="PageBackground">
<Setter Property="Background" Value="Blue"/>
</Style>
<Style TargetType="TextBlock" x:Key="TitleText">
<Setter Property="Background" Value="Blue"/>
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="#4E87D4"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="Margin" Value="0,40,10,10"/>
</Style>
<Style TargetType="TextBlock" x:Key="Label">
<Setter Property="DockPanel.Dock" Value="Right"/>
<Setter Property="FontSize" Value="8"/>
<Setter Property="Foreground" Value="{StaticResource MyBrush}"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Margin" Value="0,3,10,0"/>
</Style>
</Page.Resources>
Recursos Estáticos y Dinámicos
Los recursos pueden ser referenciados en forma estática o dinámica. Esto se hace usando
StaticResource o DynamicResource y el nombre del recurso que se está referenciando. La

33
referencia estática procesa la clave buscando el valor en todos los recursos disponibles, esto
ocurre durante la carga del proceso. En cambio la referencia dinámica procesa la clave
creando una expresión que permanece sin ser evaluada hasta el momento de la ejecución,
durante la ejecución evalúa la expresión y devuelve el valor.
Cuando se va a crear una referencia a un recurso, las siguientes consideraciones deberían
tenerse en cuenta para elegir cual de las dos opciones va a usarse:
 Donde está creado el recurso, si es un recurso de ventana, de aplicación, de control,
etc.
 La funcionalidad de la aplicación
 El comportamiento del recurso
Cuando elegir StaticResource:
 La mayoría de los recursos son de ventana o aplicación. Los recursos no son re
evaluados durante la ejecución mejorando la performance.
 Se está estableciendo alguna propiedad del objeto en Freezable
 Se están creando recursos que serán compilados en una dll aparte.
 Se están definiendo recursos que van a ser usados en Temas
 Se están usando recursos con muchas propiedades de dependencia.
Cuando elegir DynamicResource:
 El valor del recurso depende de una condición que solo se conoce durante la
ejecución.
 Se están creando o referenciando Temas para un control personalizado
 Se está intentando ajustar el contenido de ResourceDictionary
 Cuando se usan recursos compilados
 Cuando se referencia recursos pesados y el uso de ese recurso no es inmediato, o sea
no se usa durante la carga de la ventana. Los recursos estáticos se cargan con la
carga de la ventana, en cambio los dinámicos cuando se necesitan
 Se aplican recursos a elemento que dependen de elementos padres. Al cambiar el
elemento padre es posible que sea necesario cambiar el objeto hijo también.
<Button Background="{StaticResource MyBrush}"/>
<Ellipse Fill="{StaticResource MyBrush}"/>
2- Controles de Diseño
Sistema de Diseño de Interfase de Usuario
El término diseño describe el proceso de medir y organizar los integrantes de la colección
Children de un elemento contenedor y, a continuación, dibujarlos en la pantalla. Se trata de un
proceso intensivo y, cuanto mayor es la colección Children, mayor es el número de cálculos
realizados. También se puede incluir mayor complejidad según el comportamiento de diseño
definido por el elemento contenedor que posee la colección. Un diseño relativamente sencillo,
como Canvas, puede producir un rendimiento excelente si no se requiere un Panel más
complejo como Grid.
Cada vez que un elemento secundario cambia su posición, tiene el potencial de desencadenar
un nuevo paso del sistema de diseño. Como a tal, es importante entender los eventos que
pueden invocar el sistema del diseño, puesto que la invocación innecesaria puede deteriorar el
rendimiento de la aplicación.
En su versión más simple, el diseño es un sistema recursivo que conduce a la configuración del
tamaño, posición y representación de un elemento en la pantalla. El sistema de diseño
completa dos pasos por cada miembro de la colección Children: un paso de medida y un paso
de organización. Se trata de la serie de eventos que se producen cada vez que se invoca el
sistema de diseño.

34
 Un elemento secundario comienza el proceso de diseño midiendo, en primer lugar,
propiedades básicas.
 Se evalúan las propiedades de tamaño, como Width, Height y Margin.
 Se aplica la lógica concreta del contenedor, como la dirección de Dock o la orientación
(Orientation) de apilado.
 El contenido se organiza después de medir todos los elementos secundarios.
 Se dibuja la colección Children en la pantalla.
 Se invoca el proceso de nuevo si se agregan Children adicionales a la colección.
Al pensar en el diseño de una aplicación en Windows Presentation Foundation (WPF), es
importante entender el rectángulo de selección que rodea todos los elementos. Esta
abstracción ayuda a comprender el comportamiento del sistema de diseño. Cada elemento
utilizado por el sistema de diseño se puede considerar como un rectángulo que se inserta en
una partición del diseño. El sistema, calculando el espacio de pantalla disponible, determina el
tamaño de ese rectángulo, el tamaño de cualquier restricción, las propiedades específicas del
diseño, como el margen y el relleno, y el comportamiento individual del elemento primario. Al
procesar estos datos, el sistema puede calcular la posición de todos los elementos secundarios
de un contenedor determinado. Es importante recordar que las características de tamaño
definidas en el elemento primario (como Border) afectan a sus elementos secundarios.
Cuando se representa el contenido de un objeto Window, se invoca el sistema del diseño
automáticamente. Para mostrar el contenido, el Content de la ventana debe definir un panel
raíz que sirve para definir un marco que permite organizar los miembros de Children en la
pantalla.
A continuación se detallan los controles disponibles como paneles o contenedores.
Border
Dibuja un borde, un fondo o ambos alrededor de otro elemento.
En el siguiente ejemplo se muestra un control Border que contiene un CheckBox.
<Border Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="50"
Padding="5" Height="36" VerticalAlignment="Top" Margin="100,44,116,0">
<CheckBox Name="Prueba" IsChecked="True" >Prueba</CheckBox>
</Border>
Canvas
Define un área en la que pueden colocarse explícitamente los elementos secundarios utilizando
las coordenadas relativas al área del control Canvas. Canvas es el único elemento del panel
que no tiene ninguna característica de diseño inherente. Tiene las propiedades
predeterminadas Height y Width de cero. Siempre se da a los elementos secundarios de
Canvas el tamaño máximo que requieren. Como resultado, la alineación vertical y horizontal no
tiene ningún efecto en un control Canvas. Canvas es un control de diseño de nivel superior que
puede utilizarse para la colocación absoluta del contenido secundario.
En el siguiente ejemplo se muestra un control Canvas con dos TextBlock contenidos. El uso de
las propiedades Canvas.Top y Canvas.Left permite posicionar los controles contenidos.

35
<Canvas Background="LightSteelBlue">
<TextBlock FontSize="14" Canvas.Top="10" Canvas.Left="5">Hola
Mundo!</TextBlock>
<TextBlock FontSize="22" Canvas.Top="25"
Canvas.Left="35">Hola</TextBlock>
</Canvas>
DockPanel
Define un área en la que se pueden organizar horizontalmente o verticalmente los elementos
secundarios, uno respecto al otro. La posición de los elementos secundarios de un control
DockPanel en la pantalla está determinada por la propiedad Dock de los elementos
secundarios respectivos y el orden relativo de estos elementos secundarios en DockPanel. Por
tanto, un conjunto de elementos secundarios con los mismos valores de la propiedad Dock se
puede organizar de forma diferente en la pantalla dependiendo del orden de estos elementos
secundarios dentro del DockPanel. La clasificación de los elementos secundarios afecta a la
posición porque DockPanel recorre en iteración sus elementos secundarios en orden, y
establece la posición de cada elemento en función del espacio restante.
El método SetDock cambia la posición de un elemento respecto a otros elementos del mismo
contenedor. Las propiedades de alineación, como HorizontalAlignment, cambian la posición de
un elemento respecto a su elemento principal.
Si establece la propiedad LastChildFill en true, que es el valor predeterminado, el último
elemento secundario de DockPanel rellena siempre el espacio restante, sin tener en cuenta
ningún valor que se haya establecido en este elemento. Para acoplar un elemento secundario
en otra dirección, debe establecer la propiedad LastChildFill en false y especificar además una
dirección de acoplamiento explícita para este último elemento secundario.
En el siguiente ejemplo se muestra el uso de un control DockPanel con varios controles
contenidos. La propiedad DockPanel permite posicionar los objetos.
<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="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">

36
<TextBlock Foreground="Black">This content will "Fill" the remaining
space</TextBlock>
</Border>
</DockPanel>
Grid
Define un área de cuadrícula flexible que está compuesta de columnas y filas. Los elementos
secundarios de Grid se dibujan en el orden en que aparecen en el código. En consecuencia, se
puede lograr un orden dispuesto en capas (también conocido como orden Z) cuando los
elementos comparten las mismas coordenadas.
Grid y Table comparten alguna funcionalidad común, pero se puede aplicar cada uno de ellos
en escenarios adecuados para hacer un mejor uso de sus características integradas. Grid
agrega elementos basándose en un índice de fila y columna; Table no lo hace. El elemento
Grid permite la disposición en capas del contenido si puede haber más de un elemento dentro
de una sola celda. Table no admite la disposición en capas. Los elementos secundarios de un
elemento Grid se pueden colocar de forma absoluta con respecto a la esquina superior
izquierda de los límites de su celda. Table no admite esta característica. Grid también
proporciona un comportamiento de cambio de tamaño más flexible que Table.
Grid utiliza el objeto GridLength para definir las características de ajuste de tamaño de
RowDefinition o ColumnDefinition.
En el siguiente ejemplo se muestra el uso del control Grid. La definición inicial de filas y
columnas y el uso de las propiedades Grid.Row y Grid.Column para asociar los controles
contenidos a la celda correspondiente.
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True"
Width="250" Height="100" Canvas.Left="80" Canvas.Top="67"
Background="LightYellow" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3"
Grid.Row="0">Productos Comprados</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1"
Grid.Column="0">Enero</TextBlock>
Grid.Column="1">Febrero</TextBlock>
Grid.Column="2">Marzo</TextBlock>

37
<TextBlock Grid.Row="2" Grid.Column="0" TextAlignment="Right"
>50,000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1"
TextAlignment="Right">100,000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2"
TextAlignment="Right">150,000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3"
Grid.Row="3">Total Units: 300,000</TextBlock>
</Grid>
StackPanel
Organiza los elementos secundarios en una única línea que se puede orientar horizontal o
verticalmente. La propiedad Orientation permite organizar el contenido horizontal o
verticalmente.
En el siguiente ejemplo se muestra el uso del control StackPanel. La propiedad Orientation
organiza los RadioButtons en forma vertical.
<StackPanel Height="40" Width="115" Orientation="Vertical" >
<RadioButton Name="rb1" Checked="rb_Checked" >Si</RadioButton>
<RadioButton Name="rb2" Checked="rb_Checked" >No</RadioButton>
</StackPanel>
GroupBox
Representa un control que crea un contenedor que tiene un borde y un encabezado para el
contenido de interfaz de usuario. Su propiedad de contenido es Content y su propiedad de
encabezado es Header.
En el siguiente ejemplo se muestra el uso del control GroupBox. La propiedad Header permite
ponerle el título. El uso de un StackPanel, otro de los controles contenedores, permite
organizar el cuerpo del GroupBox.
<GroupBox Width="100" Height="100" Background="Beige" >
<GroupBox.Header>
<Label>Employee Data</Label>
</GroupBox.Header>
<StackPanel>
<RadioButton HorizontalAlignment="Left" Height="16" Name="Opcion1"
Width="120">Opción 1</RadioButton>
<RadioButton HorizontalAlignment="Left" Height="16" Name="Opcion2"
Width="120">Opción 2</RadioButton>
</StackPanel>
</GroupBox>

38
Expander
Representa el control que muestra un encabezado que tiene una ventana contraible que
muestra el contenido. Su propiedad de contenido es Content y su propiedad de encabezado es
Header. Si el contenido de la ventana expandida es demasiado grande para la ventana, puede
ajustar el contenido de Expander en un control ScrollViewer para proporcionar el contenido
desplazable. Expander no proporciona automáticamente la función de desplazamiento.
En el siguiente ejemplo se muestra el uso del control Expander. Las propiedades de este
control permiten controlar la expansión y contracción del cuerpo del mismo.
<Expander Name="myExpander" HorizontalAlignment="Left" Header="Expandir"
ExpandDirection="Down" IsExpanded="True" Width="100">
<TextBlock TextWrapping="Wrap">
Representa el control que muestra un encabezado que tiene una ventana
contraible que muestra el contenido.
</TextBlock>
</Expander>
InkCanvas
InkCanvas es un elemento que se puede utilizar para recibir y mostrar entradas de entrada
manuscrita. Normalmente esta operación se lleva a cabo mediante el uso de un lápiz o un
mouse que interactúan con un digitalizador para generar trazos de entrada manuscrita. Los
trazos creados se representan como objetos Stroke y se pueden manipular mediante
programación o a través de los datos proporcionados por el usuario. InkCanvas permite al
usuario modificar o eliminar un objeto Stroke existente.
<InkCanvas Name="ic" Background="LightSteelBlue" Canvas.Top="0" Canvas.Left="0"
Height="200" Width="200" />

39
Menu
Representa un control de menú de Windows que le permite organizar jerárquicamente los
elementos asociados a comandos y controladores de eventos.
Presenta una lista de elementos que especifican comandos u opciones para una aplicación.
Normalmente, al hacer clic en un elemento de un menú, se abre un submenú o una aplicación
ejecuta un comando. MenuItem es el tipo más común de elemento de Menu. MenuItem puede
contener elementos secundarios.
En el siguiente ejemplo se muestra el uso del control Menu y la forma de crear los MenuItems.
<Menu Name="menu1" Width="300" HorizontalAlignment="Left"
VerticalAlignment="Top" >
<MenuItem Header="_Archivo" >
<MenuItem Header="A_brir" IsCheckable="true" />
<MenuItem Header="_Cerrar" IsCheckable="true" IsChecked="True" />
<MenuItem Header="_Guardar" >
<MenuItem.Icon>
<Image Source="setup.ico" Width="16" Height="16" />
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Header="A_gregar" >
<MenuItem Header="Proyecto" />
<MenuItem Header="Archivo" />
</MenuItem>
</MenuItem>
</Menu>
Frame
Es un control de contenido que proporciona la capacidad para navegar y mostrar el contenido.
Se puede hospedar dentro de otro contenido, como con otros controles y elementos. El

40
contenido puede ser cualquier tipo de objeto de .NET Framework y archivos HTML. En general,
sin embargo, las páginas son la manera preferida de empaquetar contenido para la
navegación. A un contenido se puede navegar estableciendo la propiedad Source con el URI
para el contenido deseado. Además, a un contenido se puede navegar utilizando una de las
sobrecargas del método Navigate.
<Frame Name="miFrame" Source="http://www.microsoft.com" />
WrapPanel
Posiciona los elementos hijos en forma secuencial de izquierda a derecha, cortando el
contenido de manera que quede sobre la línea siguiente al llegar al borde del contenedor. El
orden se mantiene de arriba hacia abajo o de derecha a izquierda dependiente del valor de la
propiedad Orientation.
<Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black"
BorderThickness="2">
<WrapPanel Background="LightBlue" Width="200" Height="100">
<Button Width="200">Button 1</Button>
<Button>Button 2</Button>
</WrapPanel>
</Border>

41
3- Otros Controles
Label - AccessText
Representa la etiqueta de texto de un control. Esta clase proporciona compatibilidad funcional y
visual con las teclas de acceso. Se utiliza con frecuencia para permitir el acceso rápido desde
el teclado a controles como TextBox. Para asociar un control Label a otro control, establezca la
propiedad Target en el control que debe obtener el foco cuando el usuario presione la tecla de
acceso. Para establecer la tecla de acceso, agregue un guión bajo antes del carácter que debe
ser la tecla de acceso. Se accede con Alt + la letra seleccionada.
En el siguiente ejemplo al presionar Alt+D, el foco se posiciona en TextBox2
<DockPanel Margin="0,10,3,3" Grid.Column="0" Grid.Row="5">
<TextBox Name="textBox2" Width="100" Height="20"/>
<Label Target="{Binding ElementName=textBox2}">
<AccessText FontSize="12" FontWeight="Bold">E_ditar</AccessText>
</Label>
</DockPanel>
<TextBox Name="textBox3" Width="100" Height="20" Canvas.Top="30" />
TextBox
Representa un control que se puede utilizar para mostrar o editar texto sin formato.
<TextBox Name="tbSelectSomeText" Width="100" >
Algún Texto</TextBox>
TextBlock
Proporciona un control ligero que permite mostrar pequeños fragmentos de contenido
dinámico. TextBlock se ha diseñado para que sea ligero y se ha preparado específicamente
para integrar pequeños fragmentos de contenido dinámico en una interfaz de usuario (UI).
TextBlock proporciona un rendimiento óptimo en la presentación de líneas únicas y un
rendimiento apropiado en la presentación de hasta unas pocas líneas de contenido.
<TextBlock Name="textBlock1" TextWrapping="Wrap" FontSize="14">
<Bold>TextBlock</Bold> esta diseñado para ser <Italic>liviano</Italic>
</TextBlock>
Button
Su propiedad de contenido es Content. Su evento principal es Click.
En el siguiente ejemplo se muestra un botón que contiene una imagen y un texto formado por
controles contenidos.

42
<Button Name="btn5" Canvas.Left="64" Canvas.Top="17" Width="129" Height="33"
Click="btnAceptar_Click" >
<StackPanel Orientation="Horizontal" Width="Auto">
<Image Source="ms.jpg" Width="20" Height="20"></Image>
<TextBlock Text="Aceptar" TextAlignment="Right" VerticalAlignment="Center"
Width="69"></TextBlock>
</StackPanel>
</Button>
ListBox - ComboBox
El ListBox permite mostrar una lista de ítems desplegada. Las propiedades de contenido son
las colecciones Items e ItemsSource. La propiedad SelectionMode permite establecer cuantos
ítems pueden ser seleccionados. La opciones son Single (1 solo ítem), Multiple (varios ítems) y
Extended (se pueden seleccionar varios ítems consecutivos usando la tecla Shift o no
consecutivos usando la tecla Ctrl).
El ComboBox permite ocultar y desplegar la lista de ítems. Las propiedades IsEditable e
IsReadOnly especifican cómo se comporta ComboBox cuando el usuario escribe una cadena
para seleccionar un elemento o copia y pega un valor en el cuadro de texto.
En el siguiente ejemplo vemos el uso de un ListBox sencillo.
<ListBox Name="lb" Width="100" Height="55" SelectionChanged="PrintText"
SelectionMode="Single">
<ListBoxItem>Item 1</ListBoxItem>
</ListBox>
Estos controles permiten también el uso de listas con contengan CheckBox, imágenes, etc.
como controles contenidos para cada ítem.
<ListBox Name="lb" Width="251" Height="119" SelectionMode="Single"
SelectionChanged="lb_SelectionChanged">
<ListBoxItem Background="LightCoral" FontFamily="Verdana" FontSize="12"
FontWeight="Bold">
<CheckBox Name="chk1">
<StackPanel Orientation="Horizontal">
<Image Source="ms.jpg" Height="30"></Image>
<TextBlock Text="Item 1" Width="174"></TextBlock>
</StackPanel>
</CheckBox>
</ListBoxItem>
<ListBoxItem Background="Green" FontFamily="Verdana" FontSize="12"
FontWeight="Bold">
<CheckBox Name="chk2">

Manual wpf

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Último

Último (20)

Manual wpf