Stile und Vorlagen in WPFStyles and templates in WPF

Stile und Vorlagen in Windows Presentation Foundation (WPF) beziehen sich auf eine Reihe von Funktionen, mit denen Entwickler und Designer visuell überzeugende Effekte und ein einheitliches Erscheinungsbild für ihr Produkt erstellen können.Windows Presentation Foundation (WPF) styling and templating refer to a suite of features that let developers and designers create visually compelling effects and a consistent appearance for their product. Wenn Sie die Darstellung einer App anpassen, benötigen Sie ein leistungsfähiges Stil- und Vorlagenmodell, das die Wartung und Freigabe des Erscheinungsbilds innerhalb der jeweiligen und zwischen Apps ermöglicht.When customizing the appearance of an app, you want a strong styling and templating model that enables maintenance and sharing of appearance within and among apps. WPF stellt dieses Modell bereit.WPF provides that model.

Eine weitere Funktion des WPF-Stilmodells ist die Trennung von Darstellung und Programmlogik.Another feature of the WPF styling model is the separation of presentation and logic. Designer können die Darstellung einer App nur mithilfe von XAML bearbeiten, während Entwickler mit C# oder Visual Basic an der Programmierlogik arbeiten.Designers can work on the appearance of an app by using only XAML at the same time that developers work on the programming logic by using C# or Visual Basic.

Diese Übersicht konzentriert sich auf die Aspekte der Stile und Vorlagen der App und geht nicht auf Datenbindungskonzepte ein.This overview focuses on the styling and templating aspects of the app and doesn't discuss any data-binding concepts. Weitere Informationen zur Datenbindung finden Sie unter Übersicht über die Datenbindung.For information about data binding, see Data Binding Overview.

Es ist wichtig, die Ressourcen zu kennen, die die Wiederverwendung von Stilen und Vorlagen ermöglichen.It's important to understand resources, which are what enable styles and templates to be reused. Weitere Informationen zu Ressourcen finden Sie unter XAML-Ressourcen.For more information about resources, see XAML Resources.

Wichtig

Der Desktopleitfaden ist in Bearbeitung.The Desktop Guide documentation is under construction.

BeispielSample

Der Beispielcode in dieser Übersicht basiert auf einer einfachen Anwendung zum Suchen von Fotos, die in der folgenden Abbildung gezeigt wird.The sample code provided in this overview is based on a simple photo browsing application shown in the following illustration.

Formatierte ListViewStyled ListView

In diesem einfachen Foto-Beispiel werden Stile und Vorlagen verwendet, um eine visuell ansprechende Benutzeroberfläche zu erstellen.This simple photo sample uses styling and templating to create a visually compelling user experience. Das Beispiel verfügt über zwei TextBlock-Elemente und ein ListBox-Steuerelement, das an eine Liste von Bildern gebunden ist.The sample has two TextBlock elements and a ListBox control that is bound to a list of images.

Das vollständige Beispiel finden Sie unter Einführung zum Beispiel zu Stilen und Vorlagen.For the complete sample, see Introduction to Styling and Templating Sample.

StileStyles

Style ist eine einfache Möglichkeit, mehrere Eigenschaftswerte auf mehrere Elemente anzuwenden.You can think of a Style as a convenient way to apply a set of property values to multiple elements. Stile lassen sich auf alle Elemente anwenden, die von FrameworkElement oder FrameworkContentElement abgeleitet sind, z. B. Window oder Button.You can use a style on any element that derives from FrameworkElement or FrameworkContentElement such as a Window or a Button.

Stile werden üblicherweise deklariert, indem sie im Abschnitt Resources einer XAML-Datei als Ressource deklariert werden.The most common way to declare a style is as a resource in the Resources section in a XAML file. Da es sich bei Stilen um Ressourcen handelt, unterliegen sie denselben Regeln für Gültigkeitsbereiche, die für alle Ressourcen gelten.Because styles are resources, they obey the same scoping rules that apply to all resources. Einfach ausgedrückt: Wo Sie einen Stil deklarieren, wirkt sich darauf aus, wo der Stil angewendet werden kann.Put simply, where you declare a style affects where the style can be applied. Wenn Sie den Stil z. B. im Stammelement Ihrer XAML-Datei mit der App-Definition deklarieren, kann der Stil überall in der App verwendet werden.For example, if you declare the style in the root element of your app definition XAML file, the style can be used anywhere in your app.

