Schnellstart: Steuerelementvorlagen

Schnellstart: Steuerelementvorlagen (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Im XAML-Framework können Sie Steuerelementvorlagen erstellen, um die visuelle Struktur und das visuelle Verhalten von Steuerelementen anzupassen. Steuerelemente besitzen viele Eigenschaften wie z. B. Background, Foreground und FontFamily, die Sie festlegen können, um verschiedene Aspekte der Darstellung des Steuerelements zu ändern. Die Anpassungen, die Sie mit diesen Eigenschaften vornehmen können, sind jedoch begrenzt. Mit der ControlTemplate-Klasse erstellen Sie eine Vorlage, die eine zusätzliche Anpassung erlaubt. Hier wird gezeigt, wie Sie eine ControlTemplate erstellen, um das Erscheinungsbild eines CheckBox-Steuerelements anzupassen.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Beispiel für eine benutzerdefinierte Steuerelementvorlage

CheckBox-Steuerelemente platzieren ihre Inhalte (die Zeichenfolge oder das Objekt neben dem CheckBox) i. d. R. rechts neben dem Auswahlfeld. Dies ist die visuelle Struktur der CheckBox. In der Standardeinstellung kennzeichnet ein Häkchen, dass ein Benutzer das CheckBox aktiviert hat. Dies ist das visuelle Verhalten des CheckBox. Sie können diese Merkmale ändern, indem Sie eine ControlTemplate für das CheckBox erstellen. Angenommen, Sie möchten den Inhalt des Kontrollkästchens unter dem Auswahlfeld anzeigen und mit einem X anzeigen, dass das Kontrollkästchen vom Benutzer aktiviert wurde. Diese Merkmale geben Sie dann in der ControlTemplate des CheckBox an.

Dies ist ein CheckBox mit der Standard-ControlTemplate in den Zuständen Unchecked, Checked und Indeterminate.

Standardvorlage für CheckBox-Steuerelemente

Wenn Sie eine benutzerdefinierte Vorlage für ein Steuerelement verwenden möchten, weisen Sie die ControlTemplate der Template-Eigenschaft des Steuerelements zu. Dies ist ein CheckBox mit einer ControlTemplate mit dem Namen CheckBoxTemplate1. Den XAML (Extensible Application Markup Language)-Code für die ControlTemplate zeigen wir im nächsten Abschnitt.


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

So sieht dieses CheckBox in den Zuständen Unchecked, Checked und Indeterminate aus, nachdem wir unsere Vorlage angewendet haben.

Benutzerdefinierte Vorlage für CheckBox-Steuerelemente

Festlegen der visuellen Struktur von Steuerelementen

Wenn Sie eine ControlTemplate erstellen, kombinieren Sie FrameworkElement-Objekte, um ein einzelnes Steuerelement zu erstellen. Eine ControlTemplate darf als Stammelement nur ein FrameworkElement haben. Das Stammelement enthält i. d. R. weitere FrameworkElement-Objekte. Die Kombination aus Objekten ergibt die visuelle Struktur des Steuerelements.

Dieser XAML-Code erstellt eine ControlTemplate für ein CheckBox, die festlegt, dass sich das Steuerelement unter dem Auswahlfeld befinden soll. Das Stammelement ist eine Border. Das Beispiel gibt einen Path an, um das X zu erstellen, mit dem angegeben wird, dass ein Benutzer das CheckBox aktiviert hat. Eine Ellipse kennzeichnet den unbestimmten Zustand. Beachten Sie, dass die Opacity im Path und in der Ellipse auf 0 festgelegt ist, sodass beide standardmäßig nicht angezeigt werden.


<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="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- 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"/>
             <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>


Festlegen des visuellen Verhaltens von Steuerelementen

Das visuelle Verhalten gibt das Erscheinungsbild eines Steuerelements in verschiedenen Zuständen an. Das CheckBox-Steuerelement besitzt 3 Aktivierungszustände: Checked, Unchecked und Indeterminate. Der Wert der IsChecked-Eigenschaft bestimmt den Zustand des CheckBox, der wiederum festlegt, was im Feld angezeigt wird.

Diese Tabelle enthält die möglichen Werte von IsChecked, die zugehörigen Zustände des CheckBox und das Erscheinungsbild des CheckBox.

IsChecked-WertCheckBox-ZustandCheckBox-Erscheinungsbild
trueCheckedEnthält ein "X".
falseUncheckedLeer.
nullIndeterminateEnthält ein Rechteck.

 

Mit VisualState-Objekten geben Sie das Erscheinungsbild eines Steuerelements in verschiedenen Zuständen an. Ein VisualState enthält ein Storyboard, das die Darstellung von Elementen in der ControlTemplate ändert. Wenn das Steuerelement den jeweiligen Zustand einnimmt, der in der VisualState.Name-Eigenschaft angegeben ist, beginnt das Storyboard. Verlässt das Steuerelement den Zustand wieder, wird das Storyboard beendet. Sie fügen VisualState-Objekte VisualStateGroup-Objekten hinzu. Sie fügen VisualStateGroup-Objekte der angefügten VisualStateManager.VisualStateGroups-Eigenschaft hinzu, die Sie im Stamm-FrameworkElement der ControlTemplate festlegen.

Dieser XAML-Code zeigt die VisualState-Objekte für die Zustände Checked, Unchecked und Indeterminate. Das Beispiel legt die angefügte VisualStateManager.VisualStateGroups-Eigenschaft in Border fest, dem Stammelement der ControlTemplate. Der CheckedVisualState gibt an, dass die Opacity des Path mit dem Namen CheckGlyph (den wir im vorherigen Beispiel gezeigt hatten) 1 ist. Der IndeterminateVisualState gibt an, dass die Opacity der Ellipse mit dem Namen IndeterminateGlyph 1 ist. Da der UncheckedVisualState kein Storyboard hat, wechselt das CheckBox wieder zur Standarddarstellung.


<ControlTemplate TargetType="CheckBox" x:Key="CheckBoxTemplate1">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="CheckGlyph"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 
                                         Storyboard.TargetName="IndeterminateGlyph"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" 
                       Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"  
                       Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"  
                       UseLayoutRounding="False" Height="21" Width="21"/>
            <!-- 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"/>
            <Rectangle x:Name="IndeterminateGlyph" 
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
                     Height="9" Width="9" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="1" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Zum besseren Verständnis der Funktionsweise von VisualState-Objekten sollten Sie berücksichtigen, was passiert, wenn das CheckBox vom Unchecked-Zustand in den Checked-Zustand, dann in den Indeterminate-Zustand und anschließend zurück in den Unchecked-Zustand wechselt. Hier sehen Sie die Übergänge.

ZustandsübergängeFolgendes passiert:CheckBox-Darstellung nach Abschluss des Übergangs
Von Unchecked in Checked. Das Storyboard von Checked VisualState startet, sodass die Opacity von CheckGlyph den Wert 1 hat. Es wird ein "X" angezeigt.
Von Checked in Indeterminate. Das Storyboard von Indeterminate VisualState startet, sodass die Opacity von IndeterminateGlyph den Wert 1 hat. Das Storyboard von Checked VisualState endet, sodass die Opacity von CheckGlyph den Wert 0 hat. Ein Kreis wird angezeigt.
Von Indeterminate in Unchecked. Das Storyboard des IndeterminateVisualState endet, sodass die Opacity von IndeterminateGlyph den Wert 0 hat. Es wird nichts angezeigt.

 

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

Verwenden Sie für die Arbeit mit Designs Tools.

Wenn Sie schnell ein Design auf Ihr Steuerelement anwenden möchten, klicken Sie auf den Microsoft Visual Studio XAML-Entwicklungsoberflächen mit der rechten Maustaste darauf und wählen Design bearbeiten oder Stil bearbeiten aus (je nach Steuerelement). Anschließend können Sie ein vorhandenes Design anwenden, indem Sie Ressource übernehmen auswählen, oder ein neues erstellen, indem Sie Create Empty auswählen.

Steuerelemente und Barrierefreiheit

Beim Erstellen einer neuen Vorlage für ein Steuerelement können Sie zusätzlich zur eventuellen Änderung des Verhaltens und der visuellen Darstellung des Steuerelements auch die Art und Weise ändern, wie sich das Steuerelement selbst für Barrierefreiheits-Frameworks repräsentiert. Die Windows-Runtime unterstützt das Benutzeroberflächenautomatisierungs-Framework von Microsoft für die Barrierefreiheit. Alle Standardsteuerelemente und zugehörigen Vorlagen bieten Unterstützung für allgemeine Steuerelementtypen zur Benutzeroberflächenautomatisierung und Muster, die für den Zweck und die Funktion des Steuerelements geeignet sind. Diese Steuerelementtypen und Muster werden von Benutzeroberflächenautomatisierungs-Clients interpretiert, beispielsweise von Hilfstechnologien, und dies ermöglicht die Zugriffsmöglichkeit auf ein Steuerelement als Bestandteil einer barrierefreien größeren UI-Benutzeroberfläche.

Um die grundlegende Steuerlogik zu trennen und auch einige architekturbezogene Anforderungen der Benutzeroberflächenautomatisierung zu erfüllen, ist die Unterstützung der Barrierefreiheit von Steuerelementklassen in einer separaten Klasse in Form eines Automatisierungspeers enthalten. Die Automatisierungspeers interagieren mitunter mit den Steuerelementvorlagen, weil die Peers von der Existenz bestimmter benannter Teile in den Vorlagen ausgehen, sodass Funktionen wie die Aktivierung von Hilfstechnologien zum Aufrufen von Schaltflächenaktionen möglich sind.

Beim Erstellen eines vollständig neuen, benutzerdefinierten Steuerelements sollten Sie mitunter auch einen neuen Automatisierungspeer für das Steuerelement erstellen. Weitere Informationen finden Sie unter Benutzerdefinierte Automatisierungspeers.

Weitere Informationen zur Standardvorlage eines Steuerelements

Wenn Sie sich die unterschiedlichen Themen unter Hinzufügen von Steuerelementen und Inhalten ansehen, stoßen Sie auf Themen, in denen die standardmäßigen Steuerelementvorlagen der vorhandenen Windows-Runtime-Steuerelemente dokumentiert sind. Beispielsweise enthält das Thema Hinzufügen von App-Leisten ein Unterthema mit der Bezeichnung AppBar-Stile und -Vorlagen.

Die Themen, in denen die Stile und Vorlagen für Windows-Runtime-Steuerelemente dokumentiert werden, enthalten Auszüge des gleichen XAML-Anfangscodes, der genutzt wird, wenn Sie die bereits erläuterten Verfahren Design bearbeiten oder Stil bearbeiten verwenden. In jedem Thema sind die Namen der Ansichtszustände, die Designressourcen und der vollständige XAML-Code für den Stil aufgeführt, der die Vorlage enthält. Die Themen können eine nützliche Hilfe darstellen, wenn Sie bereits mit der Änderung einer Vorlage begonnen haben und sehen möchten, wie die Vorlage im Originalzustand ausgesehen hat. Außerdem können Sie sicherstellen, dass die neue Vorlage über alle erforderlichen benannten Ansichtszustände verfügt.

Designressourcen in Steuerelementvorlagen

Möglicherweise sind Ihnen bei einigen Attributen in den XAML-Beispielen Ressourcenverweise aufgefallen, für die die ThemeResource-Markuperweiterung verwendet wird. Mit diesem Verfahren kann eine einzelne Steuerelementvorlage Ressourcen nutzen, bei denen es sich um unterschiedliche Werte handeln kann. Dies hängt davon ab, welches Design gerade aktiv ist. Besonders wichtig ist dies für Pinsel und Farben, da der Hauptzweck der Designs darin besteht, den Benutzern die Auswahl eines dunklen Designs, hellen Designs oder Designs mit hohem Kontrast zu ermöglichen, das auf das gesamte System angewendet wird. Apps, für die das XAML-Ressourcensystem verwendet wird, können einen Ressourcensatz nutzen, der für das jeweilige Design geeignet ist. Die Designauswahl in der UI einer App spiegelt dann die systemweite Designauswahl des Benutzers wider.

In den anderen Themen unter Hinzufügen von Steuerelementen und Inhalten werden speziell die standardmäßigen Steuerelementvorlagen der vorhandenen Windows-Runtime-Steuerelemente dokumentiert. Dabei werden in den Themen auch die Designressourcen (hauptsächlich Pinsel), die von der Standardvorlage verwendet werden, und die dazugehörigen Werte unter jedem Schema aufgelistet. Außerdem ist der gesamte Satz der Designressourcen unter Referenz zu XAML-Designressourcen dokumentiert.

Verwandte Themen

Roadmap für das Erstellen von Apps mit C#, C++ oder VB
Schnellstart: Formatieren von Steuerelementen
Hinzufügen von Steuerelementen und Inhalten
ResourceDictionary- und XAML-Ressourcenreferenzen
Control.Template

 

 

Anzeigen:
© 2017 Microsoft