Erstellen von Formaten und VorlagenStyling and Templating

Zum Erstellen von Stilen und Vorlagen in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) stehen eine Reihe von Funktionen (Stile, Vorlagen, Trigger und Storyboards) zur Verfügung, mit denen Entwickler und Designer visuell ansprechende Effekte erzeugen und ein einheitliches Erscheinungsbild ihres Produkts erstellen können.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) styling and templating refer to a suite of features (styles, templates, triggers, and storyboards) that allow developers and designers to create visually compelling effects and to create a consistent appearance for their product. Obwohl Entwickler und/oder Designer die Darstellung in den einzelnen Anwendungen umfassend anpassen können, ist ein starkes Stil- und Vorlagenmodell erforderlich, um die Wartung und Freigabe der Darstellung innerhalb von Anwendungen und anwendungsübergreifend zu ermöglichen.Although developers and or designers can customize the appearance extensively on an application-by-application basis, a strong styling and templating model is necessary to allow maintenance and sharing of the appearance within and among applications. Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) stellt dieses Modell bereit.provides that model.

Eine weitere Funktion des WPFWPF-Stilmodells ist die Trennung von Darstellung und Logik.Another feature of the WPFWPF styling model is the separation of presentation and logic. Dies bedeutet, dass Designer die Darstellung einer Anwendung nur mithilfe von XAMLXAML bearbeiten können, während die Entwickler mit C# oder Visual Basic an der Programmierlogik arbeiten.This means that designers can work on the appearance of an application by using only XAMLXAML 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 Anwendung und geht nicht auf Datenbindungskonzepte ein.This overview focuses on the styling and templating aspects of the application and does not 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.

Darüber hinaus ist es wichtig, die Ressourcen zu kennen, die die Wiederverwendung von Stilen und Vorlagen ermöglichen.In addition, it is 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.

Beispiel für das Erstellen von Stilen und VorlagenStyling and Templating Sample

In dieser Übersicht verwendeten Codebeispiele basieren auf einem einfachen Fotobeispiel, das in der folgenden Abbildung dargestellt wird:The code examples used in this overview are based on a simple photo sample 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 enthält zwei TextBlock Elemente und ein ListBox -Steuerelement, das 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.

Grundlagen zu StilenStyle Basics

Stellen Sie sich eine Style als eine bequeme Möglichkeit, eine Gruppe von Eigenschaftswerten auf mehr als ein Element anwenden möchten.You can think of a Style as a convenient way to apply a set of property values to more than one element. Betrachten Sie beispielsweise die folgenden TextBlock Elemente und deren standardmäßiges Erscheinungsbild:For example, consider the following TextBlock elements and their default appearance:

<TextBlock>My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>

Stil-beispielscreenshotStyling sample screenshot

Sie können das standardmäßige Erscheinungsbild ändern, durch Festlegen von Eigenschaften, z. B. FontSize und FontFamily, auf den einzelnen TextBlock -Element direkt.You can change the default appearance by setting properties, such as FontSize and FontFamily, on each TextBlock element directly. Jedoch ggf. Ihre TextBlock -Elemente einige Eigenschaften gemeinsam nutzen können Sie erstellen eine Style in die Resources Teil Ihrer XAMLXAML Datei, wie hier gezeigt:However, if you want your TextBlock elements to share some properties, you can create a Style in the Resources section of your XAMLXAML file, as shown here:

<Window.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>
</Window.Resources>

Beim Festlegen der TargetType des Formats auf die TextBlock Typ, der Stil angewendet wird, auf alle die TextBlock Elemente im Fenster.When you set the TargetType of your style to the TextBlock type, the style is applied to all the TextBlock elements in the window.

Jetzt die TextBlock Elemente wie folgt aussehen:Now the TextBlock elements appear as follows:

Stil-beispielscreenshotStyling sample screenshot

Erweitern von StilenExtending Styles

