Steuerelementvorlagen

Sie können die visuelle Struktur und das visuelle Verhalten eines Steuerelements anpassen, indem Sie eine Steuerelementvorlage im XAML-Framework erstellen. Steuerelemente verfügen über viele Eigenschaften wie Hintergrund, Vordergrundund FontFamily, die Sie festlegen können, um verschiedene Aspekte des Erscheinungsbildes des Steuerelements anzugeben. Die Änderungen, die Sie vornehmen können, indem Sie diese Eigenschaften festlegen, sind jedoch eingeschränkt. Sie können zusätzliche Anpassungen angeben, indem Sie eine Vorlage mithilfe der ControlTemplate-Klasse erstellen. Hier zeigen wir Ihnen, wie Sie ein ControlTemplate- erstellen, um das Erscheinungsbild eines CheckBox--Steuerelements anzupassen.

Wichtige APIs: ControlTemplate-Klasse, Control.Template-Eigenschaft

Beispiel für eine benutzerdefinierte Steuerelementvorlage

Standardmäßig platziert ein CheckBox-Steuerelement seinen Inhalt (die Zeichenfolge oder das Objekt neben dem CheckBox-) rechts neben dem Auswahlfeld, und ein Häkchen gibt an, dass ein Benutzer das CheckBox-ausgewählt hat. Diese Merkmale stellen die visuelle Struktur und das visuelle Verhalten des CheckBox-dar.

Dies ist ein CheckBox- mit dem Standard-ControlTemplate-, das in den Zuständen Unchecked, Checkedund Indeterminate angezeigt wird.

Sie können diese Merkmale ändern, indem Sie eine ControlTemplate- für das CheckBox-erstellen. Wenn beispielsweise der Inhalt des Kontrollkästchens unterhalb des Auswahlfelds liegen soll und Sie ein X verwenden möchten, um anzugeben, dass ein Benutzer das Kontrollkästchen aktiviert hat. Sie geben diese Merkmale in der ControlTemplate- des CheckBox-an.

Um eine benutzerdefinierte Vorlage mit einem Steuerelement zu verwenden, weisen Sie die ControlTemplate der Template Eigenschaft des Steuerelements zu. Hier ist ein CheckBox- mithilfe einer ControlTemplate- namens CheckBoxTemplate1. Im nächsten Abschnitt zeigen wir die Extensible Application Markup Language (XAML) für die ControlTemplate .

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Hier erfahren Sie, wie dieses ,, CheckBox, in den Unchecked, Checkedund Indeterminate Zuständen aussieht, nachdem wir unsere Vorlage angewendet haben.

Geben Sie die visuelle Struktur eines Steuerelements an

Wenn Sie eine ControlTemplateerstellen, kombinieren Sie FrameworkElement-Objekte , um ein einzelnes Steuerelement zu erstellen. Ein ControlTemplate- darf nur ein FrameworkElement- als Stammelement aufweisen. Das Stammelement enthält in der Regel andere FrameworkElement-Objekte . Die Kombination von Objekten bildet die visuelle Struktur des Steuerelements.

Dieser XAML-Code erstellt eine ControlTemplate- für ein CheckBox-, das angibt, dass sich der Inhalt des Steuerelements unter dem Auswahlfeld befindet. Das Stammelement ist ein Rahmen. Im Beispiel wird ein Path- beschrieben, um ein X- zu erstellen, das anzeigt, dass ein Benutzer das Kontrollkästchen-ausgewählt hat, und eine Ellipse-, die einen unbestimmten Zustand angibt. Beachten Sie, dass die Deckkraft auf 0 für den Pfad- und die Ellipse- festgelegt ist, sodass standardmäßig beide nicht angezeigt werden.

Ein TemplateBinding ist eine spezielle Bindung, die den Wert einer Eigenschaft in einer Steuerelementvorlage mit dem Wert einer anderen freigegebenen Eigenschaft des Steuerelements verknüpft. TemplateBinding kann nur in einer ControlTemplate-Definition in XAML verwendet werden. Siehe TemplateBinding-Markup-Erweiterung für mehr Informationen.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Geben Sie das visuelle Verhalten eines Steuerelements an

Ein visuelles Verhalten gibt das Erscheinungsbild eines Steuerelements an, wenn es sich in einem bestimmten Zustand befindet. Das CheckBox-steuerelement verfügt über 3 Prüfzustände: Checked, Uncheckedund Indeterminate. Der Wert der IsChecked-Eigenschaft bestimmt den Zustand der -CheckBox, und dieser Zustand bestimmt, was im Feld angezeigt wird.

In dieser Tabelle sind die möglichen Werte von IsChecked, die entsprechenden Zustände der Checkboxsowie das Erscheinungsbild der Checkboxaufgeführt.

Sie geben das Aussehen eines Steuerelements an, wenn es sich in einem bestimmten Zustand befindet, indem Sie VisualState--Objekte verwenden. Ein VisualState- enthält entweder einen Setter- oder ein Storyboard-, das die Darstellung der Elemente in der ControlTemplate-verändert. Wenn das Steuerelement in den Zustand übergeht, den die VisualState.Name-Eigenschaft festlegt, werden die Änderungen der Eigenschaft im Setter- oder im Storyboard- vorgenommen. Wenn das Steuerelement den Zustand verlässt, werden die Änderungen entfernt. Sie fügen VisualState--Objekte zu VisualStateGroup--Objekten hinzu. Sie fügen Objekte vom Typ VisualStateGroup zur angefügten Eigenschaft VisualStateManager.VisualStateGroups hinzu, die Sie auf das Stammelement FrameworkElement im ControlTemplateanwenden.