Der folgende XAML-Code deklariert beispielsweise zwei Stile für einen TextBlock: einen Stil, der automatisch auf alle TextBlock-Elemente angewendet wird, und einen anderen Stil, auf den explizit verwiesen werden muss.For example, the following XAML code declares two styles for a TextBlock, one automatically applied to all TextBlock elements, and another that must be explicitly referenced.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
    
    <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#90DDDD" />
                        <GradientStop Offset="1.0" Color="#5BFFFF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Im Folgenden finden Sie ein Beispiel der oben deklarierten Stile, die verwendet werden.Here is an example of the styles declared above being used.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Formatierte TextBlocks

Weitere Informationen finden Sie unter Erstellen eines Stils für ein Steuerelement.For more information, see Create a style for a control.

ControlTemplatesControlTemplates

In WPF definiert die ControlTemplate eines Steuerelements die Darstellung des Steuerelements.In WPF, the ControlTemplate of a control defines the appearance of the control. Sie können die Struktur und die Darstellung eines Steuerelements ändern, indem Sie eine neue ControlTemplate definieren und einem Steuerelement zuweisen.You can change the structure and appearance of a control by defining a new ControlTemplate and assigning it to a control. In vielen Fällen erhalten Sie durch Vorlagen ausreichende Flexibilität, um keine eigenen benutzerdefinierten Steuerelemente schreiben zu müssen.In many cases, templates give you enough flexibility so that you do not have to write your own custom controls.

Jedes Steuerelement verfügt über eine Standardvorlage, die der Control.Template-Eigenschaft zugewiesen ist.Each control has a default template assigned to the Control.Template property. Die Vorlage verbindet die visuelle Darstellung des Steuerelements mit den Funktionen des Steuerelements.The template connects the visual presentation of the control with the control's capabilities. Da Sie eine Vorlage in XAML definieren, können Sie die Darstellung des Steuerelements ändern, ohne Code schreiben zu müssen.Because you define a template in XAML, you can change the control's appearance without writing any code. Jede Vorlage ist für ein bestimmtes Steuerelement konzipiert (z. B. ein Button-Element).Each template is designed for a specific control, such as a Button.

Im Allgemeinen deklarieren Sie eine Vorlage im Abschnitt Resources einer XAML-Datei als Ressource.Commonly you declare a template as a resource on the Resources section of a XAML file. Wie bei allen Ressourcen gelten Gültigkeitsbreichsregeln.As with all resources, scoping rules apply.

Steuerelementvorlagen sind viel komplexer als ein Stil.Control templates are a lot more involved than a style. Dies liegt daran, dass die Steuerelementvorlage die visuelle Darstellung des gesamten Steuerelements erneut schreibt, während ein Stil einfach Eigenschaftsänderungen auf das vorhandene Steuerelement anwendet.This is because the control template rewrites the visual appearance of the entire control, while a style simply applies property changes to the existing control. Da jedoch die Vorlage eines Steuerelements durch Festlegen der Control.Template-Eigenschaft angewendet wird, können Sie einen Stil verwenden, um eine Vorlage zu definieren oder festzulegen.However, since the template of a control is applied by setting the Control.Template property, you can use a style to define or set a template.

Designer ermöglichen es Ihnen im Allgemeinen, eine Kopie einer vorhandenen Vorlage zu erstellen und zu ändern.Designers generally allow you to create a copy of an existing template and modify it. Wählen Sie im WPF-Designer von Visual Studio beispielsweise ein CheckBox-Steuerelement aus, klicken Sie mit der rechten Maustaste, und wählen Sie dann Vorlage bearbeiten > Kopie erstellen aus.For example, in the Visual Studio WPF designer, select a CheckBox control, and then right-click and select Edit template > Create a copy. Mit diesem Befehl wird ein Stil generiert, der eine Vorlagen definiert.This command generates a style that defines a template.

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
    <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background1}"/>
    <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border1}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid x:Name="markGrid">
                            <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="1" Opacity="0" Stretch="None"/>
                            <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="2" Opacity="0"/>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual1}"/>
                        <Setter Property="Padding" Value="4,-1,0,0"/>

