Übersicht über Steuerelemente

Artikel
08/20/2008

Aktualisiert: November 2007

Im Lieferumfang von Windows Presentation Foundation (WPF) sind viele der üblichen Komponenten der Benutzeroberfläche enthalten, die in fast jeder Windows-Anwendung verwendet werden, wie z. B. Button, Label, TextBox, Menu und ListBox. Diese Objekte wurden bis jetzt immer als Steuerelemente bezeichnet. Während in WPF SDK der Begriff "Steuerelement" weiterhin für mehr oder minder jede Klasse verwendet wird, die ein sichtbares Objekt in einer Anwendung repräsentiert, sollten Sie beachten, dass eine Klasse nicht von der Control-Klasse erben muss, um eine sichtbare Präsenz zu haben. Klassen, die von der Control-Klasse erben, enthalten eine ControlTemplate, die dem Consumer eines Steuerelements erlaubt, die Darstellung des Steuerelements von Grund auf zu ändern, ohne dass eine neue Unterklasse erstellt werden muss. In diesem Thema wird erläutert, wie Steuerelemente (sowohl die, die von der Control-Klasse erben, als auch jene, für die dies nicht gilt) in WPF normalerweise verwendet werden.

Erstellen einer Instanz eines Steuerelements

Sie können einer Anwendung ein Steuerelement hinzufügen, indem Sie entweder Extensible Application Markup Language (XAML) oder Code verwenden. Im folgenden Beispiel wird das Erstellen einer einfachen Anwendung beschrieben, in der ein Benutzer nach dem Vornamen und dem Nachnamen gefragt wird. In diesem Beispiel werden sechs Steuerelemente erstellt: zwei Bezeichnungen, zwei Textfelder und zwei Schaltflächen in XAML. Alle Steuerelemente können auf ähnliche Weise erstellt werden.

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

Im folgenden Beispiel wird die gleiche Anwendung in Code erstellt. Aus Platzgründen wird die Erstellung des Grid-Elements, grid1, im Beispiel nicht aufgeführt. Für grid1 gelten die gleichen Spalten- und Zeilendefinitionen wie im vorangehenden XAML-Beispiel.

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

}

Ändern der Darstellung eines Steuerelements

Die Darstellung eines Steuerelements wird häufig geändert, damit sie zum Aussehen und Verhalten der Anwendung passt. Sie können die Darstellung eines Steuerelements ändern, indem Sie eines der folgenden Verfahren ausführen. Welches Verfahren Sie verwenden, ist abhängig davon, welches Ergebnis Sie erzielen möchten.

Ändern des Werts einer Eigenschaft des Steuerelements
Erstellen von einem Style für das Steuerelement
Erstellen einer neuen ControlTemplate für das Steuerelement

Ändern des Eigenschaftenwerts eines Steuerelements

Viele Steuerelemente haben Eigenschaften, mit denen Sie ändern können, wie das Steuerelement dargestellt wird, z. B. der Background eines Button-Elements. Sie können die Werteigenschaften sowohl in XAML als auch in Code festlegen. Im folgenden Beispiel werden die Background-Eigenschaft, die FontSize-Eigenschaft und die FontWeight-Eigenschaft auf einem Button-Element in XAML festgelegt.

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

Im folgenden Beispiel werden die gleichen Eigenschaften in Code festgelegt.

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;

Erstellen eines Stils für ein Steuerelement

In WPF müssen Sie nicht Eigenschaften auf jeder Instanz in der Anwendung festlegen, sondern können die Darstellung von Steuerelementen global angeben, indem Sie einen Style erstellen. Im folgenden Beispiel wird ein Style erstellt, der auf jedes Button-Element in der Anwendung angewendet wird. Style-Definitionen werden normalerweise in XAML in einem ResourceDictionary definiert, beispielsweise die Resources-Eigenschaft für das 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>

Sie können einen Stil auch nur für bestimmte Steuerelemente eines bestimmten Typs anwenden, indem Sie dem Stil einen Schlüssel zuweisen und diesen Schlüssel in der Style-Eigenschaft des Steuerelements angeben. Weitere Informationen zu Stilen finden Sie unter Erstellen von Formaten und Vorlagen.

Erstellen einer ControlTemplate

