WPF: controles personalizados
Las aplicaciones WPF permiten crear controles personalizados, lo que facilita la creación de controles personalizables y ricos en funciones. Los controles personalizados se utilizan cuando todos los controles integrados proporcionados por Microsoft no cumplen con sus criterios o no desea pagar por controles de terceros.
En este capítulo, aprenderá a crear controles personalizados. Antes de comenzar a echar un vistazo a los controles personalizados, primero echemos un vistazo rápido a un control de usuario.
Control de usuario
Los controles de usuario proporcionan una forma de recopilar y combinar diferentes controles integrados y empaquetarlos en XAML reutilizable. Los controles de usuario se utilizan en los siguientes escenarios:
Si el control consta de controles existentes, es decir, puede crear un solo control de varios controles ya existentes.
Si el control no necesita soporte para la temática. Los controles de usuario no admiten personalización compleja, plantillas de control y estilos difíciles.
Si un desarrollador prefiere escribir controles utilizando el modelo de código subyacente, hay una vista y luego un código directo para los controladores de eventos.
No compartirás tu control entre aplicaciones.
Ejemplo
Vayamos a un ejemplo de control de usuario y sigamos los pasos que se indican a continuación.
Cree un nuevo proyecto de WPF y luego haga clic derecho en su solución y seleccione Agregar> Nuevo elemento ...
Se abrirá la siguiente ventana. Ahora seleccioneUser Control (WPF) y asígnele el nombre MyUserControl.
Haga clic en el botón Agregar y verá que se agregarán dos archivos nuevos (MyUserControl.xaml y MyUserControl.cs) en su solución.
Aquí está el código XAML en el que se crea un botón y un cuadro de texto con algunas propiedades en el archivo MyUserControl.xaml.
<UserControl x:Class = "WPFUserControl.MyUserControl"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable = "d" d:DesignHeight = "300" d:DesignWidth = "300">
<Grid>
<TextBox Height = "23"
HorizontalAlignment = "Left"
Margin = "80,49,0,0" Name = "txtBox"
VerticalAlignment = "Top" Width = "200" />
<Button Content = "Click Me"
Height = "23" HorizontalAlignment = "Left"
Margin = "96,88,0,0" Name = "button"
VerticalAlignment = "Top" Click = "button_Click" />
</Grid>
</UserControl>A continuación se muestra el código C # para el evento de clic de botón en el archivo MyUserControl.cs que actualiza el cuadro de texto.
using System;
using System.Windows;
using System.Windows.Controls;
namespace WPFUserControl {
/// <summary>
/// Interaction logic for MyUserControl.xaml
/// </summary>
public partial class MyUserControl : UserControl {
public MyUserControl() {
InitializeComponent();
}
private void button_Click(object sender, RoutedEventArgs e) {
txtBox.Text = "You have just clicked the button";
}
}
}Aquí está la implementación en MainWindow.xaml para agregar el control de usuario.
<Window x:Class = "XAMLUserControl.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control = "clr-namespace:WPFUserControl"
Title = "MainWindow" Height = "350" Width = "525">
<Grid>
<control:MyUserControl/>
</Grid>
</Window>Cuando compile y ejecute el código anterior, producirá la siguiente ventana.
Al hacer clic en el botón "Hacer clic en mí", notará que el texto dentro del cuadro de texto se actualiza.
Controles personalizados
Un control personalizado es una clase que ofrece su propio estilo y plantilla, que normalmente se definen en generic.xaml. Los controles personalizados se utilizan en los siguientes escenarios:
Si el control no existe y tienes que crearlo desde cero.
Si desea ampliar o agregar funcionalidad a un control preexistente agregando una propiedad adicional o una funcionalidad adicional para adaptarse a su escenario específico.
Si sus controles necesitan admitir temas y estilos.
Si desea compartir su control entre aplicaciones.
Ejemplo
Tomemos un ejemplo para comprender cómo funcionan los controles personalizados. Cree un nuevo proyecto de WPF y luego haga clic derecho en su solución y seleccione Agregar> Nuevo elemento ...
Se abrirá la siguiente ventana. Ahora seleccioneCustom Control (WPF) y nombrarlo MyCustomControl.
Haga clic en el botón Agregar y verá que se agregarán dos archivos nuevos (Themes / Generic.xaml y MyCustomControl.cs) en su solución.
Este es el código XAML en el que se establece el estilo para el control personalizado en el archivo Generic.xaml.
<ResourceDictionary
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "clr-namespace:WPFCustomControls">
<Style TargetType = "{x:Type local:MyCustomControl}"
BasedOn = "{StaticResource {x:Type Button}}">
<Setter Property = "Background" Value = "LightSalmon" />
<Setter Property = "Foreground" Value = "Blue"/>
</Style>
</ResourceDictionary>Aquí está el código C # para la clase MyCustomControl que se hereda de la clase button y en el constructor anula los metadatos.
using System;
using System.Windows;
using System.Windows.Controls;
namespace WPFCustomControls {
public class MyCustomControl : Button {
static MyCustomControl() {
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), new
FrameworkPropertyMetadata(typeof(MyCustomControl)));
}
}
}Aquí está la implementación del evento de clic de control personalizado en C # que actualiza el texto del bloque de texto.
using System;
using System.Windows;
using System.Windows.Controls;
namespace WPFCustomControls {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private void customControl_Click(object sender, RoutedEventArgs e) {
txtBlock.Text = "You have just click your custom control";
}
}
}Aquí está la implementación en MainWindow.xaml para agregar el control personalizado y un TextBlock.
<Window x:Class = "WPFCustomControls.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control = "clr-namespace:WPFCustomControls"
Title = "MainWindow" Height = "350" Width = "604">
<StackPanel>
<control:MyCustomControl x:Name = "customControl"
Content = "Click Me" Width = "70"
Margin = "10" Click = "customControl_Click"/>
<TextBlock Name = "txtBlock"
Width = "250" Height = "30"/>
</StackPanel>
</Window>Cuando compile y ejecute el código anterior, producirá la siguiente ventana con un control personalizado que es un botón personalizado.
Al hacer clic en el botón personalizado, verá que el texto dentro del bloque de texto se actualiza.
