WPF - Controlli personalizzati

Le applicazioni WPF consentono di creare controlli personalizzati che rendono molto facile creare controlli ricchi di funzionalità e personalizzabili. I controlli personalizzati vengono utilizzati quando tutti i controlli incorporati forniti da Microsoft non soddisfano i criteri o non si desidera pagare per controlli di terze parti.

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 un modo 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 stili difficili.

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

  • Non condividerai il tuo controllo tra le applicazioni.

Esempio

Andiamo a un esempio di controllo utente e seguiamo i passaggi indicati di seguito.

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

  • Si aprirà la seguente finestra. Ora selezionaUser Control (WPF) e chiamalo MyUserControl.

  • Fare 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 = "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>

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

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:WPFUserControl" 
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
      <control:MyUserControl/> 
   </Grid> 
	
</Window>

Quando compili ed esegui il codice sopra, verrà prodotta la seguente finestra.

Facendo clic sul pulsante "Cliccami", noterai che il testo all'interno della casella di testo viene aggiornato.

Controlli personalizzati

Un controllo personalizzato è una classe che offre il proprio stile e modello che sono 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.

Esempio

Facciamo un esempio per capire come funzionano i controlli personalizzati. Crea un nuovo progetto WPF, quindi fai clic con il pulsante destro del mouse sulla soluzione e seleziona Aggiungi> Nuovo elemento ...

Si aprirà la seguente finestra. Ora selezionaCustom Control (WPF) e nominalo MyCustomControl.

Fare 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:WPFCustomControls">  
	
   <Style TargetType = "{x:Type local:MyCustomControl}"
      BasedOn = "{StaticResource {x:Type Button}}"> 
      <Setter Property = "Background" Value = "LightSalmon" /> 
      <Setter Property = "Foreground" Value = "Blue"/> 
   </Style> 
	
</ResourceDictionary>

Ecco il codice C # per la classe MyCustomControl che viene ereditata dalla classe button e nel costruttore sovrascrive i metadati.

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

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

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

Quando compili ed esegui il codice sopra, verrà prodotta la seguente finestra con un controllo personalizzato che è un pulsante personalizzato.

Facendo clic sul pulsante personalizzato, vedrai che il testo all'interno del blocco di testo viene aggiornato.