Personalizando los controles de interfaz de usuario mediante el uso de plantillas en WPF

1. Personalizando los
controles de interfaz de
usuario
D A N A E A G U I L A R G U Z M Á N .
M C T , M C P , M C T S
D A N A E A G U I L A R @ G M A I L . C O M

2. Contenido del Módulo
Lección 1. Plantillas de Controles y Temas
Lección 2. Creando controles

3. Lección 1. Plantillas de
Controles y Temas
1. Los árboles lógicos y arboles visuales
2. Plantillas de controles

4. 1. Los árboles lógicos y arboles
visuales
1. El árbol lógico:
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="200">
<StackPanel>
<Button Padding="5" Margin="15">Primer Boton</Button>
<Button Padding="5" Margin="15">Segundo Boton</Button>
</StackPanel>
</Window>
Window
StackPanel
Button
String
Button
String

5. 1. Los árboles lógicos y arboles
visuales
2. El árbol visual: Window
StackPanel
Button
ButtonChrome
Button
ButtonChrome
ContentPresenter ContentPresenter
TextBlock
String
TextBlock
String

6. 1. Los árboles lógicos y arboles
visuales
Beneficios:
 Podemos modificar los elementos del árbol visual usando estilos y
Triggers
 Podemos usar Templates (Plantillas) para cambiar por completo la
apariencia de un elemento.

7. 2. Plantillas de controles
1. Los controles WPF no tienen apariencia!
 Se muestran en base a Templates
 Toda su presentación visual puede ser modificada manteniendo
intacto el comportamiento.

8. 2. Plantillas de controles
1. Definiendo Plantillas:
2. Aplicando las Plantillas:
<Window.Resources>
<ControlTemplate x:Key="TemplateBoton" TargetType="{x:Type Button}">
<Border BorderBrush="Yellow" BorderThickness="3" CornerRadius="15"
Background="Blue" TextBlock.Foreground="White">
<ContentPresenter HorizontalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
</ControlTemplate>
</Window.Resources>
<Button Name="button1" Template="{StaticResource TemplateBoton}">
_Boton con template
</Button>
Contenido del
control
Nueva apariencia

9. 2. Plantillas de controles
3. Aplicando Triggers a las plantillas
<Window.Resources>
<ControlTemplate x:Key="TemplateBoton" TargetType="{x:Type Button}">
<Border Name="MiBorde" BorderBrush="Yellow" BorderThickness="3"
CornerRadius="15" Background="Blue"
TextBlock.Foreground="White">
<ContentPresenter HorizontalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MiBorde" Property="Background"
Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MiBorde" Property="Background"
Value="Pink" />
<Setter TargetName="MiBorde" Property="BorderBrush"
Value="Orange" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
Pressed:
MouseOver:

10. Lección 2. Creando controles
1. Controles de usuario
2. Controles personalizados
3. Usando los controles personalizados

11. Controles Personalizados
1. Plantillas (Templates).
1. Personalizan la apariencia
2. Reutilizan la funcionalidad de controles existentes

12. Controles Personalizados
2. Controles de Usuario (User Controls).
1. Heredan de UserControl
2. Están compuestos de otros controles que juntos logran alguna
funcionalidad.
3. Provee una superficie de diseño visual en tiempo de desarrollo

13. Controles Personalizados
3. Controles Personalizados (Custom controls).
1. Heredan Control o ContentControl
2. Definen su propia apariencia y funcionalidad
3. No provee diseño visual en tiempo de desarrollo

14. 2. Controles de usuario

15. 2. Controles de usuario

16. 3. Controles personalizados

17. 3. Controles personalizados

18. 3. Controles personalizados

19. 4. Usando los controles
personalizados
1. Agregar la referencia al assembly de controles.
2. Agregar la referencia al assembly en XAML:
3. Agregar el control en XAML:
xmlns:cc="clr-namespace:WpfCustomControlLibrary1;
assembly=WpfCustomControlLibrary1"
<cc:CustomControl1 />