... content removed to save space ...

Das Bearbeiten einer Kopie einer Vorlage ist eine gute Möglichkeit, um zu erfahren, wie Vorlagen funktionieren.Editing a copy of a template is a great way to learn how templates work. Anstatt eine neue leere Vorlage zu erstellen, ist es einfacher, eine Kopie zu bearbeiten und einige Aspekte der visuellen Darstellung zu ändern.Instead of creating a new blank template, it's easier to edit a copy and change a few aspects of the visual presentation.

Ein Beispiel dazu finden Sie unter Erstellen einer Vorlage für ein Steuerelement.For an example, see Create a template for a control.

TemplateBindingTemplateBinding

Möglicherweise haben Sie bemerkt, dass die im vorherigen Abschnitt definierte Vorlagenressource die TemplateBinding-Markuperweiterung verwendet.You may have noticed that the template resource defined in the previous section uses the TemplateBinding Markup Extension. Eine TemplateBinding ist die optimierte Form einer Bindung für Vorlagenszenarien, die einer mit {Binding RelativeSource={RelativeSource TemplatedParent}} erstellten Bindung entspricht.A TemplateBinding is an optimized form of a binding for template scenarios, analogous to a binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent}}. TemplateBinding ist nützlich, um Teile der Vorlage an die Eigenschaften des Steuerelements zu binden.TemplateBinding is useful for binding parts of the template to properties of the control. Jedes Steuerelement verfügt beispielsweise über eine BorderThickness-Eigenschaft.For example, each control has a BorderThickness property. Verwenden Sie eine TemplateBinding, um zu verwalten, welches Element in der Vorlage von dieser Steuerelementeinstellung betroffen ist.Use a TemplateBinding to manage which element in the template is affected by this control setting.

ContentControl und ItemsControlContentControl and ItemsControl

Wenn ein ContentPresenter in der ControlTemplate eines ContentControl-Elements deklariert wird, wird der ContentPresenter automatisch an die ContentTemplate- und Content-Eigenschaften gebunden.If a ContentPresenter is declared in the ControlTemplate of a ContentControl, the ContentPresenter will automatically bind to the ContentTemplate and Content properties. Ebenso wird ein ItemsPresenter, der sich in der ControlTemplate eines ItemsControl-Elements befindet, automatisch an die Eigenschaften ItemTemplate und Items gebunden.Likewise, an ItemsPresenter that is in the ControlTemplate of an ItemsControl will automatically bind to the ItemTemplate and Items properties.

DataTemplatesDataTemplates

In dieser Beispiel-App gibt es ein ListBox-Steuerelement, das an eine Liste von Fotos gebunden ist.In this sample app, there is a ListBox control that is bound to a list of photos.

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Diese ListBox sieht zurzeit wie folgt aus.This ListBox currently looks like the following.

ListBox vor dem Anwenden einer VorlageListBox before applying template

Die meisten Steuerelemente verfügen über Inhalte, und dieser Inhalt stammt häufig aus Daten, an die Sie binden.Most controls have some type of content, and that content often comes from data that you are binding to. In diesem Beispiel sind die Daten die Liste der Fotos.In this sample, the data is the list of photos. In WPF verwenden Sie eine DataTemplate, um die visuelle Darstellung von Daten zu definieren.In WPF, you use a DataTemplate to define the visual representation of data. Ihre Eingabe in DataTemplate bestimmt im Grunde genommen, wie die Daten in der gerenderten App aussehen.Basically, what you put into a DataTemplate determines what the data looks like in the rendered app.

In unserer Beispiel-App verfügt jedes benutzerdefinierte Photo-Objekt über eine Source-Eigenschaft vom Typ „string“ (Zeichenfolge), die den Pfad des Bilds angibt.In our sample app, each custom Photo object has a Source property of type string that specifies the file path of the image. Derzeit werden die Fotoobjekte als Dateipfade angezeigt.Currently, the photo objects appear as file paths.

public class Photo
{
    public Photo(string path)
    {
        Source = path;
    }

    public string Source { get; }

