manual 08 - windows presentation foundation parte 2.pdf

Manual de Windows Presentation Foundation

MCT: Luis Dueas Pag 1 de 473

INDICE GENERAL 4. Controles 4.1. Informacin General sobre Controles 4.2. Tutorial: Crear un Botn Animado mediante el uso de XAML 4.3. Personalizacin de Controles 4.3.1. Informacin General sobre la Creacin de Controles 4.3.2. Instrucciones para el Diseo de Controles con Estilos 4.3.3. Adornos 4.3.3.1. Informacin General sobre Adornos 4.3.3.2. Temas Cmo de Adornos 4.3.3.2.1. Cmo: Implementar un Adorno 4.3.3.2.2 Cmo: Enlazar un Adorno a un Elemento 4.3.3.2.3. Cmo: Incluir Adornos en los Elementos Secundarios de un

Panel 4.3.3.2.4. Cmo: Quitar un Adorno de un Elemento 4.3.3.2.5. Cmo: Quitar Todos los Adornos de un Elemento

4.3.4. Ejemplos de ControlTemplate 4.3.4.1. Ejemplo de ControlTemplate de Button 4.3.4.2. Ejemplo de ControlTemplate de CheckBox 4.3.4.3. Ejemplo de ControlTemplate de ComboBox 4.3.4.4. Ejemplo de ControlTemplate de ComboBoxItem 4.3.4.5. Ejemplo de ControlTemplate de ContextMenu 4.3.4.6. Ejemplo de ControlTemplate para DocumentViewer 4.3.4.8. Ejemplo de ControlTemplate de Frame 4.3.4.9. Ejemplo de ControlTemplate de GroupBox 4.3.4.10. Ejemplo de ControlTemplate de Label 4.3.4.11. Ejemplo de ControlTemplate de ListBox 4.3.4.12. Ejemplo de ControlTemplate de ListBoxItem 4.3.4.13. Ejemplo de ControlTemplate de ListView 4.3.4.14. Ejemplo de ControlTemplate de ListViewItem 4.3.4.15. Ejemplo de ControlTemplate de Menu 4.3.4.16. Ejemplo de ControlTemplate para MenuItem 4.3.4.17. Ejemplo de ControlTemplate de NavigationWindow 4.3.4.18. Ejemplo de ControlTemplate para ProgressBar 4.3.4.19. Ejemplo de ControlTemplate de RadioButton 4.3.4.20. Ejemplo de ControlTemplate de ScrollBar 4.3.4.21. Ejemplo de ControlTemplate de ScrollViewer 4.3.4.22. Ejemplo de ControlTemplate de Slider 4.3.4.23. Ejemplo de ControlTemplate de StatusBar 4.3.4.24. Ejemplo de ControlTemplate de TabControl 4.3.4.25. Ejemplo de ControlTemplate de TabItem 4.3.4.26. Ejemplo de ControlTemplate de TextBox 4.3.4.27. Ejemplo de ControlTemplate de ToolBar 4.3.4.28. Ejemplo de ControlTemplate de ToolTip 4.3.4.29. Ejemplo de ControlTemplate de TreeView 4.3.4.30. Ejemplo de ControlTemplate para TreeViewItem 4.3.4.31. Ejemplo de ControlTemplate de Window 4.3.5. Automatizacin de la Interfaz de Usuario de un Control Personalizado de WPF 4.4. Agrupar Controles por Categora 4.5. Modelos de Contenido 4.5.1. Modelo de Contenido de WPF 4.5.2. Informacin General sobre el Modelo de Contenido de Controles 4.5.3. Informacin General sobre el Modelo de Contenido de Decorador 4.5.4. Informacin General sobre el Modelo de Contenido de Paneles 4.5.5. Informacin General sobre el Modelo de Contenido de TextBlock 4.5.6. Informacin General sobre el Modelo de Contenido de TextBox 5. Datos 5.1. Enlace de Datos 5.1.1. Informacin General sobre el Enlace de Datos



5.1.2. Informacin General sobre Orgenes de Enlaces 5.1.3. Informacin General sobre Plantillas de Datos 5.1.4. Informacin General sobre Declaraciones de Enlaces 5.1.5. Temas Cmo sobre Enlace de Datos 5.1.5.1. Cmo: Crear un Enlace Sencillo 5.1.5.2. Cmo: Especificar el Origen de Enlace 5.1.5.3. Cmo: Hacer que los Datos estn Disponibles para el Enlace XAML

5.1.5.4. Cmo: Controlar Cundo el Texto de TextBox Actualiza el Origen 5.1.5.5. Cmo: Especificar la Direccin del Enlace 5.1.5.6. Cmo: Enlazar a una Coleccin y Mostrar Informacin Basada en la Seleccin 5.1.5.7. Cmo: Enlazar a una Enumeracin 5.1.5.8. Cmo: Enlazar las Propiedades de dos Controles 5.1.5.9. Cmo: Implementar la Validacin de Enlaces 5.1.5.10. Cmo: Implementar Lgica de Validacin en Objetos Personalizados 5.1.5.11. Cmo: Obtener el Objeto de Enlace a Partir de una Propiedad de Destino Enlazada 5.1.5.12. Cmo: Implementar una CompositeCollection 5.1.5.13. Cmo: Convertir Datos Enlazados 5.1.5.14. Cmo: Crear un Enlace en Cdigo 5.1.5.15. Cmo: Obtener la Vista Predeterminada de Recoleccin de Datos 5.1.5.16. Cmo: Navegar por los Objetos de una Coleccin de Datos mediante CollectionView 5.1.5.17. Cmo: Filtrar Datos en una Vista 5.1.5.18. Cmo: Ordenar Datos en una Vista 5.1.5.19. Cmo: Ordenar y Agrupar Datos mediante una Vista en XAML 5.1.5.20. Cmo: Usar el Patrn Principal Detalle con datos Jerrquicos 5.1.5.21. Cmo: Usar el Patrn Principal Detalle con Datos XML Jerrquicos 5.1.5.22. Cmo: Generar un Valor Basado en una Lista de Elementos Enlazados 5.1.5.23. Cmo: Implementar la Notificacin de Cambio de Propiedad 5.1.5.24. Cmo: Crear y Enlazar a una Coleccin ObservableCollection 5.1.5.25. Cmo: Implementar PriorityBinding 5.1.5.26. Cmo: Enlazar a Datos XML mediante XMLDataProvider y Consultas XPath 5.1.5.27. Cmo: Enlazar a los Resultados de una Consulta LINQ para XML, XDocument o XElement 5.1.5.28. Cmo: Usar Espacios de Nombres XML en el Enlace de Datos 5.1.5.29. Cmo: Enlazar a un Origen de Datos ADO .NET 5.1.5.30. Cmo: Enlazar a un Mtodo 5.1.5.31. Cmo: Configurar la Notificacin de Actualizaciones de Enlaces 5.1.5.32. Cmo: Borrar Enlaces 5.1.5.33. Cmo: Buscar Elementos Generados por un Objeto DataTemplate 5.1.5.34. Cmo: Enlazar a un Servicio Web 5.1.5.35. Cmo: Enlazar a los Resultados de una Consulta LINQ

5.2. Arrastrar y Colocar 5.2.1. Informacin General sobre la Funcin de Arrastrar y Colocar 5.2.2. Temas Cmo de Arrastrar y Colocar 5.2.2.1. Cmo: Usar un Control Thumb para Habilitar la Accin de Arrastrar 5.2.2.2. Cmo: Crear un Objeto de Datos 5.2.2.3. Cmo: Determinar si un Formato de Datos est Presente en un

Objeto de Datos 5.2.2.4. Cmo: Mostrar los Formatos de Datos en un Objeto de Datos 5.2.2.5. Cmo: Recuperar Datos en un Formato Concreto 5.2.2.6. Cmo: Almacenar Varios Formatos de Datos en un Objeto de Datos

6. Documentos 6.1. Documentos en Windows Presentation Foundation 6.2. Almacenamiento y Serializacin de Documentos 6.3. Anotaciones 6.3.1. Informacin General sobre Anotaciones



6.3.2. Esquema en Anotaciones 6.4. Contenido Dinmico 6.4.1. Informacin General sobre Documentos Dinmicos 6.4.2. Informacin General sobre el Modelo de Contenido de TextElement 6.4.3. Informacin General sobre Tablas 6.4.4. Temas "Cmo..." de Elementos de Contenido Dinmico 6.4.4.1. Cmo: Ajustar el Espaciado entre Prrafos 6.4.4.2. Cmo: Generar una Tabla mediante Programacin 6.4.4.3. Cmo: Cambiar la Propiedad FlowDirection de Contenido mediante

Programacin 6.4.4.4. Cmo: Cambiar la Propiedad TextWrapping mediante Programacin 6.4.4.5. Cmo: Definir una Tabla con XAML 6.4.4.6. Cmo: Modificar la Tipografa de Texto 6.4.4.7. Cmo: Habilitar el Recorte de Texto 6.4.4.8. Cmo: Insertar un Elemento en Texto mediante Programacin 6.4.4.9. Cmo: Manipular Elementos de Contenido Dinmico mediante la Propiedad Blocks 6.4.4.10. Cmo: Manipular Elementos de Contenido Dinmico mediante la Propiedad Inlines 6.4.4.11. Cmo: Manipular un Objeto FlowDocument mediante la Propiedad Blocks 6.4.4.12. Cmo: Manipular las Columnas de una Tabla mediante la Propiedad Columns 6.4.4.13. Cmo: Manipular Grupos de Filas de una Tabla mediante la Propiedad RowGroups 6.4.4.14. Cmo: Usar Elementos de Contenido Dinmico 6.4.4.15. Cmo: Usar Atributos de Separacin de Columnas FlowDocument

