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

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

Lección 2. Creando controles

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

2. Controles de usuario

2. Controles de usuario

3. Controles personalizados

3. Controles personalizados

3. Controles personalizados

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 />