    public override string ToString() => Source;
}
Public Class Photo
    Sub New(ByVal path As String)
        Source = path
    End Sub

    Public ReadOnly Property Source As String

    Public Overrides Function ToString() As String
        Return Source
    End Function
End Class

Damit die Fotos als Bilder angezeigt werden, erstellen Sie eine DataTemplate-Klasse als Ressource.For the photos to appear as images, you create a DataTemplate as a resource.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
        <Border Margin="3">
            <Image Source="{Binding Source}"/>
        </Border>
    </DataTemplate>
</Window.Resources>

Beachten Sie, dass die DataType-Eigenschaft mit der TargetType-Eigenschaft von Style vergleichbar ist.Notice that the DataType property is similar to the TargetType property of the Style. Wenn sich Ihre DataTemplate im Abschnitt „Resources“ befindet und Sie die DataType-Eigenschaft für einen Typ angeben und einen x:Key auslassen, wird die DataTemplate immer dann angewendet, wenn dieser Typ angezeigt wird.If your DataTemplate is in the resources section, when you specify the DataType property to a type and omit an x:Key, the DataTemplate is applied whenever that type appears. Sie haben immer die Möglichkeit, die DataTemplate einem x:Key zuzuweisen und dann als StaticResource für Eigenschaften festzulegen, die DataTemplate-Typen annehmen, z. B. die ItemTemplate-Eigenschaft oder die ContentTemplate-Eigenschaft.You always have the option to assign the DataTemplate with an x:Key and then set it as a StaticResource for properties that take DataTemplate types, such as the ItemTemplate property or the ContentTemplate property.

Im Wesentlichen definiert das DataTemplate im Beispiel oben, dass jedes Mal, wenn ein Photo-Objekt vorhanden ist, dieses als Image innerhalb eines Border-Elements angezeigt werden soll.Essentially, the DataTemplate in the above example defines that whenever there is a Photo object, it should appear as an Image within a Border. Mit dieser DataTemplate sieht unsere App nun wie folgt aus.With this DataTemplate, our app now looks like this.

FotobildPhoto image

Das Datenvorlagenmodell stellt weitere Funktionen bereit.The data templating model provides other features. Wenn Sie z. B. Sammlungsdaten anzeigen, die andere Sammlungen enthalten, die einen HeaderedItemsControl-Typ wie Menu oder TreeView verwenden, ist die HierarchicalDataTemplate vorhanden.For example, if you are displaying collection data that contains other collections using a HeaderedItemsControl type such as a Menu or a TreeView, there is the HierarchicalDataTemplate. Eine weitere Datenvorlagenfunktion ist das DataTemplateSelector-Element, das es Ihnen ermöglicht, basierend auf benutzerdefinierter Progammlogik eine zu verwendende DataTemplate auszuwählen.Another data templating feature is the DataTemplateSelector, which allows you to choose a DataTemplate to use based on custom logic. Weitere Informationen finden Sie unter im Artikel Übersicht über Datenvorlagen, der eine ausführlichere Erläuterung der verschiedenen Vorlagenfunktionen bereitstellt.For more information, see Data Templating Overview, which provides a more in-depth discussion of the different data templating features.

TriggerTriggers

Ein Trigger legt Eigenschaften fest oder startet Aktionen, z.B. eine Animation, wenn sich ein Eigenschaftswert ändert oder ein Ereignis ausgelöst wird.A trigger sets properties or starts actions, such as an animation, when a property value changes or when an event is raised. Style, ControlTemplateund DataTemplate verfügen alle über eine Triggers-Eigenschaft, die eine Reihe von Triggern enthalten kann.Style, ControlTemplate, and DataTemplate all have a Triggers property that can contain a set of triggers. Es gibt mehrere Typen von Triggern.There are several types of triggers.

PropertyTriggersPropertyTriggers

Ein Trigger, der Eigenschaftswerte festlegt oder Aktionen basierend auf einem Eigenschaftswert auslöst, wird als Eigenschaftstrigger bezeichnet.A Trigger that sets property values or starts actions based on the value of a property is called a property trigger.

