Cenni preliminari sui controlli
Aggiornamento: novembre 2007
Windows Presentation Foundation (WPF) viene fornito con molti dei componenti comuni dell'interfaccia utente utilizzati in ogni applicazione Windows, ad esempio Button, Label, TextBox, Menu e ListBox. Questi oggetti sono denominati controlli. Sebbene WPF SDK continui a utilizzare il termine "controllo" per indicare qualsiasi classe che rappresenta un oggetto visibile in un'applicazione, è importante notare che una classe non deve ereditare dalla classe Control per essere visibilmente presente. Le classi che ereditano dalla classe Control contengono un oggetto ControlTemplate che consente all'utente di un controllo di modificarne radicalmente l'aspetto senza dover creare una nuova sottoclasse. In questo argomento viene illustrato come utilizzare in WPF i controlli, sia quelli che ereditano dalla classe Control sia gli altri.
Creazione di un'istanza di un controllo
È possibile aggiungere un controllo a un'applicazione utilizzando Extensible Application Markup Language (XAML) o il codice. Nell'esempio riportato di seguito viene illustrato come creare una semplice applicazione in cui venga chiesto all'utente di immettere il nome e il cognome. In questo esempio vengono creati sei controlli, due etichette, due caselle di testo e due pulsanti, in XAML. Tutti i controlli possono essere creati in modo analogo.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label>
Enter your first name:
</Label>
<TextBox Grid.Row="0" Grid.Column="1"
Name="firstName" Margin="0,5,10,5"/>
<Label Grid.Row="1" >
Enter your last name:
</Label>
<TextBox Grid.Row="1" Grid.Column="1"
Name="lastName" Margin="0,5,10,5"/>
<Button Grid.Row="2" Grid.Column="0"
Name="submit" Margin="2">
View message
</Button>
<Button Grid.Row="2" Grid.Column="1"
Name="Clear" Margin="2">
Clear Name
</Button>
</Grid>
Nell'esempio riportato di seguito viene creata la stessa applicazione nel codice. Per ragioni di brevità, la creazione del controllo Grid, grid1 è stata esclusa dall'esempio. grid1 presenta le stesse definizioni di righe e colonne illustrate nel precedente esempio XAML.
Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button
Sub CreateControls()
firstNameLabel = New Label()
firstNameLabel.Content = "Enter your first name:"
grid1.Children.Add(firstNameLabel)
firstName = New TextBox()
firstName.Margin = New Thickness(0, 5, 10, 5)
Grid.SetColumn(firstName, 1)
grid1.Children.Add(firstName)
lastNameLabel = New Label()
lastNameLabel.Content = "Enter your last name:"
Grid.SetRow(lastNameLabel, 1)
grid1.Children.Add(lastNameLabel)
lastName = New TextBox()
lastName.Margin = New Thickness(0, 5, 10, 5)
Grid.SetColumn(lastName, 1)
Grid.SetRow(lastName, 1)
grid1.Children.Add(lastName)
submit = New Button()
submit.Content = "View message"
Grid.SetRow(submit, 2)
grid1.Children.Add(submit)
clear = New Button()
clear.Content = "Clear Name"
Grid.SetRow(clear, 2)
Grid.SetColumn(clear, 1)
grid1.Children.Add(clear)
End Sub 'CreateControls
Label firstNameLabel;
Label lastNameLabel;
TextBox firstName;
TextBox lastName;
Button submit;
Button clear;
void CreateControls()
{
firstNameLabel = new Label();
firstNameLabel.Content = "Enter your first name:";
grid1.Children.Add(firstNameLabel);
firstName = new TextBox();
firstName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(firstName, 1);
grid1.Children.Add(firstName);
lastNameLabel = new Label();
lastNameLabel.Content = "Enter your last name:";
Grid.SetRow(lastNameLabel, 1);
grid1.Children.Add(lastNameLabel);
lastName = new TextBox();
lastName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(lastName, 1);
Grid.SetRow(lastName, 1);
grid1.Children.Add(lastName);
submit = new Button();
submit.Content = "View message";
Grid.SetRow(submit, 2);
grid1.Children.Add(submit);
clear = new Button();
clear.Content = "Clear Name";
Grid.SetRow(clear, 2);
Grid.SetColumn(clear, 1);
grid1.Children.Add(clear);
}
Modifica dell'aspetto di un controllo
Modificare l'aspetto di un controllo per adattare l'aspetto dell'applicazione è un'operazione alquanto comune. È possibile modificare l'aspetto di un controllo eseguendo una delle operazioni indicate di seguito, a seconda del risultato che si desidera ottenere:
Modificare il valore di una proprietà del controllo.
Creare un oggetto Style per il controllo.
Creare un nuovo oggetto ControlTemplate per il controllo.
Modifica del valore di una proprietà di un controllo
Esistono proprietà che consentono di modificare l'aspetto del controllo, ad esempio la proprietà Background di un controllo Button. È possibile impostare le proprietà del valore in XAML e nel codice. Nell'esempio riportato di seguito vengono impostate le proprietà Background, FontSize e FontWeight di un controllo Button in XAML.
<Button FontSize="14" FontWeight="Bold">
<!--Set the Background property of the Button to
a LinearGradientBrush.-->
<Button.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Button.Background>
View message
</Button>
Nell'esempio riportato di seguito vengono impostate le stesse proprietà nel codice.
Dim buttonBrush As New LinearGradientBrush()
buttonBrush.StartPoint = New Point(0, 0.5)
buttonBrush.EndPoint = New Point(1, 0.5)
buttonBrush.GradientStops.Add(New GradientStop(Colors.Green, 0))
buttonBrush.GradientStops.Add(New GradientStop(Colors.White, 0.9))
submit.Background = buttonBrush
submit.FontSize = 14
submit.FontWeight = FontWeights.Bold
LinearGradientBrush buttonBrush = new LinearGradientBrush();
buttonBrush.StartPoint = new Point(0, 0.5);
buttonBrush.EndPoint = new Point(1, 0.5);
buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));
submit.Background = buttonBrush;
submit.FontSize = 14;
submit.FontWeight = FontWeights.Bold;
Creazione di uno stile per un controllo
In WPF è possibile specificare l'aspetto dei controlli a livello globale, anziché impostare proprietà su ogni istanza nell'applicazione, creando un oggetto Style. Nell'esempio riportato di seguito viene creato un oggetto Style da applicare a ogni controllo Button dell'applicazione. Le definizioni Style vengono in genere eseguite in XAML in un ResourceDictionary, ad esempio la proprietà Resources dell'oggetto FrameworkElement.
<Style TargetType="Button">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
È anche possibile applicare uno stile solo a determinati controlli di un tipo specifico assegnando una chiave allo stile e specificando quella chiave nella proprietà Style del controllo. Per ulteriori informazioni sugli stili, vedere Applicazione di stili e modelli.
Creazione di un ControlTemplate
Style consente di impostare proprietà su più controlli alla volta, anche se a volte è necessario personalizzare l'aspetto di un Control in modo più esteso rispetto a quanto è possibile ottenere creando un oggetto Style. Le classi che ereditano dalla classe Control dispongono di un oggetto ControlTemplate che definisce la struttura e l'aspetto di un Control. La proprietà Template di un Control è pubblica, pertanto è possibile assegnare a un Control un ControlTemplate diverso da quello predefinito. È spesso possibile specificare un nuovo ControlTemplate per un Control anziché ereditare da un controllo per personalizzare l'aspetto di un Control.
Si consideri un controllo molto comune, Button. Il comportamento primario di un controllo Button consiste nel consentire a un'applicazione di intraprendere una qualche azione quando l'utente fa clic su di esso. Per impostazione predefinita, il controllo Button in WPF ha l'aspetto di un rettangolo in rilievo. Quando si sviluppa un'applicazione, è possibile sfruttare il comportamento di un controllo Button, tramite gestione dell'evento Click del pulsante, ma è possibile modificare l'aspetto del pulsante oltre a quanto è possibile fare modificando le proprietà del pulsante. In questo caso, è possibile creare un nuovo ControlTemplate.
Nell'esempio riportato di seguito viene creato un ControlTemplate per un controllo Button. Tramite ControlTemplate viene creato un controllo Button con angoli arrotondati e uno sfondo sfumato. ControlTemplate contiene un Border la cui proprietà Background è LinearGradientBrush con due oggetti GradientStop. Il primo oggetto GradientStop utilizza l'associazione dati per associare la proprietà Color di GradientStop al colore dello sfondo del pulsante. Quando si imposta la proprietà Background del controllo Button, il colore di quel valore verrà utilizzato come primo GradientStop. Per ulteriori informazioni sull'associazione dati, vedere Cenni preliminari sull'associazione dati. Nell'esempio viene inoltre creato un oggetto Trigger che modifica l'aspetto del controllo Button quando IsPressed è true.
<!--Define a template that creates a gradient-colored button.-->
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
CornerRadius="20"
BorderThickness="1"
BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<!--Change the appearance of
the button when the user clicks it.-->
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="DarkSlateGray" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
Background="Green">View message</Button>
Nota
Affinché l'esempio funzioni correttamente, la proprietà Background del controllo Button deve essere impostata su SolidColorBrush.
Sottoscrizione agli eventi
È possibile sottoscrivere l'evento di un controllo utilizzando XAML o il codice, ma è possibile gestire un evento solo nel codice. Nell'esempio riportato di seguito viene illustrato come sottoscrivere l'evento Click di un controllo Button.
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
Background="Green">View message</Button>
AddHandler submit.Click, AddressOf submit_Click
submit.Click += new RoutedEventHandler(submit_Click);
Nell'esempio riportato di seguito viene gestito l'evento Click di un controllo Button.
Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)
End Sub 'submit_Click
void submit_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}
Contenuto completo nei controlli
La maggior parte delle classi che eredita dalla classe Control può contenere contenuto completo. Ad esempio, un oggetto Label può contenere qualsiasi oggetto, ad esempio una stringa, un controllo Image o un controllo Panel. Le classi riportate di seguito supportano contenuto completo e costituiscono le classi base per la maggior parte dei controlli in WPF.
ContentControl--Alcuni esempi di classi che ereditano da questa classe sono Label, Button e ToolTip.
ItemsControl--Alcuni esempi di classi che ereditano da questa classe sono ListBox, Menu e StatusBar.
HeaderedContentControl--Alcuni esempi di classi che ereditano da questa classe sono TabItem, GroupBox e Expander.
HeaderedItemsControl--Alcuni esempi di classi che ereditano da questa classe sono MenuItem, TreeViewItem e ToolBar.
Per ulteriori informazioni su queste classi, vedere Cenni preliminari sul modello di contenuto dei controlli.
Vedere anche
Attività
Procedura: attivare un comando
Concetti
Applicazione di stili e modelli
Cenni preliminari sui modelli di dati
Cenni preliminari sull'associazione dati