Wat zijn besturingselementen?

Windows Presentation Foundation (WPF) bevat veel algemene UI-onderdelen die u gebruikt in bijna elke Windows-app, zoals , , , en ButtonLabel. TextBoxMenuListBox Ontwikkelaars verwijzen in het verleden naar deze objecten als besturingselementen. Ontwikkelaars gebruiken de term 'controle' losjes om elke klasse te betekenen die een zichtbaar object in een app vertegenwoordigt. Een klasse hoeft niet over te nemen van de Control klasse om een zichtbare aanwezigheid te hebben. Klassen die overnemen van de Control klasse bevatten een ControlTemplate, waardoor de consument van een besturingselement het uiterlijk van het besturingselement ingrijpend kan wijzigen zonder een nieuwe subklasse te hoeven maken. In dit artikel wordt beschreven hoe u besturingselementen gebruikt (zowel besturingselementen die overnemen van de Control klasse als die niet) in WPF.

Een exemplaar van een besturingselement maken

U kunt een controle toevoegen aan een app met behulp van Extensible Application Markup Language (XAML) of code. Bekijk bijvoorbeeld de volgende afbeelding van een WPF-venster waarmee een gebruiker om zijn naam en adres wordt gevraagd:

Dit venster heeft zes besturingselementen: twee labels, twee tekstvakken en twee knoppen. De app gebruikt XAML om deze besturingselementen te maken, zoals wordt weergegeven in het volgende fragment:

<Window x:Class="Examples.ExampleApp"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Input Record" Height="Auto" Width="300" SizeToContent="Height">
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label>Enter your name:</Label>
        <TextBox Grid.Row="0" Grid.Column="1" Name="FirstName" Margin="2" />

        <Label Grid.Row="1">Enter your address:</Label>
        <TextBox Grid.Row="1" Grid.Column="1" Name="LastName" Margin="2" />

        <Button Grid.Row="2" Grid.Column="0" Name="Reset" Margin="2">Reset</Button>
        <Button Grid.Row="2" Grid.Column="1" Name="Submit" Margin="2">Submit</Button>
    </Grid>
</Window>

U kunt alle besturingselementen op dezelfde manier maken in XAML. U kunt ook hetzelfde venster in code maken:

// Grid container which is the content of the Window
Grid container = new() { Margin = new Thickness(5) };
container.RowDefinitions.Add(new RowDefinition());
container.RowDefinitions.Add(new RowDefinition());
container.RowDefinitions.Add(new RowDefinition());
container.ColumnDefinitions.Add(new ColumnDefinition());
container.ColumnDefinitions.Add(new ColumnDefinition());

// Create the two labels, assign the second label to the second row
Label labelName = new() { Content = "Enter your name:" };
container.Children.Add(labelName);

Label labelAddress = new() { Content = "Enter your address:" };
Grid.SetRow(labelAddress, 1);
container.Children.Add(labelAddress);

// Create the two textboxes, assign both to the second column and
// assign the second textbox to the second row.
TextBox textboxName = new() { Margin = new Thickness(2) };
Grid.SetColumn(textboxName, 1);
container.Children.Add(textboxName);

TextBox textboxAddress = new() { Margin = new Thickness(2) };
Grid.SetRow(textboxAddress, 1);
Grid.SetColumn(textboxAddress, 1);
container.Children.Add(textboxAddress);

// Create the two buttons, assign both to the third row and
// assign the second button to the second column.
Button buttonReset = new() { Margin = new Thickness(2), Content = "Reset" };
Grid.SetRow(buttonReset, 2);
container.Children.Add(buttonReset);

Button buttonSubmit = new() { Margin = new Thickness(2), Content = "Submit" };
Grid.SetColumn(buttonSubmit, 1);
Grid.SetRow(buttonSubmit, 2);
container.Children.Add(buttonSubmit);

// Create the popup window and assign the container (Grid) as its content
Window inputWindow = new()
{
    Title = "Input Record",
    Height = double.NaN,
    Width = 300,
    SizeToContent = SizeToContent.Height,
    Content = container
};

inputWindow.Show();

' Grid container which is the content of the Window
Dim container As New Grid() With {.Margin = New Thickness(5)}
container.RowDefinitions.Add(New RowDefinition())
container.RowDefinitions.Add(New RowDefinition())
container.RowDefinitions.Add(New RowDefinition())
container.ColumnDefinitions.Add(New ColumnDefinition())
container.ColumnDefinitions.Add(New ColumnDefinition())

' Create the two labels, assign the second label to the second row
Dim labelName As New Label() With {.Content = "Enter your name:"}
container.Children.Add(labelName)