Um die Verwendung von Eigenschaftstriggern zu veranschaulichen, können Sie jede ListBoxItem-Klasse teilweise transparent anzeigen, es sei denn, sie ist aktiviert.To demonstrate how to use property triggers, you can make each ListBoxItem partially transparent unless it is selected. Im folgenden Stil wird der Opacity-Wert eines ListBoxItem auf 0.5festgelegt.The following style sets the Opacity value of a ListBoxItem to 0.5. Wenn die IsSelected-Eigenschaft true ist, wird Opacity jedoch auf 1.0 festgelegt.When the IsSelected property is true, however, the Opacity is set to 1.0.

<Window.Resources>
    <!-- .... other resources .... -->

    <Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

In diesem Beispiel wird ein Trigger verwendet, um einen Eigenschaftswert festzulegen, aber beachten Sie, dass die Trigger-Klasse auch über die Eigenschaften EnterActions und ExitActions verfügt, die es dem Trigger ermöglichen, Aktionen auszuführen.This example uses a Trigger to set a property value, but note that the Trigger class also has the EnterActions and ExitActions properties that enable a trigger to perform actions.

Beachten Sie, dass die MaxHeight-Eigenschaft von ListBoxItem auf 75 festgelegt ist.Notice that the MaxHeight property of the ListBoxItem is set to 75. In der folgenden Abbildung ist das dritte Element das ausgewählte Element.In the following illustration, the third item is the selected item.

Formatierte ListViewStyled ListView

EventTrigger und StoryboardsEventTriggers and Storyboards

Ein weiterer Trigger ist EventTrigger, der eine Reihe von Aktionen startet, die auf dem Vorkommen eines Ereignisses basieren.Another type of trigger is the EventTrigger, which starts a set of actions based on the occurrence of an event. Die folgenden EventTrigger-Objekte geben z. B. an, dass die MaxHeight-Eigenschaft, wenn das ListBoxItem-Element durch den Mauszeiger aktiviert wird, auf einen Wert von 90 über einen zweiten Zeitraum von 0.2 animiert wird.For example, the following EventTrigger objects specify that when the mouse pointer enters the ListBoxItem, the MaxHeight property animates to a value of 90 over a 0.2 second period. Wenn sich die Maus vom Element weg bewegt, gibt die Eigenschaft auf den ursprünglichen Wert über einen Zeitraum von 1 Sekunden an.When the mouse moves away from the item, the property returns to the original value over a period of 1 second. Beachten Sie, dass es nicht notwendig ist, einen To-Wert für die MouseLeave-Animation anzugeben.Note how it is not necessary to specify a To value for the MouseLeave animation. Dies liegt daran, dass die Animation den ursprünglichen Wert nachverfolgen kann.This is because the animation is able to keep track of the original value.

<Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Trigger.Setters>
            <Setter Property="Opacity" Value="1.0" />
        </Trigger.Setters>
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:0.2"
                        Storyboard.TargetProperty="MaxHeight"
                        To="90"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:1"
                        Storyboard.TargetProperty="MaxHeight"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>

Weitere Informationen finden Sie in der Übersicht über Storyboards.For more information, see the Storyboards overview.

In der folgenden Abbildung zeigt die Maus auf das dritte Element.In the following illustration, the mouse is pointing to the third item.

Screenshot: StilbeispielStyling sample screenshot

MultiTrigger, DataTrigger und MultiDataTriggerMultiTriggers, DataTriggers, and MultiDataTriggers

Zusätzlich zu Trigger und EventTriggergibt es auch andere Typen von Triggern.In addition to Trigger and EventTrigger, there are other types of triggers. Mit MultiTrigger können Sie Eigenschaftswerte auf Grundlage mehrerer Kriterien festlegen.MultiTrigger allows you to set property values based on multiple conditions. Sie verwenden DataTrigger und MultiDataTrigger, wenn die-Eigenschaft Ihrer Bedingung datengebunden ist.You use DataTrigger and MultiDataTrigger when the property of your condition is data-bound.

Visuelle ZuständeVisual States