Vielleicht möchten Sie Ihre TextBlock Elemente gemeinsam einige Eigenschaftswerte, z. B. die FontFamily und die zentrierte HorizontalAlignment, aber Sie möchten auch den Text "Eigene Bilder", um einige zusätzlichen Eigenschaften zu erhalten.Perhaps you want your two TextBlock elements to share some property values, such as the FontFamily and the centered HorizontalAlignment, but you also want the text "My Pictures" to have some additional properties. Sie können dies durch das Erstellen einer neuen Formatvorlage, die auf dem ersten Stil basiert, wie hier gezeigt:You can do that by creating a new style that is based on the first style, as shown here:

<Window.Resources>
<!--A Style that extends the previous TextBlock Style-->
<!--This is a "named 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>

Beachten Sie, das der vorherige Stil ein x:Key erhält.Notice that the previous style is given an x:Key. Um den Stil anzuwenden, legen Sie die Style Eigenschaft Ihre TextBlock auf die x:Key Wert, wie hier gezeigt:To apply the style, you set the Style property on your TextBlock to the x:Key value, as shown here:

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

Dies TextBlock -Stil hat nun eine HorizontalAlignment Wert Center, FontFamily Wert Comic Sans MS, FontSize -Wert von 26, und eine Foreground Wert festgelegt wird, um die LinearGradientBrush im Beispiel gezeigt.This TextBlock style now has a HorizontalAlignment value of Center, a FontFamily value of Comic Sans MS, a FontSize value of 26, and a Foreground value set to the LinearGradientBrush shown in the example. Beachten Sie, den sie überschreibt die FontSize Wert für den grundlegenden Stil.Notice that it overrides the FontSize value of the base style. Wenn es mehr als eine Setter dieselbe Eigenschaft festlegen, eine Style, Setter , deklarierten letzte Vorrang.If there is more than one Setter setting the same property in a Style, the Setter that is declared last takes precedence.

Das folgende Beispiel zeigt, was die TextBlock Elemente wie folgt aussehen:The following shows what the TextBlock elements now look like:

Formatierte TextBlocksStyled TextBlocks

Dies TitleText -Stil erweitert den Stil, die für die Erstellung der TextBlock Typ.This TitleText style extends the style that has been created for the TextBlock type. Sie können einen Stil mit x:Key auch mithilfe des x:Key-Werts erweitern.You can also extend a style that has an x:Key by using the x:Key value. Ein Beispiel finden Sie im Beispiel für die BasedOn Eigenschaft.For an example, see the example provided for the BasedOn property.

Beziehung zwischen der TargetType-Eigenschaft und dem x:Key-AttributRelationship of the TargetType Property and the x:Key Attribute

Wie im ersten Beispiel gezeigt wird, Festlegen der TargetType Eigenschaft, um TextBlock ohne den Stil einer x:Key bewirkt, dass den Stil auf alle angewendet werden TextBlock Elemente.As shown in the first example, setting the TargetType property to TextBlock without assigning the style an x:Key causes the style to be applied to all TextBlock elements. In diesem Fall wird x:Key implizit auf {x:Type TextBlock} festgelegt.In this case, the x:Key is implicitly set to {x:Type TextBlock}. Dies bedeutet, dass Sie explizit festlegen, die x:Key auf einen anderen Wert als {x:Type TextBlock}, Style gilt nicht für alle TextBlock Elemente automatisch.This means that if you explicitly set the x:Key value to anything other than {x:Type TextBlock}, the Style is not applied to all TextBlock elements automatically. Stattdessen müssen Sie den Stil anwenden (mithilfe der x:Key Wert), die TextBlock Elemente explizit.Instead, you must apply the style (by using the x:Key value) to the TextBlock elements explicitly. Wenn sich das Format im Resources-Abschnitt und Sie nicht Festlegen der TargetType -Eigenschaft Ihres Stils, Sie müssen angeben einer x:Key.If your style is in the resources section and you do not set the TargetType property on your style, then you must provide an x:Key.

