Controlli

Articolo
08/11/2011

Windows Presentation Foundation (WPF) viene fornito con molti dei più comuni componenti dell'interfaccia utente utilizzati in quasi 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 in modo generale 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 il tipico utilizzo dei controlli in WPF, sia quelli che ereditano dalla classe Control sia gli altri.

Nel presente argomento sono contenute le seguenti sezioni.

Creazione di un'istanza di un controllo
Modifica dell'aspetto di un controllo
Sottoscrizione agli eventi
Contenuto completo nei controlli
Argomenti correlati

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à in ogni istanza nell'applicazione tramite la creazione di un oggetto Style. Nell'esempio seguente viene creato un oggetto Style, che viene applicato a ogni controllo Button dell'applicazione. Le definizioni Style vengono in genere specificate in XAML in un oggetto 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, Button viene visualizzato in WPF come 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 di base, vedere Modello di contenuto WPF.

Vedere anche

Condividi tramite

Controlli

Creazione di un'istanza di un controllo

Modifica dell'aspetto di un controllo

Modifica del valore di una proprietà di un controllo

Creazione di uno stile per un controllo

Creazione di un ControlTemplate

Sottoscrizione agli eventi

Contenuto completo nei controlli

Vedere anche

Attività

Riferimenti

Concetti

Altre risorse

Risorse aggiuntive