Steuerelemente befinden sich immer in einem bestimmten Zustand.Controls are always in a specific state. Wenn die Maus z. B. über die Oberfläche eines Steuerelements bewegt wird, wird das Steuerelement als im allgemeinen Zustand MouseOver betrachtet.For example, when the mouse moves over the surface of a control, the control is considered to be in a common state of MouseOver. Ein Steuerelement ohne einen bestimmten Zustand wird als im allgemeinen Zustand Normal betrachtet.A control without a specific state is considered to be in the common Normal state. Zustände werden in Gruppen unterteilt, und die zuvor erwähnten Zustände sind Teil der Statusgruppe CommonStates.States are broken into groups, and the previously mentioned states are part of the state group CommonStates. Die meisten Steuerelemente verfügen über zwei Statusgruppen: CommonStates und FocusStates.Most controls have two state groups: CommonStates and FocusStates. Für jede Zustandsgruppe, die auf ein Steuerelement angewendet wird, befindet sich ein Steuerelement immer in einem Zustand jeder Gruppe, z. B. CommonStates.MouseOver und FocusStates.Unfocused.Of each state group applied to a control, a control is always in one state of each group, such as CommonStates.MouseOver and FocusStates.Unfocused. Ein Steuerelement kann sich jedoch nicht in zwei verschiedenen Zuständen innerhalb derselben Gruppe befinden, etwa in CommonStates.Normal und CommonStates.Disabled.However, a control can't be in two different states within the same group, such as CommonStates.Normal and CommonStates.Disabled. Im Folgenden finden Sie eine Tabelle mit Zuständen, die die meisten Steuerelemente erkennen und verwenden.Here is a table of states most controls recognize and use.

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
NormalNormal CommonStatesCommonStates Der StandardzustandThe default state.
MouseOverMouseOver CommonStatesCommonStates Der Mauszeiger ist über dem Steuerelement positioniert.The mouse pointer is positioned over the control.
GedrücktPressed CommonStatesCommonStates Das Steuerelement wird gedrückt.The control is pressed.
DeaktiviertDisabled CommonStatesCommonStates Das Steuerelement ist deaktiviert.The control is disabled.
FocusedFocused FocusStatesFocusStates Der Fokus liegt auf dem Steuerelement.The control has focus.
Ohne FokusUnfocused FocusStatesFocusStates Der Fokus liegt nicht auf dem Steuerelement.The control does not have focus.

Wenn Sie ein System.Windows.VisualStateManager-Element für das Stammelement einer Steuerelementvorlage definieren, können Sie Animationen auslösen, wenn ein Steuerelement in einen bestimmten Zustand wechselt.By defining a System.Windows.VisualStateManager on the root element of a control template, you can trigger animations when a control enters a specific state. Der VisualStateManager deklariert, welche Kombinationen von VisualStateGroup und VisualState überwacht werden.The VisualStateManager declares which combinations of VisualStateGroup and VisualState to watch. Wenn das Steuerelement einen überwachten Zustand eintritt, wird die von VisaulStateManager definierte Animation gestartet.When the control enters a watched state, the animation defined by the VisaulStateManager is started.

Der folgende XAML-Code überwacht z. B. den CommonStates.MouseOver-Zustand, um die Füllfarbe des Elements mit dem Namen backgroundElement zu animieren.For example, the following XAML code watches the CommonStates.MouseOver state to animate the fill color of the element named backgroundElement. Wenn das Steuerelement in den CommonStates.Normal-Zustand zurückkehrt, wird die Füllfarbe des Elements mit dem Namen backgroundElement wiederhergestellt.When the control returns to the CommonStates.Normal state, the fill color of the element named backgroundElement is restored.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="{TemplateBinding Background}"
                                    Duration="0:0:0.3"/>
                </VisualState>
                <VisualState Name="MouseOver">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="Yellow"
                                    Duration="0:0:0.3"/>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        ...

Weitere Informationen zu Storyboards finden Sie unter Übersicht über Storyboards.For more information about storyboards, see Storyboards Overview.

Gemeinsam genutzte Ressourcen und DesignsShared resources and themes

Eine typische WPF-Anwendung kann über mehrere Benutzeroberflächenressourcen verfügen, die in der gesamten App angewendet werden.A typical WPF app might have multiple UI resources that are applied throughout the app. Dieser Satz von Ressourcen wird im Ganzen als das Design der App bezeichnet.Collectively, this set of resources can be considered the theme for the app. WPF bietet Unterstützung beim Packen der Benutzeroberflächenressourcen als Design mithilfe eines Ressourcenverzeichnisse, die als ResourceDictionary-Klasse gekapselt ist.WPF provides support for packaging UI resources as a theme by using a resource dictionary that is encapsulated as the ResourceDictionary class.

