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
Lección 1. Plantillas de Controles y Temas
1. Los árboles lógicos y arboles visuales
2. Plantillas de controles
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
1. Los árboles lógicos y arboles visuales
2. El árbol visual:
Window
StackPanel
Button
ButtonChrome
Button
ButtonChrome
ContentPresenter ContentPresenter
TextBlock
String
TextBlock
String
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.
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.
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
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:
Lección 2. Creando controles 1. Controles de usuario
2. Controles personalizados
3. Usando los controles personalizados
Controles Personalizados 1. Plantillas (Templates).
1. Personalizan la apariencia
2. Reutilizan la funcionalidad de controles existentes
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
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