6.5. Tipografa 6.5.1. Tipografa en Windows Presentation Foundation 6.5.2. Informacin General sobre ClearType 6.5.3. Configuracin del Registro de ClearType 6.5.4. Dibujar Texto con Formato 6.5.5. Formato de Texto Avanzado 6.5.6. Fuentes en WPF 6.5.6.1. Caractersticas de las Fuentes OpenType 6.5.6.2. Empaquetar Fuentes con Aplicaciones 6.5.6.3. Paquete de Fuentes OpenType de Ejemplo 6.5.6.4. Temas Cmo sobre Fuentes 6.5.6.4.1. Cmo: Enumerar Fuentes del Sistema 6.5.6.4.2. Cmo: Utilizar la Clase FontSizeConverter 6.5.7. Glifos 6.5.7.1. Introduccin al Objeto GlyphRun y al Elemento Glyphs 6.5.7.2. Dibujar Texto mediante Grifos 6.5.8. Temas Cmo sobre Tipografa 6.5.8.1. Cmo: Crear una Decoracin de Texto 6.5.8.2. Cmo: Usar una Decoracin de Texto con un Hipervnculo 6.5.8.3. Cmo: Aplicar Transformaciones a Texto 6.5.8.4. Cmo: Aplicar Animaciones a Texto 6.5.8.5. Cmo: Crear un Efecto de Texto 6.5.8.6. Cmo: Crear Texto con Sombreado 6.5.8.7. Cmo: Crear Texto con Contorno 6.5.8.8. Cmo: Crear una Animacin de PathGeometry para Texto 6.5.8.9. Cmo: Dibujar Texto en el Fondo de un Control 6.5.8.10. Cmo: Dibujar Texto en un Elemento Visual 6.5.8.11. Cmo: Establecer Propiedades Tipogrficas 6.5.8.12. Cmo: Usar Caracteres Especiales en XAML 6.6. Imprimir y Administracin de Sistemas de Impresin 6.6.1. Informacin General sobre Impresin 6.6.2. Temas Cmo de Impresin 6.6.2.1. Cmo: Invocar un Cuadro de Dilogo de Impresin



6.6.2.2. Cmo: Clonar una Impresora 6.6.2.3. Cmo: Diagnosticar Trabajos de Impresin Problemticos 6.6.2.4. Cmo: Detectar si un Trabajo de Impresin se puede Imprimir en esta

Hora del Da 6.6.2.5. Cmo: Enumerar un Subconjunto de Colas de Impresin 6.6.2.6. Cmo: Ampliar el Esquema de Impresin y Crear Nuevas Clases del Sistema de Impresin 6.6.2.7. Cmo: Obtener Propiedades de un Objeto de Sistema de Impresin sin Reflexin 6.6.2.8. Cmo: Imprimir mediante Programacin Archivos XPS 6.6.2.9. Cmo: Supervisar de forma Remota el Estado de las Impresoras 6.6.2.10. Cmo: Validar y Combinar Elementos PrintTicket

7. Grficos y Multimedia 7.1. Informacin General sobre Caractersticas de Grficos, Animacin y Multimedia en WPF 7.2. Informacin General sobre la Representacin de Grficos en WP 7.3. Grficos 7.3.1. Efectos de Mapa de Bits 7.3.1.1. Informacin General sobre Efectos de Mapa de Bits 7.3.1.2. Temas Cmo de Efectos de Mapa de Bits 7.3.1.2.1. Cmo: Crear un Efecto de Resplandor en el Margen

Externo de un Objeto 7.3.1.2.2. Cmo: Animar un Efecto de Resplandor 7.3.1.2.3. Cmo: Animar Efectos de Mapa de Bits 7.3.1.2.4. Cmo: Aplicar un Efecto de Desenfoque a un Objeto Visual 7.3.1.2.5. Cmo: Animar un Efecto Visual de Desenfoque 7.3.1.2.6. Cmo: Crear un Efecto Visual de Sombra Paralela 7.3.1.2.7. Cmo: Animar un Efecto Visual de Sombra Paralela 7.3.1.2.8. Cmo: Crear un Efecto Visual con Bisel 7.3.1.2.9. Cmo: Animar un Efecto Visual con Bisel 7.3.1.2.10. Cmo: Crear un Efecto Visual con Relieves 7.3.1.2.11. Cmo: Animar un Efecto Visual con Relieves 7.3.1.2.12. Cmo: Crear Varios Efectos Visuales 7.3.1.2.13. Cmo: Animar Varios Efectos Visuales 7.3.1.2.14. Cmo: Usar un Efecto Visual Personalizado 7.3.1.2.15. Cmo: Aplicar un Efecto a Parte de una Imagen 7.3.1.2.16. Cmo: Animar un Efecto dentro de un BitmapEffectGroup

7.3.2. Pinceles 7.3.2.1. Informacin General sobre Pinceles de WPF 7.3.2.2. Informacin General sobre la Transformacin de Pinceles 7.3.2.3. Informacin General sobre las Mscaras de Opacidad 7.3.2.4. Informacin General sobre el Dibujo con Colores Slidos y

Degradados 7.3.2.5. Pintar con Imgenes, Dibujos y Elementos Visuales 7.3.2.6. Informacin General sobre Objetos TileBrush 7.3.2.7. Temas Cmo de Pinceles 7.3.2.7.1. Cmo: Animar el Color o la Opacidad de un Objeto

SolidColorBrush 7.3.2.7.2. Cmo: Animar la Posicin o Color de un Punto de Degradado 7.3.2.7.3. Cmo: Crear una Reflexin 7.3.2.7.4. Cmo: Crear Patrones de Mosaico diferentes con un Objeto TileBrush 7.3.2.7.5. Cmo: Definir un Lpiz 7.3.2.7.6. Cmo: Pintar un Area con un Dibujo 7.3.2.7.7. Cmo: Pintar un Area con una Imagen 7.3.2.7.8. Cmo: Pintar un Area con un Degradado Lineal 7.3.2.7.9. Cmo: Pintar un Area con un Degradado Radial 7.3.2.7.10. Cmo: Pintar un Area con un Color Slido 7.3.2.7.11. Cmo: Pintar un Area con un Pincel del Sistema 7.3.2.7.12. Cmo: Pintar un Area con un Vdeo



7.3.2.7.13. Cmo: Pintar un Area con un Objeto Visual 7.3.2.7.14. Cmo: Conservar la Relacin de Aspecto de una Imagen utilizada como Fondo 7.3.2.7.15. Cmo: Establecer la Alineacin Horizontal y Vertical de TileBrush 7.3.2.7.16. Cmo: Establecer el Tamao del Mosaico de un TileBrush 7.3.2.7.17. Cmo: Transformar un Pincel 7.3.2.7.18. Cmo: Usar Colores del Sistema en un Degradado

7.3.3. Dibujos 7.3.3.1. Informacin General sobre Objetos Drawing 7.3.3.2. Temas Cmo de Dibujo 7.3.3.2.1. Cmo: Aplicar un Objeto BitmapEffect a un Dibujo 7.3.3.2.2. Cmo: Aplicar un Objeto GuidelineSet a un Dibujo 7.3.3.2.3. Cmo: Aplicar una Mscara de Opacidad a un Dibujo 7.3.3.2.4. Cmo: Aplicar una Transformacin a un Dibujo 7.3.3.2.5. Cmo: Recortar un Dibujo 7.3.3.2.6. Cmo: Controlar la Opacidad de un Dibujo 7.3.3.2.7. Cmo: Crear un Dibujo Compuesto 7.3.3.2.8. Cmo: Crear un Objeto GeometryDrawing 7.3.3.2.9. Cmo: Dibujar una Imagen usando Objeto ImageDrawing 7.3.3.2.10. Cmo: Reproducir Elementos Multimedia con un Objeto

VideoDrawing 7.3.3.2.11. Cmo: Usar un Dibujo como el Origen de una Imagen

7.3.4. Geometras 7.3.4.1. Sintaxis de Marcado de Trazados 7.3.4.2. Informacin General sobre Geometra 7.3.4.3. Temas Cmo de Objetos de Geometra 7.3.4.3.1. Cmo: Animar una Regin de Recorte 7.3.4.3.2. Cmo: Animar un EllipseGeometry 7.3.4.3.3. Cmo: Animar el Tamao de un Objeto ArcSegment 7.3.4.3.4. Cmo: Controlar el Relleno de una Forma Compuesta 7.3.4.3.5. Cmo: Crear una Regin de Recorte 7.3.4.3.6. Cmo: Crear una Geometra Combinada 7.3.4.3.7. Cmo: Crear una Forma Compuesta 7.3.4.3.8. Cmo: Crear una Curva Bzier Cbica 7.3.4.3.9. Cmo: Crear una Lnea mediante la Clase LineGeometry 7.3.4.3.10. Cmo: Crear un Segmento de Lnea en una Clase

PathGeometry 7.3.4.3.11. Cmo: Crear una Forma mediante una Clase PathGeometry 7.3.4.3.12. Cmo: Crear una Forma utilizando StreamGeometry 7.3.4.3.13. Cmo: Crear una curva Bzier Cuadrtica 7.3.4.3.14. Cmo: Crear un Arco Elptico 7.3.4.3.15. Cmo: Crear Varios Subtrazados en un PathGeometry 7.3.4.3.16. Cmo: Definir un Rectngulo usando una Clase RectangleGeometry 7.3.4.3.17. Cmo: Redondear las Esquinas de un RectangleGeometry



4. Controles

Windows Presentation Foundation (WPF) proporciona una completa biblioteca de controles que permiten el

desarrollo de interfaz de usuario (UI), la visualizacin de documentos y la serializacin de entrada manuscrita

digital.

4.1. Informacin General sobre Controles

Windows Presentation Foundation (WPF) se distribuye con muchos de los componentes de interfaz de usuario

comunes que se utilizan en casi todas las aplicaciones para Windows, como Button , Label , TextBox , Menu y

ListBox . Histricamente, estos objetos se denominan controles. Aunque en el WPF SDK se contina utilizando el

trmino "control" para denominar genricamente cualquier clase que representa un objeto visible de una

aplicacin, es imp ortante tener en cuenta que una clase no necesita heredar de la clase Control para tener una

presencia visible. Las clases que heredan de la clase Control contienen una ControlTemplate , que permite al

consumidor de un control cambiar radicalmente el aspect o de ste sin tener que crear una nueva subclase. En

este tema se describen los usos ms comunes de los controles (tanto los que heredan de la clase Control como

los que no) en WPF.

Crear una instancia de un control

Puede agregar un control a una aplicacin utilizando Lenguaje de marcado de aplicaciones extensible (XAML) o

cdigo. En el ejemplo siguiente se muestra cmo crear una apli cacin simple que pide al usuario su nombre y

su apellido. En este ejemplo se crean seis controles: dos etiquetas, dos cuadros de texto y dos botones, en

XAML. Todos los controles se pueden crear de igual forma.

Enter y our first name: Enter your last name: View message Clear Name

En el ejemplo siguiente se crea la misma aplicacin mediante cdigo. Para may or brevedad, la creacin de Grid,

grid1 se ha excluido del ejemplo. grid1 tiene las mismas definiciones de columnas y filas que en el ejemplo

