XAML: controlli personalizzati

XAML ha una delle funzionalità più potenti fornite per creare controlli personalizzati che rendono molto facile creare controlli ricchi di funzionalità e personalizzabili. I controlli personalizzati vengono utilizzati quando tutto il built-in controlli forniti da Microsoft non stanno adempiendo ai suoi criteri o non si vogliono pagare per 3 rd controlli di partito.

In questo capitolo imparerai come creare controlli personalizzati. Prima di iniziare a dare un'occhiata ai controlli personalizzati, diamo prima una rapida occhiata a un controllo utente.

Controllo utente

I controlli utente forniscono una tecnica per raccogliere e combinare diversi controlli incorporati insieme e impacchettarli in XAML riutilizzabile. I controlli utente vengono utilizzati nei seguenti scenari:

  • Se il controllo è costituito da controlli esistenti, ovvero è possibile creare un singolo controllo di più controlli già esistenti.

  • Se il controllo non necessita di supporto per la creazione dei temi. I controlli utente non supportano personalizzazioni complesse, modelli di controllo e anche stili difficili.

  • Se uno sviluppatore preferisce scrivere i controlli utilizzando il modello code-behind in cui viene scritta una vista e quindi un codice diretto per i gestori di eventi.

  • Non condividerai il tuo controllo tra le applicazioni.

Facciamo un esempio di controllo utente e seguiamo i passaggi indicati di seguito:

  • Step 1 - Crea un nuovo progetto WPF, quindi fai clic con il pulsante destro del mouse sulla soluzione e seleziona Aggiungi> Nuovo elemento ...

  • Step 2 - Si aprirà la seguente finestra di dialogo, ora seleziona User Control (WPF) e nominalo MyUserControl.

  • Step 3 - Fai clic sul pulsante Aggiungi e vedrai che due nuovi file (MyUserControl.xaml e MyUserControl.cs) verranno aggiunti alla tua soluzione.

Di seguito è riportato il codice XAML in cui vengono creati un pulsante e una casella di testo con alcune proprietà nel file 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>

Di seguito è riportato il codice C # per l'evento clic sul pulsante nel file MyUserControl.cs che aggiorna la casella di testo.

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"; 
      } 
   }
}

Ecco l'implementazione in MainWindow.xaml per aggiungere il controllo utente.

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

Quando compili ed esegui il codice sopra, produrrà il seguente output:

Ora fai clic sul pulsante "Cliccami" e vedrai che il testo della casella di testo è aggiornato.

Controlli personalizzati

Un controllo personalizzato è una classe che offre il proprio stile e modello normalmente definiti in generic.xaml. I controlli personalizzati vengono utilizzati nei seguenti scenari,

  • Se il controllo non esiste e devi crearlo da zero.

  • Se desideri estendere o aggiungere funzionalità a un controllo preesistente aggiungendo una proprietà extra o una funzionalità extra per adattarsi al tuo scenario specifico.

  • Se i controlli devono supportare la creazione di temi e lo stile.

  • Se vuoi condividere il tuo controllo tra le applicazioni.

Facciamo un esempio di controllo personalizzato e seguiamo i passaggi indicati di seguito.

  • Step 1 - Crea un nuovo progetto WPF, quindi fai clic con il pulsante destro del mouse sulla soluzione e seleziona Aggiungi> Nuovo elemento ...

  • Step 2- Si aprirà la seguente finestra di dialogo. Ora selezionaCustom Control (WPF) e nominalo MyCustomControl.

  • Step 3 - Fai clic sul pulsante Aggiungi e vedrai che due nuovi file (Themes / Generic.xaml e MyCustomControl.cs) verranno aggiunti alla tua soluzione.

Di seguito è riportato il codice XAML in cui è impostato lo stile per il controllo personalizzato nel file 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>

Di seguito è riportato il codice C # per la classe MyCustomControl che viene ereditato dalla classe button e nel costruttore sostituisce i metadati.

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)));
      }
   }
}

Di seguito è riportata l'implementazione dell'evento clic del controllo personalizzato in C # che aggiorna il testo del blocco di testo.

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"; 
      } 
   }
}

Ecco l'implementazione in MainWindow.xaml per aggiungere il controllo personalizzato e 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>

Quando compili ed esegui il codice precedente, produrrà il seguente output. Osserva che l'output contiene un controllo personalizzato che è un pulsante personalizzato.

Ora fai clic sul pulsante personalizzato. Vedrai che il testo del blocco di testo viene aggiornato.