XAML: controles personalizados

XAML tiene una de las características más poderosas proporcionadas para crear controles personalizados que facilitan la creación de controles personalizables y ricos en características. Se utilizan controles personalizados cuando todo el incorporado en los controles proporcionados por Microsoft no están cumpliendo con su criterio o que no quieren pagar por 3 ^rd partido controla.

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 técnica para 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 tematización. Los controles de usuario no admiten personalización compleja, plantillas de control y tampoco son difíciles de diseñar.
Si un desarrollador prefiere escribir controles utilizando el modelo de código subyacente donde se escribe una vista y luego un código directo para los controladores de eventos.
No compartirás tu control entre aplicaciones.

Tomemos un ejemplo de control de usuario y sigamos los pasos que se indican a continuación:

Step 1 - Cree un nuevo proyecto WPF y luego haga clic derecho en su solución y seleccione Agregar> Nuevo elemento ...

Step 2 - Se abrirá el siguiente diálogo, ahora seleccione User Control (WPF) y nombrarlo MyUserControl.

Step 3 - 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.

A continuación se muestra 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 = "XAMLUserControl.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" Width = "75" 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 XAMLUserControl {
   /// <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:XAMLUserControl" 
   Title = "MainWindow" Height = "350" Width = "525">
	
   <Grid>
      <control:MyUserControl/>
   </Grid>
	
</Window>

Cuando compile y ejecute el código anterior, producirá el siguiente resultado:

Ahora haga clic en el botón "Haga clic en mí" y verá que el texto 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.

Tomemos un ejemplo de control personalizado y sigamos los pasos que se indican a continuación.

Step 1 - Cree un nuevo proyecto WPF y luego haga clic derecho en su solución y seleccione Agregar> Nuevo elemento ...

Step 2- Se abrirá el siguiente cuadro de diálogo. Ahora seleccioneCustom Control (WPF) y nombrarlo MyCustomControl.

Step 3 - 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.

A continuación se muestra 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:XAMLCustomControls">
	
   <Style TargetType = "{x:Type local:MyCustomControl}"
      BasedOn = "{StaticResource {x:Type Button}}"> 
      <Setter Property = "Background" Value = "LightSalmon"/>
      <Setter Property = "Foreground" Value = "Blue"/>
   </Style>
	
</ResourceDictionary>

A continuación se muestra 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 XAMLCustomControls {
   public class MyCustomControl : Button {
      static MyCustomControl() {
         DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl), 
            new FrameworkPropertyMetadata(typeof(MyCustomControl)));
      }
   }
}

A continuación se muestra 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 XAMLCustomControls {
   /// <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 = "XAMLCustomControls.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:control = "clr-namespace:XAMLCustomControls" 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á el siguiente resultado. Observe que la salida contiene un control personalizado que es un botón personalizado.

Ahora haga clic en el botón personalizado. Verá que el texto del bloque de texto se actualiza.

↰ Previous page