XAML anterior.

Private firstNameLabel As Label Private lastNameLabel As Label Private firstName As TextBox Private lastName As TextBox Private submit As Button Private clear As Button Sub CreateControls() firstNameLabel = New Label() firstNameLabel.Content = "Enter your first name:" grid1.Children.Add(firstNameLabel) firstName = New TextBox() first Name.Margin = New Thickness(0, 5, 10, 5) Grid.SetColumn(firstName, 1) grid1.Children.Add(firstName) lastNameLabel = New Label() lastNameLabel.Content = "Enter your last name:" Grid.SetRow(lastNameLabel, 1) grid1.Children.Add(lastNam eLabel) lastName = New TextBox()



lastName.Margin = New Thickness(0, 5, 10, 5) Grid.SetColumn(lastName, 1) Grid.SetRow(lastName, 1) grid1.Children.Add(lastName) submit = New Button() submit.Content = "View message" Grid.SetRo w(submit, 2) grid1.Children.Add(submit) clear = New Button() clear.Content = "Clear Name" Grid.SetRow(clear, 2) Grid.SetColumn(clear, 1) grid1.Children.Add(clear) End Sub 'CreateControls

Cambiar el aspecto de un control

Es comn cambiar el aspecto de un control para ajustarlo a la apariencia y funcionamiento de la aplicacin.

Puede cambiar el aspecto de un con trol realizando una de las acciones siguientes, dependiendo de lo que desea

lograr:

Cambiar el valor de una propiedad del control.

Crear un Style para el control.

Crear una nueva ControlTemplate para el control.

Cambiar el valor de una propiedad de un cont rol

Muchos controles tienen propiedades que permiten cambiar el aspecto del control, como el fondo ( Background )

de un botn ( Button ). Puede establecer las propiedades de valor en XAML y mediante cdigo. En el ejemplo

siguiente se establecen las propiedades Background , FontSize y FontWeight de un Button en XAML.

View message

En el ejemplo siguiente se establecen las mismas propiedades mediante cd igo.

Dim buttonBrush As New LinearGradientBrush() buttonBrush.StartPoint = New Point(0, 0.5) buttonBrush.EndPoint = New Point(1, 0.5) buttonBrush.GradientStops.Add( New GradientStop(Colors.Green, 0)) buttonBrush.GradientStops.Add( New GradientStop(Colors.Whi te, 0.9)) submit.Background = buttonBrush submit.FontSize = 14 submit.FontWeight = FontWeights.Bold

Crear un estilo para un control

WPF permite especificar el aspecto de los controles de manera global, en lugar de establecer las propiedades en

cada instan cia en la aplicacin, creando un Style . En el ejemplo siguiente se crea un Style que se aplica a

Button en la aplicacin. Las definiciones de Style se suelen definir en XAML en un ResourceDictionary , como la

propiedad Resources de FrameworkElement .

Tambin puede aplicar un estilo nicamente a determinados controles de un tipo especfico asignando una clave

al estilo y especificando esa la clave en la propiedad Style del control.

Crear una plantilla de control

Style permite establecer las propiedades en varios controles a la vez, pero en ocasiones puede ser conveniente

personalizar el aspecto de un Control ms all de lo que se puede hacer creando un Style . Las clases que

heredan de la clase Control tienen una ControlTemplate , que define la estructura y el aspecto de un Control . La



propiedad Template de Control es pblica, por lo que puede dar una ControlTemp late a un Control diferente de

la predeterminada. Con frecuencia, se puede especificar una ControlTemplate nueva para un Control en lugar

de heredar de un control para personalizar el aspecto de Control .

Tomemos uno de los controles comunes, Button . El com portamiento primario de Button es permitir que una

aplicacin realice una accin cuando el usuario hace clic en l. De manera predeterminada, Button aparece en

WPF como un rectngulo elevado. Al programar una aplicacin, puede que quiera aprovechar el

comp ortamiento de Button , es decir, controlar el evento de hacer clic en el botn, pero que desee cambiar el

aspecto del botn ms all de lo que es posible cambiando las propiedades del mismo. En este caso, puede

crear una nueva ControlTemplate .

En el ejemplo siguiente se crea un objeto ControlTemplate para un control Button . ControlTemplate crea Button

con esquinas redondeadas y fondo degradado. ControlTemplate contiene un Border cuyo Background es

LinearGradientBrush con dos objetos GradientStop . El primer GradientStop utiliza el enlace de datos para

enlazar la propiedad Color de GradientStop al color de fondo del botn. Al establecer la propiedad Background

de Button , el color de ese valor se utilizar como primer GradientStop . En el ejemplo tambin se crea un

Trigger que cambia el aspecto de Button cuando IsPressed es true.

... View message

Nota:

La propiedad Background de Button debe estar establecida en SolidColorBrush para que ejemplo funcione correctamente.

Suscribirse a eventos

Puede suscribirse a un evento de un control utilizando XAML o cdigo, pero los eventos nicamente se pueden

controlar mediante cdigo. En el ejemplo siguiente se muestra cmo su scribirse al evento Click de un Button .

View message AddHandler submit.Click, AddressOf submit_Click

En el ejemplo siguiente se controla el even to Click de un control Button .

Private Sub submit_Click( ByVal sender As Object , ByVal e As RoutedEventArgs) MessageBox.Show( "Hello, " + firstName.Text + " " + lastName.Text) End Sub 'submit_Click

Contenido enriquecido en los controles



La mayora de las clases que heredan de la clase Control tienen la capacidad de incluir contenido enriquecido.

Por ejemplo, un control Label puede contener cualquier objeto, como una cadena, una Image o un Panel . Las

clases siguientes proporcionan compatibilidad con el contenido enriquecido y actan como clases base para la

mayora de los controles en WPF.

ContentControl : algunos ejemplos de clases q ue heredan de esta clase son Label , Button y ToolTip .

ItemsControl : algunos ejemplos de clases que heredan de esta clase son ListBox , Menu y StatusBar .

HeaderedContentControl : algunos ejemplos de clases que heredan de esta clase son TabItem ,

GroupBox y Expander .

HeaderedItemsControl : algunos ejemplos de clases que heredan de esta clase son MenuItem ,

TreeViewItem y ToolBar .

4.2. Tutorial: Crear un Botn Animado mediante el uso de XAML

El objetivo de este tutorial es aprender a crear un botn animado para us arlo en una aplicacin Windows

Presentation Foundation (WPF). Este tutorial utiliza estilos y una plantilla para crear un recurso de botn

personalizado que permite la reutilizacin de cdigo y la separacin de la lgica del botn de la declaracin del

bot n. Este tutorial est escrito completamente en Lenguaje de marcado de aplicaciones extensible (XAML).

Nota importante:

Este tutorial sirve como gua en los pasos necesarios para crear la aplicacin escribiendo, o copiando y pegando Lenguaje de marcado de aplicaciones extensible (XAML) en Microsoft Visual Studio. Si prefiere aprender a usar una herramienta de diseo (Microsoft Expression Blend) par a crear la misma aplicacin,

La figura siguiente muestra los botones acabados.

Crear botones bsicos

Empecemos por crear un nuevo proyecto y agregar unos botones a la ventana.

Para crear un nuevo proyecto de WPF y agregar botones a la ventana

1. Inicie Visual Studio.

2. Cree un nuevo proyecto de WPF: En el men Archivo, seale a Nuevo y, a continuacin, haga clic en

Proyecto. Busque la plantilla Aplicacin para Windows (WPF) y asigne al proyecto el nombre

"AnimatedButton". Esto crear el esqueleto para la aplicac in.

3. Agregue los botones predeterminados bsicos: la plantilla proporciona todos los archivos que necesita

para este tutorial. Abra el archivo Window1.xaml haciendo doble clic en l en el Explorador de soluciones.

De forma predeterminada, hay un elemento Grid en Window1.xaml. Quite el elemento Grid y agregue

unos botones a la pgina Lenguaje de marcado de aplicaciones extensible (XAML) escribiendo o copiando

y pegando el siguiente cdigo resaltado en Window1.xaml:



Button 1 Button 2 Button 3

4. Presione F5 para ejecutar la aplicacin; debera ver un conjunto de botones parecido a la il ustracin

siguiente.

5. Ahora que ha creado los botones bsicos, ha terminado de trabajar en el archivo Window1.xaml. El

resto del tutorial se centra en el archivo app.xaml, definiendo estilos y una plantilla para los botones.

Establecer propiedades bsicas

A continuacin, establezcamos algunas propiedades de estos botones para controlar su aspecto y su diseo. En

lugar de establecer individualmente las propiedades de los botones, utilizar recursos para definir las

propiedades de botn de toda la aplicacin. Lo s recursos de aplicacin son conceptualmente similares a Hojas

de estilos en cascada (CSS) externas para pginas web; sin embargo, los recursos son mucho ms eficaces que

Hojas de estilos en cascada (CSS), como ver al final de este tutorial.

Para utilizar estilos para establecer propiedades bsicas en los botones

1. Defina un bloque Application.Resources: abra app.xaml y agregue el marcado resaltado siguiente si

an no est all:

2. El mbito del recurso lo determina dnde se defina el recurso. Definir recursos en

Application.Resoureses en el archivo app.xaml permite utilizar el recurso en cualquier parte de la

aplicacin.

3. Cree un estilo y defina los valores de las propiedades bs icas con l: agregue el marcado siguiente al

bloque Application.Resources. Este marcado crea un objeto Style que se aplica a todos los botones de la

aplicacin, estableciendo la propiedad Width de los botones en 90 y Margin en 10:

4. La propiedad TargetType especifica que el estilo se aplica a todos los objetos de tipo Button . Cad a

Setter establece un valor de la propiedad diferente para el objeto Style . Por consiguiente, en este punto

cada botn de la aplicacin tiene un ancho de 90 y un margen de 10. Si presiona F5 para ejecutar la

aplicacin, ver la ventana siguiente.



5. Hay mucho ms que puede hacer con estilos, incluidas diversas maneras de ajustar con precisin a

qu objetos se destinan, especificar val ores de propiedad complejos e incluso utilizar estilos como entrada

para otros estilos.

6. Establezca un valor de propiedad de estilo en un recurso: los recursos permiten reutilizar fcilmente

objetos y valores que se definen con frecuencia. Es especialmente til definir valores complejos utilizando

recursos, para hacer el cdigo ms modular. Agregue el marcado resaltado siguiente a app.xaml.

7. Directamente bajo el bloque Application.Resources, cre un recurso llamado "GrayBlueGradient Brush".