Dim labelAddress As New Label() With {.Content = "Enter your address:"}
Grid.SetRow(labelAddress, 1)
container.Children.Add(labelAddress)

' Create the two textboxes, assign both to the second column and
' assign the second textbox to the second row.
Dim textboxName As New TextBox() With {.Margin = New Thickness(2)}
Grid.SetColumn(textboxName, 1)
container.Children.Add(textboxName)

Dim textboxAddress As New TextBox() With {.Margin = New Thickness(2)}
Grid.SetRow(textboxAddress, 1)
Grid.SetColumn(textboxAddress, 1)
container.Children.Add(textboxAddress)

' Create the two buttons, assign both to the third row and
' assign the second button to the second column.
Dim buttonReset As New Button() With {.Margin = New Thickness(2), .Content = "Reset"}
Grid.SetRow(buttonReset, 2)
container.Children.Add(buttonReset)

Dim buttonSubmit As New Button() With {.Margin = New Thickness(2), .Content = "Submit"}
Grid.SetColumn(buttonSubmit, 1)
Grid.SetRow(buttonSubmit, 2)
container.Children.Add(buttonSubmit)

' Create the window and assign the container (Grid) as its content
Dim inputWindow As New Window() With
{
    .Title = "Input Record",
    .Height = Double.NaN,
    .Width = 300,
    .SizeToContent = SizeToContent.Height,
    .Content = container
}

inputWindow.Show()

Abonneren op gebeurtenissen

U kunt zich abonneren op de gebeurtenis van een besturingselement met behulp van XAML of code, maar u kunt alleen een gebeurtenis in code verwerken.

Stel in XAML de gebeurtenis in als een kenmerk voor het element. U kunt de <Element.Event>handler<Element.Event> notatie niet gebruiken voor gebeurtenissen. In het volgende fragment ziet u hoe u zich abonneert op de Click gebeurtenis van een Button:

<Button Click="Submit_Click" Grid.Row="2" Grid.Column="1" Name="Submit" Margin="2">Submit</Button>

U kunt als volgt hetzelfde doen in code:

Button buttonSubmit = new() { Margin = new Thickness(2), Content = "Submit" };
buttonSubmit.Click += Submit_Click;

Dim buttonSubmit As New Button() With {.Margin = New Thickness(2), .Content = "Submit"}
AddHandler buttonSubmit.Click, AddressOf Submit_Click

Het volgende fragment behandelt de Click gebeurtenis van een Button.

private void Submit_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Someone clicked the submit button.");
}

Private Sub Submit_Click(sender As Object, e As Windows.RoutedEventArgs)
    MessageBox.Show("Someone clicked the submit button.")
End Sub

Het uiterlijk van een besturingselement wijzigen

Het is gebruikelijk om de uitstraling van een besturingselement te wijzigen, zodat deze past bij de uitstraling van uw app. U kunt het uiterlijk van een besturingselement wijzigen door een van de volgende handelingen uit te voeren, afhankelijk van wat u wilt bereiken:

• Wijzig de waarde van een eigenschap van het besturingselement.
• Maak een Style voor het besturingselement.
• Maak een nieuw ControlTemplate voor het besturingselement.

De eigenschap van een besturingselement wijzigen

Veel besturingselementen hebben eigenschappen die u kunt gebruiken om te wijzigen hoe het besturingselement wordt weergegeven, zoals de achtergrond van een knop. Stel de waarde-eigenschappen in zowel XAML als code in. In het volgende voorbeeld worden de Background, FontSizeen FontWeight eigenschappen ingesteld op een Button in XAML:

<Button Grid.Row="2" Grid.Column="1" Name="Submit" Margin="2" Content="Submit">
    <Button.FontSize>18</Button.FontSize>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Background>
        <LinearGradientBrush>
            <GradientStop Color="#0073E6" Offset="0.0" />
            <GradientStop Color="#81D4FA" Offset="0.9" />
        </LinearGradientBrush>
    </Button.Background>
</Button>

U kunt als volgt hetzelfde doen in code:

Button buttonSubmit = new() { Margin = new Thickness(2), Content = "Submit" };
buttonSubmit.FontSize = 18f;
buttonSubmit.FontWeight = FontWeights.Bold;
buttonSubmit.Background =
    new LinearGradientBrush(
        (Color)ColorConverter.ConvertFromString("#0073E6"),
        (Color)ColorConverter.ConvertFromString("#81D4FA"),
        new Point(0d, 0d),
        new Point(0.9d, 0d));

Dim buttonSubmit As New Button() With {.Margin = New Thickness(2), .Content = "Submit"}
buttonSubmit.FontSize = 18.0F
buttonSubmit.FontWeight = FontWeights.Bold
buttonSubmit.Background =
        New LinearGradientBrush(
            ColorConverter.ConvertFromString("#0073E6"),
            ColorConverter.ConvertFromString("#81D4FA"),
            New Point(0D, 0D),
            New Point(0.9D, 0D))