Dieser XAML-Code zeigt die VisualState--Objekte für die Zustände Checked, Uncheckedund Indeterminate an. Im Beispiel wird die angefügte Eigenschaft VisualStateManager.VisualStateGroups auf der Borderfestgelegt, die das Stammelement des ControlTemplateist. Die CheckedVisualState- gibt an, dass die Deckkraft- des Path- namens CheckGlyph (die im vorherigen Beispiel gezeigt wird) 1 ist. Der IndeterminateVisualState- gibt an, dass die Deckkraft- der Ellipse- mit dem Namen IndeterminateGlyph 1 ist. Die UncheckedVisualState- verfügt nicht über Setter- oder Storyboard-, sodass das CheckBox- zur Standarddarstellung zurückkehrt.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Um besser zu verstehen, wie VisualState- Objekte funktionieren, überlegen Sie, was passiert, wenn die CheckBox- vom Unchecked-Zustand in den Checked-Zustand wechselt, dann zum Indeterminate-Zustand und schließlich zurück zum Unchecked-Zustand. Hier sind die Übergänge.

 Weitere Informationen zum Erstellen visueller Zustände für Steuerelemente und insbesondere zur Verwendung der -Storyboard---Klasse und der Animationstypen finden Sie unter Storyboard-Animationen für visuelle Zustände.

Verwenden Sie Tools, um einfach mit Themen zu arbeiten

Eine schnelle Möglichkeit, Designs auf Ihre Steuerelemente anzuwenden, besteht darin, in der Microsoft Visual Studio Dokumentübersicht mit der rechten Maustaste auf ein Steuerelement zu klicken und Design bearbeiten oder Stil bearbeiten auszuwählen (abhängig vom Steuerelement, auf das Sie klicken). Anschließend können Sie ein vorhandenes Design anwenden, indem Sie Ressource anwenden auswählen oder ein neues Design definieren, indem Sie Leeres Design erstellenauswählen.

Bedienelemente und Barrierefreiheit

Wenn Sie eine neue Vorlage für ein Steuerelement erstellen und möglicherweise das Verhalten und die visuelle Darstellung des Steuerelements ändern, können Sie auch ändern, wie sich das Steuerelement selbst für Barrierefreiheitsframeworks darstellt. Die Windows-App unterstützt das Microsoft-Benutzeroberflächenautomatisierungs-Framework für Barrierefreiheit. Alle Standardsteuerelemente und ihre Vorlagen unterstützen allgemeine Steuerelementtypen und Muster der Benutzeroberflächenautomatisierung, die für den Zweck und die Funktion des Steuerelements geeignet sind. Diese Steuerelementtypen und Muster werden von Benutzeroberflächenautomatisierungs-Clients wie Hilfstechnologien interpretiert, und dadurch kann ein Steuerelement als Teil einer größeren barrierefreien App-UI zugänglich sein.

Um die grundlegende Steuerelementlogik zu trennen und auch einige der architektonischen Anforderungen der Benutzeroberflächenautomatisierung zu erfüllen, umfassen Steuerelementklassen ihre Barrierefreiheitsunterstützung in einer separaten Klasse, einem Automatisierungspeer. Die Automatisierungspeers interagieren manchmal mit den Steuervorlagen, da die Peers erwarten, dass bestimmte benannte Teile in den Vorlagen vorhanden sind, wodurch Funktionen wie das Aktivieren von Hilfstechnologien zum Ausführen von Aktionen auf Schaltflächen möglich werden.

Wenn Sie ein völlig neues benutzerdefiniertes Steuerelement erstellen, möchten Sie manchmal auch einen neuen Automatisierungs-Peer erstellen, um ihn damit zu verbinden. Weitere Informationen finden Sie unter Benutzerdefinierte Automatisierungs-Partner.

Weitere Informationen zur Standardvorlage eines Steuerelements

Die Themen, in denen die Formatvorlagen und Vorlagen für XAML-Steuerelemente dokumentiert werden, zeigen Ihnen Auszüge des gleichen Start-XAML, das Sie sehen würden, wenn Sie die zuvor erläuterten Techniken Bearbeiten des Designs oder Bearbeiten von Formatvorlagen verwendet haben. Jeder Themenbereich listet die Namen der visuellen Zustände, die genutzten Designressourcen und den vollständigen XAML-Code für die Stilvorlage, die das Template enthält, auf. Die Themen können hilfreich sein, wenn Sie bereits mit dem Ändern einer Vorlage begonnen haben und sehen möchten, wie die ursprüngliche Vorlage aussieht, oder um zu überprüfen, ob ihre neue Vorlage über alle erforderlichen benannten visuellen Zustände verfügt.

Themenressourcen in Steuerelementvorlagen

Für einige Attribute in den XAML-Beispielen haben Sie möglicherweise Ressourcenverweise bemerkt, die die {ThemeResource}-Markuperweiterungverwenden. Dies ist eine Technik, die es einer einzelnen Steuerelementvorlage ermöglicht, Ressourcen mit unterschiedlichen Werten zu verwenden, je nachdem, welches Design derzeit aktiv ist. Dies ist besonders wichtig für Pinsel und Farben, da der Hauptzweck der Designs darin besteht, den Benutzern zu ermöglichen, auszuwählen, ob ein dunkles, helles oder kontrastreiches Design auf das System insgesamt angewendet werden soll. Apps, die das XAML-Ressourcensystem verwenden, können einen Ressourcensatz verwenden, der für dieses Design geeignet ist, damit die Designauswahl in der Benutzeroberfläche einer App die systemweite Designauswahl des Benutzers widerspiegelt.

Holen Sie sich den Beispielcode

• WinUI Gallery-Beispiel
• Beispiel für ein benutzerdefiniertes Textbearbeitungssteuerelement