Este recurso define un degradado horizontal. Este recurso se puede utilizar en cualquier parte de la

aplicacin como un valor de propiedad, incluso dentro del establecedor de estilo del botn para la

propiedad Background . Ahora, todos los botones t ienen un valor de propiedad Background de este

degradado.

8. Presione F5 para ejecutar la aplicacin. Debe tener este aspecto:

Crear una plantilla que define la apariencia del botn

En esta seccin crear una plantilla que personaliza la apariencia (presentaci n) del botn. La presentacin del

botn se compone de varios objetos, que incluyen rectngulos y otros componentes para dar una apariencia

nica al botn.

Hasta ahora, el control de la apariencia de los botones de la aplicacin se ha confinado a cambiar p ropiedades

del botn. Qu ocurre si desea realizar cambios ms radicales en la apariencia del botn? Las plantillas

permiten un control eficaz sobre la presentacin de un objeto. Dado que las plantillas se pueden utilizar dentro

de estilos, puede aplicar una plantilla a todos los objetos a los que se aplica el estilo (en este tutorial, el botn).



Para utilizar la plantilla para definir la apariencia del botn

1. Configure la plantilla: dado que los controles como Button tienen una propiedad Template , puede

definir el valor de la propiedad de la plantilla igual que los dems valores de propiedades que hemos

establecido en un objeto Style , utilizando un objeto Setter . Agregue el marcado resaltado siguiente al

estilo de botn.

2. Modifique la presentacin del botn: en este punto, debe definir la plantilla. Agregue el siguiente

marcado resaltado: Este marcado especifica dos elementos Rectangle con bordes redondeados, seguidos

por un control DockPanel . El control DockPanel se utiliza para hospedar el objeto ContentPresenter del

botn. Un objeto ContentPresenter muestra el conteni do del botn. En este tutorial, el contenido es texto

("Button 1", "Button 2", "Button 3"). Todos los componentes de la plantilla (los rectngulos y el control

DockPanel ) se disponen dentro de un control Grid .

3. Presione F5 para ejecutar la aplicacin. Debe tener este aspecto:

4. Agregue un efecto de vidrio a la plantilla: a continuacin agregar el vidrio. Primero cre e algunos

recursos que creen un efecto de degradado de vidrio. Agregue estos recursos de degradado en cualquier

punto del bloque Application.Resources:



5. Estos recursos se utilizan como propiedad Fill para un rectngulo que insertamos en el control Grid de

la plantilla de botn. Agregue el siguiente marcado resaltado a la plantilla.

6. Observe que la propiedad Opacity del rectngulo con la propiedad x:Name de "glassCube" es 0, por lo

que al ejecutar el ejemplo no ver el rectngulo de vidrio superpuesto. Esto se debe a que agregaremos

despus a la plantilla los desencadenadores para cuando el usuario interacte con el botn. Sin embargo,

puede ver la apariencia que tiene ahora el botn cambiando el valor Opacity a 1 y ejecutando la

aplicacin. Vea la ilustracin siguiente. Antes de continuar con el paso siguient e, vuelva a establecer

Opacity en 0.

Crear la interactividad del botn



En esta seccin, crear desencadenadores de propiedad y desencadenadores de evento para cambiar valores de

propiedad y ejecutar animaciones en respuesta a acciones del usuario tales como m over el puntero del mouse

sobre el botn y hacer clic.

Una manera fcil de agregar interactividad (entrada de mouse, salida de mouse, clic, etc.) es definir los

desencadenadores dentro de la plantilla o del estilo. Para crear un objeto Trigger , defina una propiedad

"condicin" tal como: el valor de la propiedad IsMouseOver del botn es igual a true. A continuacin, defina

establecedores (acciones) que tengan lugar cuando la condicin de activacin sea verdadera.

Para crear la interactividad del botn

1. Agre gue desencadenadores de plantilla: agregue el marcado resaltado a la plantilla.

2. Agregue desencadenadores de propiedad: agregue el marcado resaltado al bloque ControlTemplate.

Triggers:



3. Presione F5 para ejecutar la aplicacin y ver el efecto al pasar el puntero del mouse sobre los botones.

4. Agregue un desencadenador de foco: a continuaci n, agregaremos algunos establecedores similares

para administrar el caso en el que el botn tenga el foco (por ejemplo, despus de que el usuario haga

clic en l).

5. Presione F5 para ejecutar la aplicacin y haga clic en uno de los botones. Observa que el botn

permanece resaltado despus de hacer clic en l, porque todava tiene el foco. Si hace clic en otro botn,

el nue vo botn obtendr el foco mientras el ltimo lo pierde.

6. Agregue animaciones para MouseEnter y MouseLeave : a continuacin, agregamos algunas

animaciones a los desencadenadores. Agregue el marcado siguiente en cualquier punto del bloque

ControlTemplate.Trig gers.

7. El rectngulo de vidrio se reduce cuando el puntero del mouse pasa sobre el botn y vuelve al tamao

normal cuando el puntero sale.



8. Hay dos animaciones que se desencadenan cuando el puntero pasa sobre el botn (cuando se provoca

el evento MouseEnter ). Estas animaciones re ducen el rectngulo de vidrio a lo largo de los ejes X e Y.

Observe las propiedades de los elementos DoubleAnimation , Duration y By . La propiedad Duration

especifica que la animacin se produce durante medio segundo, y By especifica que el vidrio se reduce un

10%.

9. El segundo desencadenador de eventos ( MouseLeave ) detiene simplemente el primero. Al detener un

objeto Storyboard , todas las propiedades animadas vuelven a sus valores predeterminados. Por

consiguiente, cuando el usuario saca el puntero del botn , el botn vuelve a ser como era antes de que el

puntero del mouse pasara sobre el botn.

10. Agregue una animacin para cuando se haga clic en el botn: el paso final es agregar un

desencadenador para cuando el usuario haga clic en el botn. Agregue el marca do siguiente en cualquier

punto del bloque ControlTemplate.Triggers.

11. Presione F5 para ejecutar la aplicacin y haga clic en uno de los botones. Al hacer clic en un botn, el

rectngulo de vidrio gira sobre s mismo.

Resumen

En este tutorial, ha realizado los siguientes ejercicios:

Ha destinado un objeto Style a un tipo de objeto ( Button ).

Ha controlado pr opiedades bsicas de los botones en toda la aplicacin utilizando el objeto Style .

Ha creado recursos tales como degradados para utilizarlos para valores de propiedades de los

establecedores de Style .

Ha personalizado la apariencia de botones de toda la aplicacin aplicando una plantilla a los botones.

Ha personalizado el comportamiento de los botones en respuesta a acciones del usuario (tales como

MouseEnter , MouseLeave y Click ) incluyendo efectos de animacin.

4.3. Personalizacin de Controles

Esta c ategora abarca las distintas clases base, las interfaces y otros elementos y conceptos utilizados en la

creacin de un control de Windows Presentation Foundation (WPF) totalmente funcional.

4.3.1. Informacin General sobre la Creacin de Controles

La ex tensibilidad del modelo de control Windows Presentation Foundation (WPF) reduce en gran medida la

necesidad de crear un nuevo control. Sin embargo, en ciertos casos es posible que an necesite crear un

control personalizado. En este tema se explican las ca ractersticas que minimizan la necesidad de crear un

control personalizado y los diferentes modelos de creacin de controles de Windows Presentation Foundation

(WPF). En este tema tambin se muestra cmo crear un nuevo control.

Alternativas a la escritura de un nuevo control

Histricamente, si se deseaba obtener una experiencia personalizada de un control existente, las posibilidades

estaban limitadas a cambiar las propiedades estndar del control, tales como el color de fondo, el ancho del

borde y el tamao de fuente. Si se deseaba extender la apariencia o comportamiento de un control ms all de

estos parmetros predefinidos, necesit aba crear un nuevo control, normalmente heredado de uno existente, e

invalidar el mtodo responsable de dibujarlo. Aunque esto sigue siendo posible, WPF permite personalizar los



controles existentes gracias a su modelo de contenido enriquecido, as como es tilos, plantillas y

desencadenadores. La lista siguiente proporciona ejemplos de cmo utilizar estas caractersticas para crear

experiencias personalizadas y coherentes sin tener que crear un nuevo control.

Contenido enriquecido. Muchos de los controles es tndar de WPF son compatibles con contenido

enriquecido. Por ejemplo, la propiedad de contenido de un control Button es del tipo Object , de modo

que, en teora, en un control Button se puede mostrar cualquier elemento. Para que un botn muestre

una imagen y texto, puede agregar una imagen y un control TextBlock a StackPanel y asignar

StackPanel a la propiedad Content . Debido a que estos controles permiten mostrar elementos visuales

de WPF y datos arbitrarios, se reduce la necesidad de crear un nuevo control o modificar un control

existente para permi tir una visualizacin compleja.

Estilos. Un objeto Style es una coleccin de valores que representan propiedades para un control.

Utilizando estilos, puede crear una representacin reutilizable del aspecto y el c omportamiento

deseados para un control sin necesidad de escribir un nuevo control. Por ejemplo, suponga que desea

que la fuente de todos los controles TextBlock sea Arial de color rojo con un tamao de 14. Puede

crear un estilo como un recurso y establecer las propiedades adecuadas en consecuencia. A

continuacin, todos los controles TextBlock que agregue a la aplicacin tendrn la misma apariencia.

Plantillas de datos. DataTemplate permite personalizar cmo se muestran los datos en un control. Por

ejemplo, DataTemplate se puede utilizar para especificar cmo se muestran los datos en ListBox .

Adems de personalizar la apariencia de los datos, un objeto DataTemplate puede incluir elementos de

interfaz de usuario, lo que aporta gran flexibilidad en las interfa ces de usuario personalizadas. Por

ejemplo, con DataTemplate se puede crear un control ComboBox en el que cada elemento contenga

una casilla.

Plantillas de control. Muchos controles de WPF utilizan ControlTemplate para definir la estructura y

apariencia de l control, a fin de independizar su apariencia de su funcionalidad. Es posible cambiar

drsticamente la apariencia de un control si se redefine su ControlTemplate . Por ejemplo, supongamos

que desea un control semejante a un semforo. La interfaz de usuario y la funcionalidad de este

control son sencillas. El control est compuesto de tres crculos y slo uno de ellos puede estar

encendido en un momento dado. Despus de reflexionar, puede que se d cuenta de que RadioButton