In de volgende afbeelding ziet u het voorbeeldvenster:

Een stijl voor een besturingselement maken

WPF biedt u uitgebreide mogelijkheden om het uiterlijk van besturingselementen op te geven door een Style, in plaats van eigenschappen in te stellen voor elk besturingselement. Normaal gesproken definieert u Style in XAML binnen een ResourceDictionary, zoals de Resources eigenschap van een controle of venster. Resources zijn van toepassing op het bereik waar u ze declareert. Zie Overzicht van XAML-resources voor meer informatie.

In het volgende voorbeeld wordt een Style toegepast op elke Button binnen dezelfde Grid die de stijl definieert.

<Grid.Resources>
    <Style TargetType="{x:Type Button}">
        <Style.Setters>
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Color="#0073E6" Offset="0.0" />
                        <GradientStop Color="#81D4FA" Offset="0.9" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</Grid.Resources>

U kunt als volgt hetzelfde doen in code:

Grid container = new() { Margin = new Thickness(5) };
container.RowDefinitions.Add(new RowDefinition());
container.RowDefinitions.Add(new RowDefinition());
container.RowDefinitions.Add(new RowDefinition());
container.ColumnDefinitions.Add(new ColumnDefinition());
container.ColumnDefinitions.Add(new ColumnDefinition());

Style buttonStyle = new(typeof(Button));
buttonStyle.Setters.Add(new Setter(Button.FontSizeProperty, 18d));
buttonStyle.Setters.Add(new Setter(Button.FontWeightProperty, FontWeights.Bold));
buttonStyle.Setters.Add(new Setter(Button.BackgroundProperty,
    new LinearGradientBrush(
        (Color)ColorConverter.ConvertFromString("#0073E6"),
        (Color)ColorConverter.ConvertFromString("#81D4FA"),
        new Point(0d, 0d),
        new Point(0.9d, 0d))));

container.Resources.Add(typeof(Button), buttonStyle);

Dim container As New Grid() With {.Margin = New Thickness(5)}
container.RowDefinitions.Add(New RowDefinition())
container.RowDefinitions.Add(New RowDefinition())
container.RowDefinitions.Add(New RowDefinition())
container.ColumnDefinitions.Add(New ColumnDefinition())
container.ColumnDefinitions.Add(New ColumnDefinition())

Dim buttonStyle As New Style(GetType(Button))
buttonStyle.Setters.Add(New Setter(Button.FontSizeProperty, 18.0R))
buttonStyle.Setters.Add(New Setter(Button.FontWeightProperty, FontWeights.Bold))
buttonStyle.Setters.Add(New Setter(Button.BackgroundProperty,
        New LinearGradientBrush(
            ColorConverter.ConvertFromString("#0073E6"),
            ColorConverter.ConvertFromString("#81D4FA"),
            New Point(0D, 0D),
            New Point(0.9D, 0D))))

container.Resources.Add(GetType(Button), buttonStyle)

In de volgende afbeelding ziet u de stijl die is toegepast op het raster van het venster, waardoor het uiterlijk van de twee knoppen wordt gewijzigd:

In plaats van de stijl toe te passen op alle besturingselementen van een specifiek type, kunt u deze toewijzen aan specifieke besturingselementen door een sleutel toe te voegen aan de stijl in de resourcewoordenlijst en te verwijzen naar die sleutel in de Style eigenschap van het besturingselement. Zie Styling and Templatingvoor meer informatie over stijlen.

Een ControlTemplate maken

Een Style set eigenschappen op meerdere besturingselementen tegelijk, maar soms moet u het uiterlijk van een besturingselement aanpassen buiten wat u met een Stylebesturingselement kunt doen. Klassen die overnemen van de Control klasse hebben een ControlTemplate, waarmee de structuur en het uiterlijk van een besturingselement worden gedefinieerd.

Overweeg het Button besturingselement, een veelgebruikt besturingselement dat wordt gebruikt door bijna elke app. Het primaire gedrag van een knop is het inschakelen van een app om actie te ondernemen wanneer de gebruiker de knop selecteert. Standaard wordt de knop in WPF weergegeven als een verhoogde rechthoek. Tijdens het ontwikkelen van een app wilt u misschien profiteren van het gedrag van een knop, dat wil weten hoe de gebruiker met de knop communiceert, waardoor een Click gebeurtenis wordt gegenereerd, maar u kunt het uiterlijk van de knop wijzigen buiten wat u kunt doen door de eigenschappen van de knop te wijzigen. In dit geval kunt u een nieuwe ControlTemplatemaken.