WPF-Designs werden mithilfe des Mechanismus für Stile und Vorlagen definiert, der von WPF zum Anpassen der visuellen Objekte eines Elements bereitgestellt wird.WPF themes are defined by using the styling and templating mechanism that WPF exposes for customizing the visuals of any element.

WPF-Designressourcen werden in eingebetteten Ressourcenverzeichnissen gespeichert.WPF theme resources are stored in embedded resource dictionaries. Diese Ressourcenverzeichnisse müssen in einer signierten Assembly eingebettet werden und werden entweder in der gleichen Assembly wie der Code selbst oder in einer parallele Assembly eingebettet.These resource dictionaries must be embedded within a signed assembly, and can either be embedded in the same assembly as the code itself or in a side-by-side assembly. Im Fall von „PresentationFramework.dll“ (der Assembly, die WPF-Steuerelemente enthält) befinden sich Designressourcen in einer Reihe von parallelen Assemblys.For PresentationFramework.dll, the assembly that contains WPF controls, theme resources are in a series of side-by-side assemblies.

Das Design wird zu dem letzten Ort, an dem bei der Suche nach dem Stil eines Elements gesucht wird.The theme becomes the last place to look when searching for the style of an element. In der Regel beginnt die Suche, indem sie die Elementstruktur aufwärts durchläuft und nach einer geeigneten Ressource sucht. Dann wird die Suche in der Ressourcensammlung der App fortgesetzt, und schließlich wird das System abgefragt.Typically, the search will begin by walking up the element tree searching for an appropriate resource, then look in the app resource collection and finally query the system. Auf diese Weise können App-Entwickler der Stil für alle Objekte auf Struktur- oder Anwendungsebene neu definieren, bevor das Design erreicht wird.This gives app developers a chance to redefine the style for any object at the tree or app level before reaching the theme.

Sie können Ressourcenverzeichnisse als einzelne Dateien definieren, die es Ihnen ermöglichen, ein Design in mehreren Apps wiederzuverwenden.You can define resource dictionaries as individual files that enable you to reuse a theme across multiple apps. Sie können auch austauschbare Designs erstellen, indem Sie mehrere Ressourcenverzeichnisse definieren, welche dieselben Ressourcentypen bereitstellen, jedoch mit unterschiedlichen Werten.You can also create swappable themes by defining multiple resource dictionaries that provide the same types of resources but with different values. Das Neudefinieren dieser Stile oder anderer Ressourcen auf Anwendungsebene ist die empfohlene Vorgehensweise für das Skinning von Apps.Redefining these styles or other resources at the app level is the recommended approach for skinning an app.

Um eine Reihe von Ressourcen wie Stile und Vorlagen anwendungsübergreifend freizugeben, können Sie eine XAML-Datei erstellen und ein ResourceDictionary-Element definieren, das Verweise auf eine shared.xaml-Datei enthält.To share a set of resources, including styles and templates, across apps, you can create a XAML file and define a ResourceDictionary that includes reference to a shared.xaml file.

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

Es ist die gemeinsame Nutzung von shared.xaml, die selbst ein ResourceDictionary-Element definiert, die eine Reihe von Stil- und Pinselressourcen enthält, die es den Steuerelementen in einer App ermöglichen, ein einheitliches Aussehen aufzuweisen.It is the sharing of shared.xaml, which itself defines a ResourceDictionary that contains a set of style and brush resources, that enables the controls in an app to have a consistent look.

Weitere Informationen finden Sie unter Gemergte Ressourcenverzeichnisse.For more information, see Merged resource dictionaries.

Wenn Sie ein Design für Ihr benutzerdefiniertes Steuerelement erstellen, finden Sie im Abschnitt Definieren von Ressourcen auf Designebene der Übersicht über das Erstellen von Steuerelementen weitere Informationen.If you are creating a theme for your custom control, see the Defining resources at the theme level section of the Control authoring overview.

Siehe auchSee also