proporciona la funcionalidad de pe rmitir la seleccin de una sola opcin a la vez, aunque la apariencia

predeterminada de RadioButton no se parece nada a un semforo. Dado que RadioButton utiliza una

plantilla de control para definir su apariencia, resulta fcil redefinir ControlTemplate para adaptarlo a

los requisitos del control y utilizar los botones de opcin para crear el semforo.

Nota:

Aunque RadioButton puede utilizar un objeto DataTemplate , en este ejemplo no basta con DataTemplate . DataTemplate define la apariencia del contenido de un control. En el caso de un botn de opcin ( RadioButton ), su contenido es aquello que aparece a la derecha del crculo, que indica si

RadioButton est seleccionado. En el ejemplo del semforo, el botn de opcin tiene que ser slo un crculo capaz de "encenderse". Dado que el requisito de apariencia del semforo es tan distinto de la apariencia predeterminada de RadioButton , es necesario redefinir ControlTemplate . En general, DataTemplate se utiliza para definir el contenido (o los datos) de un control y ControlTemplate se utiliza para definir la estructura del control.

Desencadenadores. Trigger permite cambiar dinmicamente la apariencia y el compo rtamiento de un

control sin crear uno nuevo. Por ejemplo, suponga que tiene varios controles ListBox en una aplicacin

y desea que todos los elementos de ListBox se muestren en negrita y en rojo cuando estn

seleccionados. Su primer impulso podra ser crea r una clase que herede de ListBox e invalidar el

mtodo OnSelectionChanged para cambiar la apariencia del elemento seleccionado; sin embargo, sera

ms apropiado agregar a un estilo de ListBoxItem un desencadenador que cambie la apariencia del

elemento sel eccionado. Un desencadenador permite cambiar los valores de las propiedades o realizar



acciones basadas en el valor de una propiedad. Un objeto EventTrigger permite realizar acciones

cuando se produce un evento.

En general, si el control tiene la misma fu ncionalidad que un control existente, pero desea modificar su

apariencia, antes de nada debe estudiar si puede utilizar cualquiera de los mtodos descritos en esta seccin a

fin de cambiar la apariencia del control existente.

Modelos para la creacin de controles

El modelo de contenido enriquecido, los estilos, las plantillas y los desencadenadores minimizan la necesidad de

crear con troles nuevos. Sin embargo, si se ve obligado a crear uno nuevo, es importante comprender los

distintos modelos de creacin de controles de WPF. WPF proporciona tres modelos generales para crear

controles, cada uno de los cuales ofrece un conjunto diferent e de caractersticas y un nivel de flexibilidad

distinto. Las clases base de los tres modelos son UserControl , Control y FrameworkElement .

Derivar de UserControl

La manera ms sencilla de crear un control en WPF es derivar de UserControl . Cuando se genera un control que

hereda de UserControl , se agregan los componentes existentes a UserControl , se les da un nombre y se hace

referencia los controladores de eventos en Lenguaje de marcado de aplicaciones extensible (XAML). A

continuacin, puede hacer referenci a a los elementos con nombre y definir los controladores de eventos en el

cdigo. Este modelo de programacin es muy similar al utilizado para la programacin de aplicaciones en WPF.

Si est generado correctamente, un control UserControl puede aprovechar l as ventajas del contenido

enriquecido, los estilos y los desencadenadores. Sin embargo, si el control hereda de UserControl , las personas

que lo utilicen no podrn usar DataTemplate o ControlTemplate para personalizar su apariencia. Es necesario

derivar de la clase Control o de una de sus clases derivadas (excepto UserControl ) para crear un control

personalizado que admita plantillas.

Ventajas de derivar de UserControl

Considere la posibilidad de derivar de UserControl si se cumplen todas las condiciones si guientes:

Desea generar un control de forma similar a como se genera una aplicacin.

El control est compuesto solamente de componentes existentes.

No necesita permitir una personalizacin compleja.

Derivar de Control

Derivar de la clase Control es el mode lo utilizado por la mayora de los controles WPF existentes. Cuando se

crea un control que hereda de la clase Control , su apariencia se define mediante plantillas. Al hacerlo, se

independiza la lgica de funcionamiento de la representacin visual. Tambin se puede garantizar la

independencia entre la interfaz de usuario y la lgica si se usan comandos y enlaces en lugar de eventos, y se

evita en lo posible hacer referencia a los elementos de ControlTemplate . Si la interfaz de usuario y la lgica del

control estn debidamente desconectadas, un usuario del control podr redefinir el objeto ControlTemplate del

control para personalizar su apariencia. Aunque generar un objeto Control personalizado no es tan sencillo

como generar un objeto UserControl , un objeto Control personalizado proporciona mayor flexibilidad.

Ventajas de derivar de Control

Considere la posibilidad de derivar de Control en lugar de utilizar la clase UserControl si se cumple cualquiera

de las condiciones siguientes:

Desea que la apariencia del control sea personalizable a travs del objeto ControlTemplate .

Desea que el control admita temas diferentes.

Derivar de FrameworkElement

Los controles derivados de UserControl o Control se basan en la composicin de elementos existentes. Para

muchos esce narios, sta es una solucin aceptable, porque cualquier objeto que hereda de FrameworkElement

puede estar en un objeto ControlTemplate . Sin embargo, en ocasiones la apariencia de un control requiere una



funcionalidad que va ms all de la simple composici n de elementos. Para estos escenarios, basar un

componente en FrameworkElement es la opcin correcta.

Hay dos mtodos estndar para generar componentes basados en FrameworkElement : la representacin

directa y la composicin de elementos personalizada. La representacin directa implica invalidar el mtodo

OnRender de FrameworkElement y proporcionar operaciones DrawingContext que definan explcitamente el

aspecto visual del componente. ste es el mtodo utilizado por Image y Border . La composicin de elemen tos

personalizada implica utilizar objetos de tipo Visual para crear la apariencia del componente. Tambin es

posible mezclar la representacin directa y la composicin de elementos personalizada en el mismo control.

Ventajas de derivar de FrameworkElement

Considere la posibilidad de derivar de FrameworkElement si se cumple cualquiera de las condiciones siguientes:

Desea tener un control preciso sobre la apariencia del control ms all de lo que proporciona la simple

composicin de elementos.

Desea definir el aspecto del control definiendo una lgica de representacin propia.

Desea componer elementos existentes de maneras nuevas que excedan lo posible con UserControl y

Control .

Fundamentos de creacin de controles

Como se coment anteriormente, una de las caractersticas ms eficaces de WPF es la posibilidad de no tener

que limitarse a establecer las propiedades bsicas de un control pa ra modificar su apariencia y

comportamiento, sin estar obligado a crear un control personalizado. Las caractersticas de estilo, enlace de

datos y desencadenadores son posibles gracias al sistema de propiedades de WPF y al sistema de eventos de

WPF. Si imp lementa propiedades de dependencia y eventos enrutados en un control personalizado, los usuarios

podrn utilizar estas caractersticas exactamente igual que para un control distribuido con WPF,

independientemente del modelo utilizado para crearlo.

Utiliza r propiedades de dependencia

Cuando una propiedad es de dependencia, es posible realizar las acciones siguientes:

Establecer la propiedad en un estilo.

Enlazar la propiedad a un origen de datos.

Utilizar un recurso dinmico como valor de la propiedad.

Anim ar la propiedad.

Si desea que una propiedad del control admita cualquiera de estas funcionalidades, debe implementarla como

propiedad de dependencia. En el ejemplo siguiente se define una propiedad de dependencia denominada Value

mediante este procedimient o:

Defina un identificador de DependencyProperty denominado ValueProperty como campo

public static readonly.

Registre el nombre de la propiedad en el sistema de propiedades, mediante una llamada a

DependencyProperty .Register , para especificar lo siguiente:

El nombre de la propiedad.

El tipo de la propiedad.

El tipo que posee la propiedad.

Los metadatos de la propiedad. Los metadatos contienen el valor predeterminado de la

propiedad, CoerceValueCallback y PropertyChangedCallback .

Defina una propiedad de "c ontenedor" de CLR denominada Value (que es el mismo nombre que se

utiliza para registrar la propiedad de dependencia) mediante la implementacin de los descriptores de

acceso get y set de la propiedad. Observe que los descriptores de acceso get y set llama n nicamente

a GetValue y SetValue, respectivamente. Se recomienda que los descriptores de acceso de las

propiedades de dependencia no contengan lgica adicional, porque los clientes y WPF pueden omitir



dichos descriptores y llamar a GetValue y SetValue di rectamente. Por ejemplo, cuando una propiedad

est enlazada a un origen de datos, no se llama al descriptor de acceso set de la propiedad. En lugar

de agregar lgica adicional a los descriptores de acceso get y set, utilice los delegados

ValidateValueCallb ack, PropertyChangedCallback y CoerceValueCallback para responder a los cambios

del valor o com probar si el valor ha cambiado.

Defina un mtodo para CoerceValueCallback denominado CoerceValue . CoerceValue garantiza que

Value sea mayor o igual que MinValue y menor o igual que MaxValue .

Defina un mtodo para PropertyChangedCallback, denominado OnValueChanged . OnValueChanged

crea un objeto RoutedPropertyChangedEventArgs < (Of < (T> )> ) y se prepara para provocar el evento

enrutado ValueChanged . Los eventos enrutad os se abordan en la seccin siguiente.

/// /// Identifies the Value dependency property. /// public static readonly DependencyProperty ValueProperty = DependencyProperty.Register( "Value" , typeof(decimal), typeof(NumericUpDown), new FrameworkPropertyMetadata(MinValue, new PropertyChangedCallback(OnValueChanged), new CoerceValueCallback(CoerceValue))); /// /// Gets or sets the value assigned to the control. /// public decimal Value { get { return (decimal)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } private static object CoerceValue(DependencyObject element, object value) { decimal newValue = (decimal)value; NumericUpDown control = (NumericUpDown)ele ment; newValue = Math.Max(MinValue, Math.Min(MaxValue, newValue)); return newValue; } private static void OnValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) { NumericUpDown control = (NumericUpDown)obj; RoutedPropertyChangedEventArgs e = _ new RoutedPropertyChangedEventArgs( (decimal)args.OldValue, (decimal)args.NewValue, ValueChangedEvent); control.OnValueChanged(e); }

Utilizar eventos enrutados

Al igual que las propiedad es de dependencia extienden la nocin de propiedades CLR con funciones adicionales,

los eventos enrutados extienden la nocin de eventos CLR estndar. Al crear un nuevo control WPF, tambin es