Ein Style ermöglicht Ihnen, Eigenschaften auf mehreren Steuerelementen gleichzeitig festzulegen. Möglicherweise möchten Sie in manchen Fällen die Darstellung für ein Control so ändern, dass ein Style nicht ausreicht. Klassen, die von der Control-Klasse erben, besitzen eine ControlTemplate, die die Struktur und Darstellung für ein Control definiert. Die Template-Eigenschaft eines Control-Elements ist öffentlich, sodass Sie einem Control eine ControlTemplate zuweisen können, die von der Standardvorlage abweicht. Um die Darstellung für ein Control anzupassen, können Sie häufig eine neue ControlTemplate für ein Control angeben, statt von einem Steuerelement zu erben.

Betrachten Sie das sehr häufig vorkommende Steuerelement Button. Das primäre Verhalten eines Button-Elements ist, einer Anwendung zu ermöglichen, eine Aktion auszuführen, wenn der Benutzer auf die Schaltfläche klickt. Standardmäßig wird das Button-Element in WPF als erhobenes Rechteck angezeigt. Wenn Sie eine Anwendung entwickeln, möchten Sie möglicherweise das Verhalten eines Button-Elements dadurch nutzen, dass Sie das Klick-Ereignis der Schaltfläche behandeln. Möglicherweise nehmen Sie aber mehr Änderungen an der Darstellung der Schaltfläche vor, als durch das Ändern der Schaltflächeneigenschaften möglich ist. In diesem Fall können Sie eine neue ControlTemplate erstellen.

Im folgenden Beispiel wird eine ControlTemplate für ein Button-Element erstellt. Die ControlTemplate erstellt ein Button-Element mit abgerundeten Ecken und einem Farbverlaufshintergrund. Die ControlTemplate enthält ein Border-Element, dessen Background ein LinearGradientBrush mit zwei GradientStop-Objekten ist. Das erste GradientStop-Objekt verwendet die Datenbindung, um die Color-Eigenschaft des GradientStop-Objekts an die Hintergrundfarbe der Schaltfläche zu binden. Wenn Sie die Background-Eigenschaft des Button-Elements festlegen, wird die Farbe dieses Werts als erster GradientStop verwendet. Weitere Informationen über Datenbindung finden Sie unter Übersicht über Datenbindung. Im Beispiel wird auch ein Trigger erstellt, der die Darstellung des Button-Elements ändert, wenn IsPressedtrue ist.

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

Tipp

Die Background-Eigenschaft des Button-Elements muss auf einen SolidColorBrush festgelegt werden, damit das Beispiel ordnungsgemäß ausgeführt werden kann.

Abonnieren von Ereignissen

Sie können das Ereignis eines Steuerelements abonnieren, indem Sie entweder XAML oder Code verwenden, jedoch können Sie in Code nur ein Ereignis behandeln. Im folgenden Beispiel wird veranschaulicht, wie Sie das Click-Ereignis eines Button-Elements abonnieren.

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

Im folgenden Beispiel wird das Click-Ereignis eines Button-Elements behandelt.

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

Umfangreicher Inhalt in Steuerelementen

Die meisten Klassen, die von der Control-Klasse erben, können umfangreichen Inhalt enthalten. Zum Beispiel kann ein Label-Element ein beliebiges Objekt enthalten, z. B. eine Zeichenfolge, ein Image oder ein Panel-Element. Die folgenden Klassen bieten Unterstützung für umfangreichen Inhalt und dienen als Basisklassen für die meisten Steuerelemente in WPF.

ContentControl - Einige Beispiele für Klassen, die von dieser Klasse erben, sind Label, Button und ToolTip.
ItemsControl – Einige Beispiele für Klassen, die von dieser Klasse erben, sind ListBox, Menu und StatusBar.
HeaderedContentControl – Einige Beispiele für Klassen, die von dieser Klasse erben, sind TabItem, GroupBox und Expander.
HeaderedItemsControl – Einige Beispiele für Klassen, die von dieser Klasse erben, sind MenuItem, TreeViewItem und ToolBar.

Weitere Informationen zu diesen Klassen finden Sie unter Übersicht über Inhaltsmodelle für Steuerelemente.

Siehe auch

Freigeben über

Übersicht über Steuerelemente

Erstellen einer Instanz eines Steuerelements

Ändern der Darstellung eines Steuerelements

Ändern des Eigenschaftenwerts eines Steuerelements

Erstellen eines Stils für ein Steuerelement

Erstellen einer ControlTemplate

Abonnieren von Ereignissen

Umfangreicher Inhalt in Steuerelementen

Siehe auch

Aufgaben

Konzepte

Referenz

Weitere Ressourcen

Zusätzliche Ressourcen