Steuerelemente
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.
Dieses Thema enthält folgende Abschnitte.
- Erstellen einer Instanz eines Steuerelements
- Ändern der Darstellung eines Steuerelements
- Abonnieren von Ereignissen
- Umfangreicher Inhalt in Steuerelementen
- Verwandte Abschnitte
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 Eigenschaftswerts 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 IsPressed true 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>
.gif "Hinweis") Hinweis |
|---|
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 Basisklassen finden Sie unter WPF-Inhaltsmodell.
Siehe auch
Aufgaben
Gewusst wie: Aktivieren eines Befehls
Referenz
Kategorien von Steuerelementen
Konzepte
Erstellen von Formaten und Vorlagen
Weitere Ressourcen
Exemplarische Vorgehensweisen: Erstellen einer benutzerdefinierten animierten Schaltfläche