conveniente implementar el evento como enrutado, porque un even to enrutado admite el comportamiento

siguiente:

Los eventos se pueden controlar en un elemento primario de varios controles. Si un evento es de

propagacin, puede suscribirse a l un elemento primario nico del rbol de elementos. A

continuacin, los autor es de la aplicacin pueden utilizar un mismo controlador para responder al

evento de varios controles. Por ejemplo, si el control forma parte de cada uno de los elementos de un

control ListBox (por estar incluido en DataTemplate ), el programador de la apli cacin puede definir el

controlador del evento del control en ListBox . Cada vez que se produzca el evento en cualquiera de los

controles, se llamar al controlador.

Los eventos enrutados se pueden utilizar en EventSetter , lo que permite a los programadores de

aplicaciones especificar el controlador de un evento en un estilo.

Los eventos enrutados se pueden utilizar en EventTrigger , lo que resulta til para an imar propiedades

mediante XAML.

En el ejemplo siguiente se define un evento enrutado mediante este procedimiento:



Defina un identificador de RoutedEvent denominado ValueChangedEvent como campo

public static readonly.

Registre el evento enrutado mediante una llamada al mtodo EventManager .RegisterRoutedEvent. En

el ejemplo se especifica la informacin si guiente al llamar a RegisterRoutedEvent:

El nombre del evento es ValueChanged .

La estrategia del enrutamiento es Bubble. Esto significa que primero se llama a un

controlador de eventos en el origen (el objeto que provoca el evento) y, a continuacin, se ll ama

sucesivamente a los controladores de eventos en los elementos primarios del origen, empezando

por el controlador de eventos del elemento primario ms cercano.

El tipo del controlador de eventos es RoutedPropertyChangedEventHandler < (Of < (T> )> ) ,

construi do con un tipo Decimal.

El tipo propietario del evento es NumericUpDown .

Declare un evento pblico denominado ValueChanged e incluya declaraciones de descriptores de

acceso del evento. En el ejemplo se llama a AddHandler en la declaracin del descriptor de acceso add

y a RemoveHandler en la declaracin del descriptor de acceso remove a fin de utilizar los servicios de

eventos de WPF.

Cree un mtodo virtual protegido denominado OnValueChanged que provoque el evento ValueChanged

/// /// Identifies t he ValueChanged routed event. /// public static readonly RoutedEvent ValueChangedEvent = EventManager.RegisterRoutedEvent( "ValueChanged" , RoutingStrategy.Bubble, typeof(RoutedPropertyChangedEventHandler ), typeof(NumericUpDow n)); /// /// Occurs when the Value property changes. /// public event RoutedPropertyChangedEventHandler ValueChanged { add { AddHandler(ValueChangedEvent, value); } remove { RemoveHandler(ValueChangedEvent, value); } } /// /// Raises the ValueChanged event. /// /// Arguments associated with the ValueChanged event. protected virtual void OnValueChanged(RoutedPropertyChangedEventArgs args) { RaiseEvent(args); }

Utilizar el enlace

Para desacoplar la interfaz de usuario del control de su lgica, puede ser conveniente utilizar el enlace de datos.

Esto resulta particularmente importante si la apariencia del control se define mediante ControlTemplate . Al

utilizar el enlace de datos, puede que consiga eliminar la necesidad de hacer referencia a partes concretas de la

interfaz de usuario desde el cdigo. Es conveniente evitar hacer referencia a elementos incluidos en

ControlTemplate , ya que cuando el cdigo hace referen cia a elementos incluidos en ControlTemplate y se

modifica ControlTemplate , el elemento al que se hace referencia debe incluirse en el nuevo objeto

ControlTemplate .

En el ejemplo siguiente se actualiza el control TextBlock del control NumericUpDown , para ello se le asigna un

nombre y se hace referencia al cuadro de texto por su nombre en el cdigo.

private void UpdateTextBlock() { valueText.Text = Value.ToString(); }

En el ejemplo siguiente se utiliza el enlace para lograr lo mismo.



Grid.RowSpan= "2" VerticalAlignment= "Center" HorizontalAlignment= "Stretch" >

Definir y utilizar comandos

Considere la posibilidad de definir y utilizar comandos para proporcionar funcionalidad en lugar de controlar

eventos. Cuando utiliza controladores de eventos en el control, las aplicaciones no pueden obtener acceso a la

accin realizada dentro del controlador de eventos. Si implementa comandos en el control, las aplicaciones

pueden tener acceso a la funcionalidad que, de otro m odo, no estara disponible.

El ejemplo siguiente muestra la parte de un control que controla el evento Click para que dos botones cambien

el valor del control NumericUpDown . Independientemente de que el control sea UserControl o Control con

ControlTemplat e, la interfaz de usuario y la lgica estn estrechamente unidas, ya que el control utiliza

controladores de eventos.

Up Down private void upButton_Click(object sender, EventArgs e) { Value++; } private void downButton_Click(object sender, EventArgs e) { Value -- ; }

En el ejemplo siguiente se definen d os comandos que cambian el valor del control NumericUpDown .

public static RoutedCommand IncreaseCommand { get { return _increaseCommand; } } public static RoutedCommand DecreaseCommand { get { return _decreaseCommand; } } private static void InitializeCommands() { _increaseCommand = new RoutedCommand( "IncreaseCommand" , typeof(NumericUpDown)); CommandManager.RegisterClassCommandBinding(typeof(NumericUpDown), new CommandBinding(_inc reaseCommand, OnIncreaseCommand)); CommandManager.RegisterClassInputBinding(typeof(NumericUpDown), new InputBinding(_increaseCommand, new KeyGesture(Key.Up))); _decreaseCommand = new RoutedCommand( "DecreaseCommand" , ty peof(NumericUpDown)); CommandManager.RegisterClassCommandBinding(typeof(NumericUpDown), new CommandBinding(_decreaseCommand, OnDecreaseCommand)); CommandManager.RegisterClassInputBinding(typeof(NumericUpDown), new InputBinding(_decreaseCommand, new KeyGesture(Key.Down))); } private static void OnIncreaseCommand(object sender, ExecutedRoutedEventArgs e) { NumericUpDown control = sender as NumericUpDown; if (control != null ) { control.OnIncrease(); } } private static void OnDecreaseCommand(object sender, ExecutedRoutedEventArgs e) { NumericUpDown control = sender as NumericUpDown; if (control != null ) { control.OnDecrease() ; } } protected virtual void OnIncrease() { Value++; }



protected virtual void OnDecrease() { Value -- ; } private static RoutedCommand _increaseCommand; private static RoutedCommand _decreaseCommand;

Los elementos de la plantilla pueden hacer re ferencia, entonces, a los comandos, como se muestra en el

ejemplo siguiente.

Up Down

Ahora las aplicaciones pueden hacer referencia a los enlaces para tener acceso a la funcionalidad que no era

accesible cuando el control util izaba controladores de eventos.

Especificar que un elemento es necesario en ControlTemplate

En las secciones anteriores se explica cmo utilizar el enlace de datos y los comandos para que un control no

haga referencia a elementos de su ControlTemplate desde el cdigo. Sin embargo, puede h aber ocasiones en

las que hacer referencia a un elemento sea inevitable. Si se produce esta situacin, debe aplicar el atributo

TemplatePartAttribute al control. Este atributo informa a los autores de la plantilla de los tipos y los nombres de

los elemento s incluidos en ControlTemplate . No es necesario nombrar cada uno de los elementos de

ControlTemplate en TemplatePartAttribute . De hecho, cuantos menos elementos se nombren, mejor. Sin

embargo, si hace referencia al elemento en el cdigo, debe utilizar Temp latePartAttribute .

Disear para diseadores

Para recibir soporte tcnico para controles personalizados de WPF en Windows Presentation Foundation (WPF)

Designer for Visual Studio (por ejemplo, la edicin de propiedades con la ventana Propieda des), siga esta s

instrucciones.

Propiedades de dependencia

Es importante implementar los descriptores de acceso CLR get y set como se describi anteriormente en

"Utilizar propiedades de dependencia". Los diseadores pueden utilizar el contenedor para detectar la presenci a

de una propiedad de dependencia, pero no se les exige, al igual que a WPF y a los clientes del control, llamar a

los descriptores de acceso al obtener o establecer la propiedad.

Propiedades asociadas

Para implementar propiedades asociadas en controles pe rsonalizados, es recomendable que utilice las

siguientes instrucciones:

Consideremos una clase public static readonly DependencyProperty con el formato

NombreDePropiedad Property creada mediante el mtodo RegisterAttached. El nombre de propiedad

que se pasa a RegisterAttached debe coincidir con NombreDePropiedad .

Implemente un par de mtodos publicstatic CLR denominados Set NombreDePropiedad y

Get NombreDePropiedad . Ambos mtodos deben aceptar una clase derivada de DependencyProperty

como su primer argumento. El mtodo Set NombreDePropiedad tambin acepta un argumento cuyo

tipo coincida con el tipo de datos registrado para la propiedad. El mtodo Get mtodo

NombreDePropiedad debe devolver un valor del mismo tipo. Si falta el mtodo

Set NombreDePropiedad , la propie dad se marca como de slo lectura.

Set NombreDePropiedad y Get NombreDePropiedad deben enrutar directamente a los mtodos GetValue

y los mtodos SetValue del objeto de dependencia de destino, respectivamente. Los diseadores

pueden tener acceso a la propieda d asociada mediante una llamada a travs del contenedor de mtodo

o una llamada directa al objeto de dependencia de destino.

Definir y utilizar recursos compartidos para el control



Puede incluir el control en el mismo ensamblado que la aplicacin o bien em paquetarlo en un ensamblado

independiente que se pueda utilizar en varias aplicaciones. En general, la informacin analizada en este tema

es aplicable independientemente del mtodo que se utilice. Sin embargo, es necesario destacar una diferencia.

Al inclu ir un control en el mismo ensamblado que una aplicacin, puede agregar recursos globales al archivo

app.xaml libremente. Sin embargo, un ensamblado que slo contiene controles no tiene asociado un objeto

Application , por lo que no hay disponible un archivo app.xaml.

Cuando una aplicacin busca un recurso, la bsqueda se realiza en tres niveles en el orden que se indica a

continuacin:

1. Nivel de elemento: el sistema empieza por el elemento que hace referencia al recurso y, a

continuacin, busca en los recurso s del elemento primario lgico, y as sucesivamente, hasta que se

alcanza el elemento raz.