In het volgende voorbeeld wordt deze ControlTemplate voor een Button aangemaakt. ControlTemplate creëert een visual voor de Button die een rand met afgeronde hoeken en een achtergrond met kleurovergang presenteert.

<Button Grid.Row="2" Grid.Column="1" Name="Submit" Margin="2" Content="Submit">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Name="Border" CornerRadius="10" 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="PeachPuff" 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="LightBlue" Offset="0.9" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

U kunt als volgt hetzelfde doen in code. Met de volgende code wordt een XAML-tekenreeks gemaakt en geparseerd om een sjabloon te genereren die u kunt toepassen. Deze methode is de ondersteunde manier om tijdens runtime een sjabloon te genereren.

Button buttonSubmit = new() { Margin = new Thickness(2), Content = "Submit" };

// Create the XAML used to define the button template
const string xaml = """
    <ControlTemplate TargetType="Button">
        <Border Name="Border" CornerRadius="10" 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="PeachPuff" 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="LightBlue" Offset="0.9" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    """;

// Load the XAML into a stream that can be parsed
using MemoryStream stream = new(System.Text.Encoding.UTF8.GetBytes(xaml));

// Create a parser context and add the default namespace and 
// the x namespace, which is common to WPF XAML
System.Windows.Markup.ParserContext context = new();
context.XmlnsDictionary.Add("", "http://schemas.microsoft.com/winfx/2006/xaml/presentation");
context.XmlnsDictionary.Add("x", "http://schemas.microsoft.com/winfx/2006/xaml");

// Parse the XAML and assign it to the button's template
buttonSubmit.Template = (ControlTemplate)System.Windows.Markup.XamlReader.Load(stream, context);

// Set the other properties of the button
Grid.SetColumn(buttonSubmit, 1);
Grid.SetRow(buttonSubmit, 2);

// Assign the button to the grid container
container.Children.Add(buttonSubmit);

Dim buttonSubmit As New Button() With {.Margin = New Thickness(2), .Content = "Submit"}

' Create the XAML used to define the button template
Const xaml As String = "
    <ControlTemplate TargetType=""Button"">
        <Border Name=""Border"" CornerRadius=""10"" 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=""PeachPuff"" 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=""LightBlue"" Offset=""0.9"" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>"

' Load the XAML into a stream that can be parsed
Using stream As New MemoryStream(System.Text.Encoding.UTF8.GetBytes(xaml))

    ' Create a parser context and add the default namespace and 
    ' the x namespace, which is common to WPF XAML
    Dim context = New System.Windows.Markup.ParserContext()
    context.XmlnsDictionary.Add("", "http://schemas.microsoft.com/winfx/2006/xaml/presentation")
    context.XmlnsDictionary.Add("x", "http://schemas.microsoft.com/winfx/2006/xaml")

    ' Parse the XAML and assign it to the button's template
    buttonSubmit.Template = System.Windows.Markup.XamlReader.Load(stream, context)
End Using

' Set the other properties of the button
Grid.SetColumn(buttonSubmit, 1)
Grid.SetRow(buttonSubmit, 2)

' Assign the button to the grid container
container.Children.Add(buttonSubmit)

In de volgende afbeelding ziet u hoe de sjabloon eruitziet wanneer deze wordt toegepast:

In het vorige voorbeeld past u de ControlTemplate toe op een enkele knop. U kunt echter een ControlTemplate stijl toewijzen aan een Style en deze toepassen op alle knoppen, zoals aangetoond in de sectie Een stijl voor een besturingselement maken.

Zie Styling en Templating voor meer informatie over hoe u kunt profiteren van de unieke functies die een sjabloon biedt.

Rijke inhoud in bedieningselementen

De meeste klassen die overnemen van de Control klasse, kunnen uitgebreide inhoud bevatten. Een Label kan bijvoorbeeld elk object bevatten, zoals een tekenreeks, een Image, of een Panel. De volgende klassen bieden ondersteuning voor uitgebreide inhoud en fungeren als basisklassen voor de meeste besturingselementen in WPF:

• ContentControl— Enkele voorbeelden van klassen die overnemen van deze klasse zijn Label, Buttonen ToolTip.

• ItemsControl— Enkele voorbeelden van klassen die overnemen van deze klasse zijn ListBox, Menuen StatusBar.

• HeaderedContentControl— Enkele voorbeelden van klassen die overnemen van deze klasse zijn TabItem, GroupBoxen Expander.

• HeaderedItemsControl— Enkele voorbeelden van klassen die overnemen van deze klasse zijn MenuItem, TreeViewItemen ToolBar.

Verwante inhoud

• Stijlen en templatebewerking
• Overzicht van gegevensbinding