Freigeben über

Steuerelemente

  • Artikel

Windows Presentation Foundation (WPF) enthält viele der gängigen UI-Komponenten, die in fast jeder Windows-Anwendung verwendet werden, z. B. Button, Label, TextBox, Menuund ListBox. In der Vergangenheit wurden diese Objekte als Steuerelemente bezeichnet. Während im WPF-SDK weiterhin der Begriff „Control“ (Steuerelement) für jede Klasse verwendet wird, die ein sichtbares Objekt in einer Anwendung repräsentiert, ist es wichtig zu beachten, dass eine Klasse nicht notwendigerweise von der Control-Klasse erben muss, um eine sichtbare Präsenz zu haben. Klassen, die von der Control-Klasse erben, enthalten eine ControlTemplate, die es einem Nutzer ermöglicht, die Darstellung eines Steuerelements radikal zu ändern, ohne eine neue Unterklasse erstellen zu müssen. In diesem Thema wird erläutert, wie Steuerelemente, sowohl die, die von der Control-Klasse erben, als auch diejenigen, die nicht erben, häufig in WPF verwendet werden.

Erstellen einer Instanz eines Steuerelements

Sie können einer Anwendung ein Steuerelement hinzufügen, indem Sie xaml (Extensible Application Markup Language) oder Code verwenden. Das folgende Beispiel zeigt, wie Sie eine einfache Anwendung erstellen, die einen Benutzer nach dem Vor- und Nachnamen fragt. In diesem Beispiel werden sechs Steuerelemente erstellt: zwei Beschriftungen, 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 dieselbe Anwendung im Code erstellt. Aus Gründen der Übersichtlichkeit wurde die Erstellung von Grid, grid1, aus dem Beispiel ausgeschlossen. grid1 enthält die gleichen Spalten- und Zeilendefinitionen wie im vorherigen XAML-Beispiel gezeigt.

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

Ändern der Darstellung eines Steuerelements

Es ist üblich, das Erscheinungsbild eines Steuerelements zu ändern, um das Aussehen und Verhalten Ihrer Anwendung anzupassen. Sie können die Darstellung eines Steuerelements ändern, indem Sie eine der folgenden Aktionen ausführen, je nachdem, was Sie erreichen möchten:

  • Ändern Sie den Wert einer Eigenschaft des Steuerelements.

  • Erstellen Sie eine Style-Klasse für das Steuerelement.

  • Erstellen Sie eine neue ControlTemplate für das Steuerelement.

Ändern eines Eigenschaftswerts eines Steuerelements

Viele Steuerelemente haben Eigenschaften, mit denen Sie die Darstellung des Steuerelements verändern können, z. B. den Background eines Button-Objekts. Sie können die Werteigenschaften sowohl in XAML als auch im Code festlegen. Im folgenden Beispiel werden die Eigenschaften Background, FontSize und FontWeight für ein Button-Objekt 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 im Code festgelegt.

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

Erstellen eines Stils für ein Steuerelement

WPF ermöglicht Ihnen, die Darstellung von Steuerelementen global zu bestimmen, anstatt die Eigenschaften auf jeder Instanz in der Anwendung durch Erstellen eines Style-Objekts festzulegen. Im folgenden Beispiel wird eine Style-Klasse erstellt, die auf jedes Button-Objekt in der Anwendung angewendet wird. Style-Definitionen werden in der Regel in XAML in einem ResourceDictionary definiert, wie z. B. die Eigenschaft Resources 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 auch eine Formatvorlage nur auf bestimmte Steuerelemente eines bestimmten Typs anwenden, indem Sie der Formatvorlage einen Schlüssel zuweisen und diesen Schlüssel in der eigenschaft Style Ihres Steuerelements angeben. Weitere Informationen zu Stilen finden Sie unter Erstellen von Formaten und Vorlagen.

Erstellen eines ControlTemplate-Objekts

Mit einer Style-Klasse können Sie Eigenschaften für mehrere Steuerelemente gleichzeitig festlegen. Es kann jedoch vorkommen, dass Sie die Darstellung eines Control-Steuerelements noch weiter ändern möchten, als Ihnen das Erstellen einer Style-Klasse erlaubt. Klassen, die von der Control-Klasse erben, verfügen über eine ControlTemplate, in der die Struktur und die Darstellung eines Control-Objekts definiert sind. Die Template-Eigenschaft eines Control-Objekts ist öffentlich, sodass Sie für ein Control-Objekt eine ControlTemplate festlegen können, die von der Standardeinstellung abweicht. Oft können Sie für ein Control-Objekt eine neue ControlTemplate angeben, statt sie von einem Steuerelement zu übernehmen, um die Darstellung eines Control-Objekts anzupassen.

Sehen Sie sich das sehr häufig verwendete Steuerelement Button an. Das primäre Verhalten eines Button besteht darin, eine Anwendung zu aktivieren, um eine Aktion auszuführen, wenn der Benutzer darauf klickt. In der Standardeinstellung wird das Button-Objekt in WPF als ein erhöhtes Rechteck angezeigt. Beim Entwickeln einer Anwendung können Sie das Verhalten eines Button-Steuerelements nutzen, d. h. das Klickereignis der Schaltfläche verarbeiten. Zudem haben Sie jedoch die Möglichkeit, die Darstellung der Schaltfläche weitergehend zu verändern, als dies durch Ä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-Objekt erstellt. Die ControlTemplate erstellt ein Button-Objekt mit abgerundeten Ecken und einem Hintergrund mit Farbverlauf. Die ControlTemplate enthält ein Border-Objekt, dessen Background aus einem LinearGradientBrush mit zwei GradientStop-Objekten besteht. Das erste GradientStop-Objekt verwendet die Datenbindung, um die Color-Eigenschaft des GradientStop-Objekts an die Farbe des Schaltflächenhintergrunds zu binden. Wenn Sie die Background-Eigenschaft des Button-Objekts festlegen, wird die Farbe dieses Werts als erstes GradientStop-Objekt verwendet. Weitere Informationen zur Datenbindung finden Sie unter Data Binding Overview. Im Beispiel wird außerdem ein Trigger erstellt, der die Darstellung des Button-Objekts ändert, wenn IsPressed den Wert true aufweist.

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

Anmerkung

Die Background-Eigenschaft des Button-Objekts muss auf SolidColorBrush festgelegt werden, damit dieses Beispiel ordnungsgemäß funktioniert.

Abonnieren von Ereignissen

Sie können das Ereignis eines Steuerelements abonnieren, indem Sie entweder XAML oder Code verwenden, aber Sie können ein Ereignis nur in Code behandeln. Im folgenden Beispiel wird das Abonnieren des Click-Ereignisses für ein Button-Objekt veranschaulicht.

<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

Im folgenden Beispiel wird das Click-Ereignis eines Button-Objekts verarbeitet.

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

Umfangreicher Inhalt in Steuerelementen

Die meisten Klassen, die von der Control Klasse erben, verfügen über die Kapazität, umfangreiche Inhalte zu enthalten. Beispielsweise kann ein Label-Objekt jedes Objekt enthalten, z. B. eine Zeichenfolge, ein Image oder ein Panel. Die folgenden Klassen bieten Unterstützung für umfangreiche Inhalte und dienen als Basisklassen für die meisten Steuerelemente in WPF.

Weitere Informationen zu diesen Basisklassen finden Sie unter WPF Content Model.

Siehe auch