2. Nivel de aplicacin: recursos definidos por el objeto Application .

3. Nivel de tema: los diccionarios del nivel de tema se almacenan en una subcarpeta denominada Tem as.

Los archivos de la carpeta Temas corresponden a los temas. Por ejemplo, puede tener

Aero.NormalColor.xaml, Luna.NormalColor.xaml, Royale.NormalColor.xaml, etc. Tambin puede tener un

archivo denominado generic.xaml. Cuando el sistema busca un recurso e n el nivel de temas, primero

busca en el archivo especfico del tema y, despus, en generic.xaml.

Cuando el control se encuentra en un ensamblado independiente de la aplicacin, debe colocar los recursos

globales en el nivel de elemento o el nivel de tema. Ambos mtodos tienen sus ventajas.

Definir recursos en el nivel de elemento

Para definir recursos compartidos en el nivel de elemento, cree un diccionario de recursos personalizado y

combnelo con el diccionario de recursos del control. Cuando utilice es te mtodo, puede asignar al archivo de

recursos el nombre que desee e incluir dicho archivo en la misma carpeta que los controles. Los recursos del

nivel de elemento tambin pueden utilizar cadenas simples como claves. En el ejemplo siguiente se crea un

ar chivo de recursos de LinearGradientBrush llamado Dictionary1.XAML.

Una vez definido el diccionario, deber combinarlo con el diccionar io de recursos del control. Para ello, utilice

XAML o el cdigo.

En el ejemplo siguiente se combina un diccionario de recursos mediante XAML.

El inconveniente de este enfoque es que se crea un objeto ResourceDictionary cada vez que se hace referencia

a l. Por ejemplo, si tiene 10 controles personalizados en la biblioteca y se combinan los diccionarios de

recursos compartidos de cada control mediante XAML, se crean 10 objetos ResourceDictionary idnticos. Para

evitarlo, cree una clase esttica que combine los recursos del cdigo y devuelva el elemento ResourceDictionary

resultante.

En el ejemplo siguiente se crea una clase que devuelve un elemento ResourceDictionary compartido.

internal static class SharedDictionaryManager { internal static ResourceDi ctionary SharedDictionary



{ get { if (_sharedDictionary == null) { System.Uri resourceLocater = new System.Uri("/ElementResourcesCustomControlLibrary;component/Dictionary1.xaml", System.UriKind.Relative); _sharedDictionary = (ResourceDictionary)Application.LoadComponent(resourceLocater); } return _sharedDictionary; } } private static ResourceDictionary _sh aredDictionary; }

En el ejemplo siguiente se combina el recurso compartido con los recursos de un control personalizado en el

constructor del control antes de llamar a InitilizeComponent. Dado que

SharedDictionaryManager.SharedDictionary es una propiedad esttica, ResourceDictionary slo se crea una vez.

Dado que el diccionario de recursos se combin antes de llamar a InitializeComponent, los recursos estn

disponibles para el control en su archivo de XAML.

public NumericUpDown() { this.Resources.Merge dDictionaries.Add(SharedDictionaryManager.SharedDictionary); InitializeComponent(); }

Definir recursos en el nivel de tema

WPF permite crear recursos para distintos temas de Windows. Como autor del control, puede definir un recurso

para un tema concr eto a fin de cambiar la apariencia del control en funcin del tema que se utilice. Por

ejemplo, la apariencia de un elemento Button en el tema de Windows clsico (tema predeterminado de

Windows 2000) es distinta de la de un elemento Button en el tema Luna de Windows (tema predeterminado de

Windows XP) porque Button utiliza un elemento ControlTemplate distinto para cada tema.

Los recursos especficos de un tema se mantienen en un diccionario de recursos con un nombre de archivo

concreto. Estos archivos deb en estar en una carpeta llamada Temas , que es una subcarpeta de la carpeta que

contiene el control. En la tabla siguiente se enumeran los archivos de diccionario de recursos y el tema asociado

a cada archivo:

Nombre del archivo de diccionario de recursos Tema de Windows

Classic.xaml

Luna.NormalColor.xaml Tema azul predeterminado en Windows XP

Luna.Homestead.xaml Tema verde olivo en Windows XP

Luna.Metallic.xaml Tema plateado en Windows XP

Royale.Norma lColor.xaml Tema predeterminado en Windows XP Media Center Edition

Aero.NormalColor.xaml Tema predeterminado en Windows Vista

No es necesario definir un recurso para cada tema. Si no se ha definido un recurso para un tema concreto, el

control utiliza el recurso genrico, que se encuentra en un archivo de diccionario de recursos llamado

generic.xaml en la misma carpeta que los archivos de diccionario de recursos especficos de un tema. Aunque

generic.xaml no corresponde a un tema concreto de Windows, no de ja de ser un diccionario del nivel de tema.

Ejemplo NumericUpDown Custom Control with Theme and UI Automation Support contiene dos diccionarios de

recursos para el control NumericUpDown : uno est en generic.xaml y el otro en Luna.NormalColor.xaml. Puede

ej ecutar la aplicacin y cambiar entre el tema plateado de Windows XP y otro tema a fin de ver la diferencia

entre las dos plantillas de control. (Si est ejecutandoWindows Vista, puede cambiar el nombre de

Luna.NormalColor.xaml a Aero.NormalColor.xaml y cam biar entre dos temas, como el de Windows clsico y el

tema predeterminado de Windows Vista.)



Al colocar un elemento ControlTemplate en cualquiera de los archivos de diccionario de recursos especficos de

un tema, debe crear un constructor esttico para el control y llamar al mtodo OverrideMetadata(Type,

PropertyMetadata) en DefaultStyleKey , como se muestra en el ejemplo siguiente.

static NumericUpDown() { DefaultStyleKeyProperty.OverrideMetadata(typeof(NumericUpDown), new FrameworkProper tyMetadata(typeof(NumericUpDown))); }

Definir y hacer referencia a claves para los recursos de tema

Al definir un recurso en el nivel de elemento, puede asignar una cadena como clave de ste y obtener acceso al

recurso a travs de la cadena. Al definir un recurso en el nivel de tema, debe utilizar un elemento

ComponentResourceKey como clave. En el ejemplo siguiente se define un recurso en generic.xaml.

En el ejemplo siguiente se hace referencia al recurso mediante la especificacin de ComponentResourceKey

como clave.

Especificar la ubicacin de los recursos de tema

Para buscar los recursos de un control, la aplicacin host debe saber que el ensamblado contiene recursos

especficos del control. Para ello, agregue ThemeInfoAttribute al ensamblado que contien e el control.

ThemeInfoAttribute tiene una propiedad GenericDictionaryLocation que especifica la ubicacin de los recursos

genricos y una propiedad ThemeDictionaryLocation que especifica la ubicacin de los recursos especficos de

tema.

En el ejemplo sigu iente se establecen las propiedades ThemeDictionaryLocation y GenericDictionaryLocation en

SourceAssembly , para especificar que los recursos genricos y especficos de tema estn en el mismo

ensamblado que el control.

[assembly: ThemeInfo(ResourceDictionar yLocation.SourceAssembly, ResourceDictionaryLocation.SourceAssembly)]

Heredar de UserControl frente a usar ControlTempl ate

Varios ejemplos muestran distintos mtodos para escribir y empaquetar el control NumericUpDown . En Ejemplo

NumericUpDown UserControl with DependencyProperty and RoutedEvent, NumericUpDown hereda de

UserControl; en Ejemplo NumericUpDown Custom Control with Theme and UI Automation Support,

NumericUpDown hereda de Control y utiliza un elemento ControlTemplate. En esta seccin se describen

brevemente algunas de las diferencias entre ambos y se explica por qu el control que utiliza ControlTemplate

es ms e xtensible.

La diferencia ms importante es que el control NumericUpDown que hereda de UserControl no utiliza un

elemento ControlTemplate y el control que hereda directamente de Control s lo utiliza. En el ejemplo siguiente

se muestra XAML del control que hereda de UserControl. Como puede observar, XAML es muy similar al

resultado que podra obtener al crear una aplicacin y comenzar con Window o Page.

Up



Grid.Column= "1" Grid.Row= "1" >Down

En el ejemplo siguiente se muestra ControlTemplate del control que hereda de Control . Observe que

ControlTemplate es similar a XAML en UserControl , con tan slo algunas diferencias de sintaxis.

Up Down

La mayor diferencia entre los dos ejemp los anteriores es que aquel en el que se utiliza ControlTemplate tiene

una apariencia personalizable y no as el que hereda de UserControl. En el caso en el que NumericUpDown

hereda de UserControl , los desarrolladores de aplicaciones no pueden hacer nada p ara cambiar la apariencia del

control. De hecho, aunque NumericUPDown tiene una propiedad ControlTemplate (dado que UserControl hereda

de Control ), si alguien intenta establecerla, se producir una excepcin en tiempo de ejecucin. Por otra parte,

un desar rollador de aplicaciones que utiliza el control NumericUpDown que hereda de Control puede crear

libremente un nuevo elemento ControlTemplate para el control. Por ejemplo, se podra crear un elemento

ControlTemplate que colocara los botones a izquierda y de recha de TextBlock en lugar de encima y debajo.

La diferencia entre los dos enfoques es evidente en la diferencia sintctica de los ejemplos anteriores. El control

que utiliza ControlTemplate establece la propiedad Template en un elemento Style para Numeri cUpDown . ste

es un mtodo habitual de crear plantillas de control. Al establecer la propiedad Template en un estilo, se

especifica que todas las instancias del control utilizarn ese elemento ControlTemplate. Los desarrolladores de

aplicaciones pueden cam biar libremente la propiedad Template de un control NumericcUpDown para

personalizar su apariencia. En cambio, el elemento XAML del control que hereda de UserControl rellena la

propiedad Content de NumericUpDown ( est implcito en XAM L). Si un desarrollador de

aplicaciones no puede cambiar la propiedad Content, no se puede utilizar NumericUpDown .

Otra diferencia entre los ejemplos es la forma en que los controles responden a los botones Arriba y Abajo. El

control que hereda de UserCont rol controla el evento Click y el control que utiliza ControlTemplate implementa

comandos y se enlaza a stos en el elemento ControlTemplate. Como resultado, un desarrollador de

aplicaciones que crea un nuevo elemento ControlTemplate para NumericUpDown pue de establecer tambin un

enlace a los comandos y conservar la funcionalidad del control. Si ControlTemplate controla el evento Click en

lugar de enlazarse a los comandos, el desarrollador de aplicaciones debera implementar controladores de