Zusätzlich zur Bereitstellung eines Standardwerts für die x:Key, TargetType Eigenschaft gibt den Typ, der auf die Setter-Eigenschaften angewendet werden.In addition to providing a default value for the x:Key, the TargetType property specifies the type to which setter properties apply. Wenn Sie keinen angeben einer TargetType, müssen Sie die Eigenschaften im qualifizieren Ihre Setter Objekte mit einem Klassennamen mithilfe der Syntax Property="ClassName.Property".If you do not specify a TargetType, you must qualify the properties in your Setter objects with a class name by using the syntax Property="ClassName.Property". Statt beispielsweise Property="FontSize", müssen Sie festlegen, Property zu "TextBlock.FontSize" oder "Control.FontSize".For example, instead of setting Property="FontSize", you must set Property to "TextBlock.FontSize" or "Control.FontSize".

Beachten Sie außerdem, dass viele WPFWPF-Steuerelemente aus einer Kombination von anderen WPFWPF-Steuerelementen bestehen.Also note that many WPFWPF controls consist of a combination of other WPFWPF controls. Wenn Sie einen Stil erstellen, das für alle Steuerelemente eines Typs gilt, erhalten Sie möglicherweise unerwartete Ergebnisse.If you create a style that applies to all controls of a type, you might get unexpected results. Wenn Sie einen Stil erstellen, z. B. die TextBlock Geben Sie in eine Window, der Stil angewendet wird, um alle TextBlock Steuerelemente im Fenster selbst wenn die TextBlock ist Teil eines anderen Steuerelements wie einer ListBox.For example, if you create a style that targets the TextBlock type in a Window, the style is applied to all TextBlock controls in the window, even if the TextBlock is part of another control, such as a ListBox.

Stile und RessourcenStyles and Resources

Sie können einen Stil verwenden, auf ein beliebiges Element, das von abgeleitet ist FrameworkElement oder FrameworkContentElement.You can use a style on any element that derives from FrameworkElement or FrameworkContentElement. Die gängigste Methode zum Deklarieren eines Stils ist, es als Ressource im Resources-Abschnitt einer XAMLXAML-Datei zu deklarieren, wie in den vorherigen Beispielen gezeigt.The most common way to declare a style is as a resource in the Resources section in a XAMLXAML file, as shown in the previous examples. Da es sich bei Stilen um Ressourcen handelt, unterliegen sie die gleichen Bereichsregeln, die für alle Ressourcen gelten: Der Deklarationsort eines Stils wirkt sich darauf aus, wo der Stil angewendet werden kann.Because styles are resources, they obey the same scoping rules that apply to all resources; where you declare a style affects where the style can be applied. Wenn Sie den Stil z.B. im Stammelement Ihrer XAMLXAML-Datei mit der Anwendungsdefinition deklarieren, kann der Stil überall in der Anwendung verwendet werden.For example, if you declare the style in the root element of your application definition XAMLXAML file, the style can be used anywhere in your application. Wenn Sie eine Navigationsanwendung erstellen und den Stil in einer von der XAMLXAML-Dateien der Anwendung deklarieren, kann der Stil nur in der XAMLXAML-Datei verwendet werden.If you create a navigation application and declare the style in one of the application's XAMLXAML files, the style can be used only in that XAMLXAML file. Weitere Informationen zu Bereichsregeln für Ressourcen finden Sie unter XAML-Ressourcen.For more information about scoping rules for resources, see XAML Resources.

Darüber hinaus finden Sie weitere Informationen zu Stilen und Ressourcen in Gemeinsam genutzte Ressourcen und Designs weiter unten in dieser Übersicht.In addition, you can find more information about styles and resources in Shared Resources and Themes later in this overview.

Programmgesteuertes Festlegen von StilenSetting Styles Programmatically

Um ein Element programmgesteuert einen benannten Stil zuzuweisen, rufen Sie den Stil aus der ressourcenauflistung, und weisen diese des Elements Style Eigenschaft.To assign a named style to an element programmatically, get the style from the resources collection and assign it to the element's Style property. Beachten Sie, dass die Elemente in einer Ressourcensammlung des Typs Object.Note that the items in a resources collection are of type Object. Aus diesem Grund müssen Sie den abgerufenen Stil zum Umwandeln einer Style vor der Zuweisung auf die Style Eigenschaft.Therefore, you must cast the retrieved style to a Style before assigning it to the Style property. Beispielsweise, um die definierten festzulegen TitleText Stil auf ein TextBlock mit dem Namen textblock1, gehen Sie folgendermaßen vor:For example, to set the defined TitleText style on a TextBlock named textblock1, do the following:

textblock1.Style = (Style)(this.Resources["TitleText"]);
textblock1.Style = CType(Me.Resources("TitleText"), Style)

Beachten Sie, dass ein Stil, sobald er angewendet wurde, versiegelt ist und nicht geändert werden kann.Note that once a style has been applied, it is sealed and cannot be changed. Wenn Sie einen Stil dynamisch ändern möchten, das bereits angewendet wurde, müssen Sie einen neuen Stil erstellen, um das vorhandene zu ersetzen.If you want to dynamically change a style that has already been applied, you must create a new style to replace the existing one. Weitere Informationen finden Sie in den Ausführungen zur IsSealed-Eigenschaft.For more information, see the IsSealed property.

Sie können ein Objekt erstellen, das einen Stil auf Grundlage einer benutzerdefinierten Logik auswählt.You can create an object that chooses a style to apply based on custom logic. Ein Beispiel finden Sie im Beispiel für die StyleSelector Klasse.For an example, see the example provided for the StyleSelector class.

Bindungen, dynamische Ressourcen und EreignishandlerBindings, Dynamic Resources, and Event Handlers

Beachten Sie, dass Sie die Setter.Value-Eigenschaft dazu nutzen können, um eine Bindung als Markuperweiterung oder eine DynamicResource-Markuperweiterung anzugeben.Note that you can use the Setter.Value property to specify a Binding Markup Extension or a DynamicResource Markup Extension. Weitere Informationen finden Sie die Beispiele für die Setter.Value Eigenschaft.For more information, see the examples provided for the Setter.Value property.

In dieser Übersicht wurde bisher nur die Verwendung von Settern zum Festlegen eines Eigenschaftswerts erläutert.So far, this overview only discusses the use of setters to set property value. Sie können auch Ereignishandler in einem Stil angeben.You can also specify event handlers in a style. Weitere Informationen finden Sie unter EventSetter.For more information, see EventSetter.

DatenvorlagenData Templates

In dieser beispielanwendung besteht eine ListBox -Steuerelement, das eine Liste der Fotos gebunden ist:In this sample application, 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"/>

Dies ListBox derzeit sieht wie folgt aus:This ListBox currently looks like the following:

ListBox vor der Anwendung der 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 WPFWPF, Sie verwenden eine DataTemplate definieren die visuelle Darstellung der Daten.In WPFWPF, you use a DataTemplate to define the visual representation of data. Im Grunde genommen, was fügen Sie eine DataTemplate bestimmt, wie die Daten in der gerenderten Anwendung aussieht.Basically, what you put into a DataTemplate determines what the data looks like in the rendered application.

In unserer Beispielanwendung verfügt jedes benutzerdefinierte Photo-Objekt über eine Source-Eigenschaft vom Typ Zeichenfolge, die den Pfad des Bilds angibt.In our sample application, 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.

Für die Fotos als Bilder angezeigt werden, Sie erstellen eine DataTemplate als Ressource:For the photos to appear as images, you create a DataTemplate as a resource:

<Window.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 ähnelt der TargetType Eigenschaft der Style.Notice that the DataType property is very similar to the TargetType property of the Style. Wenn Ihre DataTemplate ist im Resources-Abschnitt, wenn Sie angeben der DataType Eigenschaft auf einen Typ und weisen Sie ihn kein x:Key, DataTemplate angewendet wird, wenn dieser Typ vorkommt.If your DataTemplate is in the resources section, when you specify the DataType property to a type and not assign it an x:Key, the DataTemplate is applied whenever that type appears. Haben immer die Option zum Zuweisen der DataTemplate mit einer x:Key und legen Sie es als ein StaticResource für Eigenschaften, die annehmen DataTemplate Typen, z. B. die ItemTemplate Eigenschaft oder der 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 die DataTemplate im obigen Beispiel definiert, die beim Auftreten einer Photo Objekt, es sollte angezeigt werden, als ein Image innerhalb einer Border.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 diesem DataTemplate, nun die Anwendung sieht folgendermaßen aus:With this DataTemplate, our application now looks like this:

FotoPhoto image

Das Datenvorlagenmodell stellt weitere Funktionen bereit.The data templating model provides other features. Angenommen, Sie Auflistungsdaten anzeigen, die andere Auflistungen mit enthalten eine HeaderedItemsControl Geben Sie z. B. eine Menu oder ein TreeView, besteht die HierarchicalDataTemplate.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 andere Funktion für Datenvorlagen ist die DataTemplateSelector, können Sie wählen eine DataTemplate auf Grundlage benutzerdefinierten Logik zu verwenden.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.

SteuerelementvorlagenControl Templates

In WPFWPF, ControlTemplate eines Steuerelements definiert die Darstellung des Steuerelements.In WPFWPF, the ControlTemplate of a control defines the appearance of the control. Sie können die Struktur und Darstellung eines Steuerelements ändern, durch Definieren einer neuen ControlTemplate für das Steuerelement.You can change the structure and appearance of a control by defining a new ControlTemplate for the control. In vielen Fällen erhalten Sie hierdurch die ausreichende Flexibilität, um keine eigenen benutzerdefinierten Steuerelemente schreiben zu müssen.In many cases, this gives you enough flexibility so that you do not have to write your own custom controls. Weitere Informationen finden Sie unter Anpassen der Darstellung eines vorhandenen Steuerelements durch Erstellen einer ControlTemplate.For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

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, ControlTemplate, und DataTemplate alle verfügen ü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 verschiedene Typen von Triggern.There are various types of triggers.

EigenschaftstriggerProperty Triggers

Ein Trigger , dass die Eigenschaftswerte festlegt oder Aktionen basierend auf den Wert einer Eigenschaft einen Eigenschaftsauslöser aufgerufen wird.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 Eigenschaftstrigger zu veranschaulichen, machen Sie jede ListBoxItem teilweise transparent, es sei denn, diese Option ausgewählt ist.To demonstrate how to use property triggers, you can make each ListBoxItem partially transparent unless it is selected. Dem folgenden Format wird die Opacity Wert eine ListBoxItem zu 0.5.The following style sets the Opacity value of a ListBoxItem to 0.5. Wenn die IsSelected -Eigenschaft ist truejedoch die Opacity nastaven NA hodnotu 1.0:When the IsSelected property is true, however, the Opacity is set to 1.0:

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

Dieses Beispiel verwendet eine Trigger einen Eigenschaftswert festlegen, aber beachten Sie, dass die Trigger -Klasse verfügt auch über die EnterActions und ExitActions Eigenschaften, die einen Trigger zur Durchführung von Aktionen zu ermöglichen.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 der ListBoxItem nastaven NA hodnotu 75.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 die EventTrigger, die eine Reihe von Aktionen, die abhängig vom Auftreten eines Ereignisses startet.Another type of trigger is the EventTrigger, which starts a set of actions based on the occurrence of an event. Beispielsweise die folgenden EventTrigger Objekte angeben, wenn der Mauszeiger wechselt die ListBoxItem, MaxHeight Eigenschaft animiert, auf den Wert 90 über eine 0.2 Sekunden-Zeitraums.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, wie es nicht notwendig, geben Sie einen To Wert für die MouseLeave Animation.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.

<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>

Weitere Informationen finden Sie unter 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:

Stil-beispielscreenshotStyling sample screenshot

MultiTrigger, DataTrigger und MultiDataTriggerMultiTriggers, DataTriggers, and MultiDataTriggers

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

Gemeinsam genutzte Ressourcen und DesignsShared Resources and Themes

