Controlli
Windows Presentation Foundation (WPF) viene fornito con molti dei componenti comuni dell'interfaccia utente usati in quasi tutte le applicazioni Windows, ad esempio Button, Label, TextBox, Menue ListBox. Storicamente, questi oggetti sono stati definiti controlli. Mentre WPF SDK continua a usare il termine "control" per indicare in modo libero qualsiasi classe che rappresenta un oggetto visibile in un'applicazione, è importante notare che una classe non deve ereditare dalla classe Control per avere una presenza visibile. Le classi che ereditano dalla classe Control contengono un ControlTemplate, il quale consente all'utente di un controllo di modificarne radicalmente l'aspetto senza la necessità di creare una nuova sotto-classe. Questo argomento illustra in che modo i controlli (sia quelli che ereditano dalla classe Control che quelli che non lo fanno) vengono comunemente usati in WPF.
Creazione di un'istanza di un controllo
Puoi aggiungere un controllo a un'applicazione usando Extensible Application Markup Language (XAML) o il codice. Nell'esempio seguente viene illustrato come creare una semplice applicazione che chiede all'utente il nome e il cognome. Questo esempio crea 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 seguente viene creata la stessa applicazione nel codice. Per brevità, la creazione del Grid, grid1, è stata esclusa dall'esempio.
grid1 ha le stesse definizioni di colonna e di riga, come illustrato nell'esempio XAML precedente.
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);
}
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
Modifica dell'aspetto di un controllo
È comune modificare l'aspetto di un controllo per adattare l'aspetto dell'applicazione. È possibile modificare l'aspetto di un controllo eseguendo una delle operazioni seguenti, a seconda di ciò che si vuole eseguire:
Modificare il valore di una proprietà del controllo .
Creare un Style per il controllo.
Crea un nuovo ControlTemplate per il controllo.
Modifica del valore della proprietà di un controllo
Molti controlli dispongono di proprietà che consentono di modificare la modalità di visualizzazione del controllo, ad esempio il Background di un Button. Puoi impostare le proprietà del valore sia in XAML che nel codice. L'esempio seguente imposta le proprietà Background, FontSizee FontWeight in un 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 seguente vengono impostate le stesse proprietà nel codice.
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;
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
Creazione di uno stile per un controllo
WPF consente di specificare l'aspetto dei controlli in blocco, invece di impostare le proprietà in ogni istanza dell'applicazione, creando un Style. Nell'esempio seguente viene creato un Style applicato a ogni Button nell'applicazione. Style vengono generalmente definite in XAML in un ResourceDictionary, come la proprietà Resources di 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 tale chiave nella proprietà Style del controllo. Per ulteriori informazioni su stilizzazione e creazione di modelli, vedere Stilizzazione e Creazione di Modelli.
Creazione di un ControlTemplate
Un Style consente di impostare le proprietà su più controlli alla volta, ma a volte potresti voler personalizzare l'aspetto di un Control più di quanto tu possa fare creando un Style. Le classi che ereditano dalla classe Control hanno un ControlTemplate, che definisce la struttura e l'aspetto di un Control. La proprietà Template di un Control è pubblica, pertanto è possibile assegnare 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 principale di un Button consiste nel consentire a un'app di eseguire un'azione quando l'utente fa clic su di esso. Per impostazione predefinita, il Button in WPF appare come un rettangolo rialzato. Durante lo sviluppo di un'applicazione, potresti voler sfruttare il comportamento di un Button, ad esempio gestendo l'evento click del pulsante, ma potresti cambiare l'aspetto del pulsante oltre ciò che puoi ottenere cambiando le proprietà del pulsante. In questo caso, è possibile creare un nuovo ControlTemplate.
Nell'esempio seguente viene creato un ControlTemplate per un Button. Il ControlTemplate genera un Button con angoli arrotondati e uno sfondo a gradiente. Il ControlTemplate contiene un Border il cui Background è un LinearGradientBrush con due oggetti GradientStop. Il primo GradientStop usa il data binding per associare la proprietà Color del GradientStop al colore dello sfondo del pulsante. Quando si imposta la proprietà Background dell'Button, il colore di tale valore verrà utilizzato come primo GradientStop. Per ulteriori informazioni sull'associazione dati, vedere la Panoramica del Data Binding . L'esempio crea anche un Trigger che modifica l'aspetto del 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
La proprietà Background del Button deve essere impostata su un SolidColorBrush affinché l'esempio funzioni correttamente.
Sottoscrizione agli eventi
Puoi sottoscrivere l'evento di un controllo usando XAML o codice, ma puoi gestire solo un evento nel codice. Nell'esempio seguente viene illustrato come registrarsi all'evento Click di un Button.
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
Background="Green">View message</Button>
submit.Click += new RoutedEventHandler(submit_Click);
AddHandler submit.Click, AddressOf submit_Click
Nell'esempio seguente viene gestito l'evento Click di un Button.
void submit_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}
Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)
End Sub
Contenuto avanzato nei controlli
La maggior parte delle classi che ereditano dalla classe Control hanno la capacità di contenere contenuto avanzato. Ad esempio, un Label può contenere qualsiasi oggetto, ad esempio una stringa, un Imageo un Panel. Le classi seguenti forniscono supporto per contenuti avanzati e fungono da classi di base per la maggior parte dei controlli in WPF.
ContentControl: alcuni esempi di classi che ereditano da questa classe sono Label, Buttone ToolTip.
ItemsControl: alcuni esempi di classi che ereditano da questa classe sono ListBox, Menue StatusBar.
HeaderedContentControl: alcuni esempi di classi che ereditano da questa classe sono TabItem, GroupBoxe Expander.
HeaderedItemsControl- Alcuni esempi di classi che ereditano da questa classe sono MenuItem, TreeViewIteme ToolBar.
Per altre informazioni su queste classi di base, vedere modello di contenuto WPF.
Vedere anche
.NET Desktop feedback