eventos al crea r un nuevo elemento ControlTemplate e interrumpir de esa forma la encapsulacin de

NumericUpDown .

Otra diferencia es la sintaxis del enlace entre la propiedad Text de TextBlock y la propiedad Value . En el caso de

UserControl, el enlace especifica que Relat iveSource es el control NumericUpDown primario y se enlaza a la

propiedad Value . En el caso de ControlTemplate, RelativeSource es el control al que pertenece la plantilla. El



resultado obtenido es el mismo, pero vale la pena mencionar que la sintaxis de en lace difiere entre ambos

ejemplos.

En Ejemplo NumericUpDown Custom Control with Theme and UI Automation Support, el control

NumericUpDown se encuentra en un ensamblado independiente de la aplicacin y define y utiliza recursos de

nivel de tema, pero este el control NumericUpDown est en el mismo ensamblado que la aplicacin y no define

ni utiliza recursos de nivel de tema.

4.3.2. Instrucciones para el Diseo de Controles con Estilos

Este documento resume un conjunto de procedimientos recomendados que se de be tener en cuenta al disear

un control con estilos y plantillas de fcil uso. Los vimos a travs de muchas pruebas y errores al trabajar en

los estilos del control de tema del conjunto del control integrado de WPF. Aprendimos que un estilo correcto

est formado tanto por una funcin de un modelo de objetos bien diseado como por el propio estilo. El lector

al que est dirigido este documento es el autor del control, y no el autor del estilo.

Terminologa

Diseo de estilos y plantillas hace referencia al conjunto de tecnologas que permiten al autor de un control

transferir los aspectos visuales de ste a su estilo y plantilla. Este c onjunto de tecnologas incluye los siguientes

elementos:

Estilos (incluidos los establecedores de propiedades, los desencadenadores y los guiones grficos).

Recursos.

Plantillas de control.

Plantillas de datos.

Antes de empezar: introduccin al control

Antes de pasar a las instrucciones, es importante entender el control y haber definido su uso comn. El diseo

de estilos expone un co njunto de posibilidades que suele ser difcil de controlar. Los controles que se escriben

para usarlos mucho (en muchas aplicaciones, por muchos programadores) se enfrentan al desafo de que el

diseo de estilos se puede utilizar para efectuar cambios dif ciles de conseguir en el aspecto visual del control.

De hecho, puede que el control con estilos no se parezca en absoluto a la idea inicial de su autor. Puesto que la

flexibilidad proporcionada por los estilos es bsicamente ilimitada, puede usar la idea d e uso comn para

ayudarle a delimitar el mbito de sus decisiones.

Para entender el uso comn del control, es prctico pensar en la finalidad del mismo. Qu aporta el control a

la tabla que no pueda aportar ningn otro control? El uso comn no implica nin gn aspecto visual concreto,

sino ms bien la filosofa del control y un conjunto razonable de expectativas de uso. Esta comprensin permite

plantearse algunas suposiciones sobre el modelo de la composicin y los comportamientos definidos por estilo

del co ntrol en el caso comn. En el caso de ComboBox , por ejemplo, entender el uso comn no le ayudar a

formarse una idea sobre si un objeto ComboBox concreto tiene las esquinas redondeadas, pero s lo har sobre

el hecho de que ComboBox , probablemente, necesit e una ventana emergente y algo de alternancia si est

abierto.

Instrucciones generales

No aplique el proceso de desarrollo de la pl antilla de manera estricta. El proceso de desarrollo de la

plantilla de un control podra estar formado por elementos, comandos, enlaces, desencadenadores o

incluso los valores de propiedades necesarios o esperados de un control para que funcione

correctam ente.

Simplifique el desarrollo al mximo posible.

El diseo basado en las expectativas del tiempo de diseo (es decir, al usar una herramienta

de diseo) tiene como resultado una plantilla de control cuyo estado es incompleto. WPF no

proporciona ninguna i nfraestructura de estado de "creacin"; por tanto, los controles se deben

crear con la expectativa de que tal estado pudiera ser vlido.



No produzca excepciones cuando no se siga un aspecto cualquiera de un diseo de plantilla.

En estas lneas, los paneles no deben producir excepciones si tienen demasiados elementos

secundarios o muy pocos.

Tenga en cuenta la funcionalidad perifrica de los elementos de la aplicacin auxiliar de la plantilla. Los

controles se deben basar en su funcionalidad bsica y en prop uestas reales, y definir mediante el uso

comn del control. Para ello, utilice los elementos de creacin y de la aplicacin auxiliar en la plantilla

para habilitar comportamientos y visualizaciones perifricos; es decir, los comportamientos y

visualizacion es que no contribuyen a la funcionalidad bsica del control. Los elementos de la aplicacin

auxiliar se clasifican en tres categoras:

Los tipos de la aplicacin auxiliar independientes son controles pblicos y reutilizables o

primitivos que se usan "ann imamente" en una plantilla; es decir, ni el elemento de la aplicacin

auxiliar ni el control con estilo se dan cuenta de la existencia del otro. Tcnicamente, el tipo de

cualquier elemento puede ser annimo pero, en este contexto, el trmino describe los t ipos que

encapsulan la funcionalidad especializada para habilitar escenarios concretos.

Los elementos de aplicacin auxiliar basados en tipo son nuevos tipos que encapsulan la

funcionalidad especializada. Estos elementos se suelen disear con un intervalo de funcionalidad

menor que los controles comunes o primitivos. A diferencia de los elementos de la aplicacin

auxiliar independientes, los elementos de aplicacin auxiliar basados en tipo son conscientes del

contexto en el que se usan y, normalmente, deben compartir los datos con el control a cuya

plantilla pertenecen.

Los elementos de aplicacin auxiliar con nombre son los controles comunes o primitivos que

espera un control para buscar por nombre en su plantilla. A estos elementos se les asigna un

nombre conocido en la plantilla para que, de esta forma, el control busque el elemento e

interacte con l mediante programacin. Puede haber slo uno elemento con un nombre concreto

en una plantilla cualquiera.

En la tabla siguiente, se muestran los elementos de aplicacin auxiliar usados por los estilos de control

actuales (esta lista no es una lista completa):

Elemento Tipo Utilizado por

ContentPresenter Basado en tipo

Button, CheckBox, RadioButton, Frame, etc. (todos los tipos de ContentControl )

ItemsPresent er Basado en tipo

ListBox , ComboBox , Menu , etc. (todos los tipos de ItemsControl )

ToolBarOverflowPanel Con nombre ToolBar

Popup Independiente ComboBox , ToolBar , Menu , ToolTip , etc.

RepeatButton Con nombre Slider , ScrollBar , etc.

ScrollBar Con nombre ScrollViewer

ScrollViewer Independiente ListBox , ComboBox , Menu , Frame , etc.

TabPanel Independiente TabControl

TextBox Con nombre ComboBox

TickBar Basado en tipo

Slider

Reduzca el nmero necesario de enlaces especificados por el usuario o los valores de las propiedades

de los elementos de la aplicacin auxiliar . Es normal que un elemento de aplicacin auxiliar requiera

algunos valores de enlaces o de propiedades para funcionar correctamente en la plantilla del control. El

elemento de la aplicacin auxili ar y el control con plantilla deben establecer estos valores en la medida



de lo posible. Al establecer propiedades o enlaces, cuidado, se debe tener cuidado para no invalidar los

valores establecidos por el usuario. Los procedimientos recomendados especfi cos son los siguientes:

Los elementos de la aplicacin auxiliar con nombre los debe identificar el elemento primario y

ste debe establecer cualquier valor necesario del elemento de la aplicacin auxiliar.

Los elementos de la aplicacin auxiliar basados e n tipo deben establecer los valores

necesarios directamente en s mismos. De esta forma, quiz el elemento de la aplicacin auxiliar

deba consultar el contexto de la informacin en la que se usa, incluido su TemplatedParent (el tipo

de control de la planti lla en la que se utiliza). Por ejemplo, ContentPresenter enlaza

automticamente la propiedad Content de su TemplatedParent a su propiedad Content cuando se

usa en un tipo derivado de ContentControl .

Los elementos de la aplicacin auxiliar independientes no se pueden optimizar de esta manera

porque, por definicin, ni el elemento de aplicacin auxiliar ni el primario saben que existe el otro.

Use la propiedad Name para marcar los elementos de una plantilla . Un control que necesite buscar un

elemento en su es tilo para tener acceso a l mediante programacin debe hacerlo con la propiedad

Name y el ejemplo de FindName. Un control no debe producir ninguna excepcin cuando no se

encuentre un elemento, sino deshabilitar correctamente la funcionalidad que requera e se elemento.

Utilice los procedimientos recomendados para expresar el estado del control y el comportamiento de

un estilo. A continuacin, se muestra una lista ordenada de los procedimientos recomendados para

expresar los cambios del estado del control y d e comportamiento de un estilo. Debe utilizar el primer

elemento de la lista que habilita su escenario.

1. Enlace de Propiedad. Ejemplo: enlace entre ComboBox .IsDropDownOpen y

ToggleButton .IsChecked.

2. Cambios de propiedad desencadenados o animaciones de propie dad. Ejemplo: estado de

desplazamiento del puntero de Button .

3. Comando. Ejemplo: LineUpCommand / LineDownCommand de ScrollBar.

4. Elementos independientes de la aplicacin auxiliar. Ejemplo: TabPanel de TabControl .

5. Tipos de aplicacin auxiliar basados en tip o. Ejemplo: ContentPresenter de Button , TickBar de

Slider .

6. Elementos con nombre de la aplicacin auxiliar. Ejemplo: TextBox de ComboBox .

7. Eventos traspasados desde los tipos con nombre de la aplicacin auxiliar. Si realiza escuchas

de eventos traspasados desde un elemento de estilo, es necesario que se pueda identificar

exclusivamente el elemento que genera el evento. Ejemplo: Thumb de ToolBar .

8. Personalice el comportamiento de OnRender. Ejemplo: ButtonChrome de Button .

Utilice desencadenadores de estilo ( en contraposicin a los desencadenadores de plantilla) con

moderacin . Los desencadenadores que afectan las propiedades de los elementos de la plantilla se

deben declarar en la plantilla. Los desencadenadores que afectan las p

manual 08 - windows presentation foundation parte 2.pdf

Documents

ejemplo de controltemplate

ejemplos de controltemplate

informacin general

modelo de contenido

temas cmo de adornos

enlace de datos manual

modelos de contenido

diseo de controles