Eine typische Windows Presentation Foundation (WPF)-Anwendung möglicherweise mehrere Benutzeroberflächenressourcen (UI), die in der gesamten Anwendung angewendet werden.A typical Windows Presentation Foundation (WPF) application might have multiple user interface (UI) resources that are applied throughout the application. Dieser Satz von Ressourcen wird im Ganzen als das Design der Anwendung bezeichnet.Collectively, this set of resources can be considered the theme for the application. Windows Presentation Foundation (WPF) bietet Unterstützung beim Packen Ressourcen der Benutzeroberfläche (UI) als Design mithilfe eines Ressourcenverzeichnisses, der als gekapselt wird die ResourceDictionary Klasse.Windows Presentation Foundation (WPF) provides support for packaging user interface (UI) resources as a theme by using a resource dictionary that is encapsulated as the ResourceDictionary class.

Windows Presentation Foundation (WPF)-Designs werden mit dem Erstellen von Formaten und Vorlagen-Mechanismus, der Windows Presentation Foundation (WPF) verfügbar macht. für das Anpassen der visuellen Objekte eines beliebigen Elements definiert.Windows Presentation Foundation (WPF) themes are defined by using the styling and templating mechanism that Windows Presentation Foundation (WPF) exposes for customizing the visuals of any element.

Windows Presentation Foundation (WPF)-Designressourcen werden in eingebetteten Ressourcenverzeichnissen gespeichert.Windows Presentation Foundation (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. Sind Designressourcen in einer Reihe von Seite-an-Seite-Assemblys, im Fall von "PresentationFramework.dll", Assembly, über die Windows Presentation Foundation (WPF)-Steuerelemente enthält.In the case of PresentationFramework.dll, the assembly which contains Windows Presentation Foundation (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 entlang geht und nach einer geeigneten Ressource sucht. Dann wird die Suche in der Ressourcensammlung der Anwendung 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 application resource collection and finally query the system. Auf diese Weise können Anwendungsentwickler der Stil für alle Objekte auf Struktur- oder Anwendungsebene neu definieren, bevor das Design erreicht wird.This gives application developers a chance to redefine the style for any object at the tree or application level before reaching the theme.

Sie können Ressourcenverzeichnisse als einzelne Dateien definieren, die es Ihnen ermöglichen, ein Design in mehreren Anwendungen wieder zu verwenden.You can define resource dictionaries as individual files that enable you to reuse a theme across multiple applications. 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 Anwendungen.Redefining these styles or other resources at the application level is the recommended approach for skinning an application.

Auf einen Satz von Ressourcen wie Stile und Vorlagen anwendungsübergreifend freigeben, können Sie erstellen eine XAMLXAML Datei, und definieren Sie eine ResourceDictionary.To share a set of resources, including styles and templates, across applications, you can create a XAMLXAML file and define a ResourceDictionary. Sehen Sie sich z.B. die folgende Abbildung an, die einen Teil des Beispiels zum Formatieren mit ControlTemplates zeigt:For example, take a look at the following illustration that shows part of the Styling with ControlTemplates Sample:

Beispiele für SteuerelementvorlagenControl Template Examples

Wenn Sie die XAMLXAML-Dateien in diesem Beispiel näher betrachten, werden Sie feststellen, dass alle Dateien über Folgendes verfügen:If you look at the XAMLXAML files in the sample, you will notice that the files all have the following:

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

Es ist die gemeinsame Nutzung von shared.xaml, definiert ein ResourceDictionary , enthält einen Satz von Stil-und Pinselressourcen, die die Steuerelemente in der Stichprobe, die eine einheitliche Darstellung verleihen kann.It is the sharing of shared.xaml, which defines a ResourceDictionary that contains a set of style and brush resources that enables the controls in the sample to have a consistent look.

Weitere Informationen finden Sie unter Zusammengeführte Ressourcenverzeichnisse.For more information, see Merged Resource Dictionaries.

Wenn Sie ein Design für Ihr ein benutzerdefiniertes Steuerelement erstellen, finden Sie im Abschnitt zur externen Steuerelementbibliothek im Artikel Übersicht über das Erstellen von Steuerelementen.If you are creating a theme for you custom control, see the External Control Library section of the Control Authoring Overview.

Siehe auchSee also