Anpassen der Darstellung eines vorhandenen Steuerelements durch Erstellen einer ControlTemplateCustomizing the Appearance of an Existing Control by Creating a ControlTemplate

Ein ControlTemplate gibt die visuelle Struktur und das visuelle Verhalten eines-Steuer Elements an.A ControlTemplate specifies the visual structure and visual behavior of a control. Sie können die Darstellung eines Steuer Elements anpassen, indem Sie ihm ein ControlTemplateneues-Element geben.You can customize the appearance of a control by giving it a new ControlTemplate. Wenn Sie ein ControlTemplate-Element erstellen, ersetzen Sie die Darstellung eines vorhandenen Steuer Elements, ohne seine Funktionalität zu ändern.When you create a ControlTemplate, you replace the appearance of an existing control without changing its functionality. Sie können z. b. die Schaltflächen in der Anwendungs Runde anstelle der standardmäßigen quadratischen Form erstellen, aber die Schaltfläche gibt Click immer noch das-Ereignis aus.For example, you can make the buttons in your application round instead of the default square shape, but the button will still raise the Click event.

In diesem Thema ControlTemplatewerden die verschiedenen Teile eines erläutert, das Erstellen eines ControlTemplate einfachen für Buttoneine erläutert und erläutert, wie Sie den Steuerelement Vertrag eines Steuer Elements verstehen, damit Sie seine Darstellung anpassen können.This topic explains the various parts of a ControlTemplate, demonstrates creating a simple ControlTemplate for a Button, and explains how to understand the control contract of a control so that you can customize its appearance. Da Sie einen ControlTemplate in XAMLXAMLerstellen, können Sie die Darstellung eines Steuer Elements ändern, ohne Code schreiben zu müssen.Because you create a ControlTemplate in XAMLXAML, you can change a control's appearance without writing any code. Benutzerdefinierte Steuerelementvorlagen können Sie auch mit Designern erstellen, z.B. mit dem Microsoft Expression Blend.You can also use a designer, such as Microsoft Expression Blend, to create custom control templates. Dieses Thema zeigt Beispiele in der XAMLXAML , die die Darstellung Button eines anpassen und das gesamte Beispiel am Ende des Themas auflistet.This topic shows examples in the XAMLXAML that customize the appearance of a Button and lists the complete example at the end of the topic. Weitere Informationen zum Verwenden von Expression Blend finden Sie unter Formatieren eines Steuerelements, das Vorlagen unterstützt.For more information about using Expression Blend, see Styling a control that supports templates.

Die folgenden Abbildungen zeigen einen Button , der das ControlTemplate verwendet, das in diesem Thema erstellt wird.The following illustrations show a Button that uses the ControlTemplate that is created in this topic.

Eine Schaltfläche mit einer benutzerdefinierten Steuerelement Vorlage.A button with a custom control template.
Eine Schaltfläche, die eine benutzerdefinierte Steuerelementvorlage verwendetA button that uses a custom control template

Eine Schaltfläche mit einem roten Rahmen.A button with a red border.
Eine Schaltfläche, die eine benutzerdefinierte Steuerelementvorlage verwendet, und über der sich ein Mauszeiger befindet.A button that uses a custom control template and has the mouse pointer over it

Erforderliche VoraussetzungenPrerequisites

Es wird vorausgesetzt, dass Sie sich mit dem Erstellen und mit der Verwendung von Steuerelementen und Formaten auskennen. Anweisungen dazu finden Sie unter Steuerelemente.This topic assumes that you understand how to create and use controls and styles as discussed in Controls. Die in diesem Thema erläuterten Konzepte gelten für Elemente, die von Control der-Klasse erben, UserControlmit Ausnahme von.The concepts discussed in this topic apply to elements that inherit from the Control class, except for the UserControl. Ein ControlTemplate kann nicht auf ein UserControlangewendet werden.You cannot apply a ControlTemplate to a UserControl.

Der richtige Zeitpunkt für das Erstellen einer ControlTemplateWhen You Should Create a ControlTemplate

-Steuerelemente verfügen über viele Eigenschaften Background, Foregroundz. FontFamilyb., und, die Sie festlegen können, um verschiedene Aspekte der Darstellung des Steuer Elements anzugeben. die Änderungen, die Sie vornehmen können, indem Sie diese Eigenschaften festlegen, sind jedoch begrenzt.Controls have many properties, such as Background, Foreground, and FontFamily, that you can set to specify different aspects of the control's appearance, but the changes that you can make by setting these properties are limited. Beispielsweise können Sie die Foreground -Eigenschaft auf blau und FontStyle auf eine CheckBoxkursiv festlegen.For example, you can set the Foreground property to blue and FontStyle to italic on a CheckBox.

Ohne die Möglichkeit, eine neue ControlTemplate für-Steuerelemente zu erstellen, würden alle Steuerelemente in jeder WPFWPF-basierten Anwendung dieselbe allgemeine Darstellung aufweisen, was die Möglichkeit zum Erstellen einer Anwendung mit einem benutzerdefinierten Erscheinungsbild einschränken würde.Without the ability to create a new ControlTemplate for controls, all controls in every WPFWPF-based application would have the same general appearance, which would limit the ability to create an application with a custom look and feel. Standardmäßig hat jede CheckBox ähnliche Merkmale.By default, every CheckBox has similar characteristics. Beispielsweise CheckBox befindet sich der Inhalt von immer rechts neben dem Auswahl Indikator, und das Häkchen wird immer verwendet, um anzugeben CheckBox , dass ausgewählt ist.For example, the content of the CheckBox is always to the right of the selection indicator, and the check mark is always used to indicate that the CheckBox is selected.

Sie erstellen eine ControlTemplate , wenn Sie die Darstellung des Steuer Elements nach dem Festlegen der anderen Eigenschaften im Steuerelement anpassen möchten.You create a ControlTemplate when you want to customize the control's appearance beyond what setting the other properties on the control will do. Angenommen, Sie möchten, dass sich der Inhalt des Kontrollkästchens über dem Auswahl Indikator CheckBox befindet, und Sie möchten, dass ein X anzeigt, dass ausgewählt ist. CheckBoxIn the example of the CheckBox, suppose that you want the content of the check box to be above the selection indicator and you want an X to indicate that the CheckBox is selected. Diese Änderungen werden in der ControlTemplate CheckBoxvon angegeben.You specify these changes in the ControlTemplate of the CheckBox.

Die folgende Abbildung zeigt einen CheckBox , der einen Standard ControlTemplateWert verwendet.The following illustration shows a CheckBox that uses a default ControlTemplate.

Ein Kontrollkästchen mit der Standard Steuerelement Vorlage.A checkbox with the default control template.
Ein Kontrollkästchen, das die Standardsteuerelementvorlage verwendetA CheckBox that uses the default control template

Die folgende Abbildung zeigt einen CheckBox , der einen Benutzer ControlTemplate definierten verwendet, um den Inhalt CheckBox der oberhalb des Auswahl Indikators zu platzieren, und CheckBox ein X anzeigt, wenn der ausgewählt wird.The following illustration shows a CheckBox that uses a custom ControlTemplate to place the content of the CheckBox above the selection indicator and displays an X when the CheckBox is selected.

Ein Kontrollkästchen mit einer benutzerdefinierten Steuerelement Vorlage.A checkbox with a custom control template.
Ein Kontrollkästchen, das eine benutzerdefinierte Steuerelementvorlage verwendetA CheckBox that uses a custom control template

Der ControlTemplate für den CheckBox in diesem Beispiel ist relativ komplex. Daher wird in diesem Thema ein einfacheres Beispiel für ControlTemplate das Erstellen Buttoneines für ein verwendet.The ControlTemplate for the CheckBox in this sample is relatively complex, so this topic uses a simpler example of creating a ControlTemplate for a Button.

Ändern der visuellen Struktur eines SteuerelementsChanging the Visual Structure of a Control

In WPFWPFhandelt es sich bei einem Steuerelement FrameworkElement oft um zusammengesetzte Objekte.In WPFWPF, a control is often a composite FrameworkElement objects. Wenn Sie ein ControlTemplateerstellen, werden Objekte FrameworkElement kombiniert, um ein einzelnes Steuerelement zu erstellen.When you create a ControlTemplate, you combine FrameworkElement objects to build a single control. Ein ControlTemplate darf nur einen FrameworkElement als Stamm Element aufweisen.A ControlTemplate must have only one FrameworkElement as its root element. Das Stamm Element enthält normalerweise FrameworkElement andere Objekte.The root element usually contains other FrameworkElement objects. Die visuelle Struktur wird durch die Kombination dieser Objekte bestimmt.The combination of objects makes up the control's visual structure.

Im folgenden Beispiel wird eine Benutzer ControlTemplate definierte Buttonfür erstellt.The following example creates a custom ControlTemplate for the Button. Der ControlTemplate erstellt die visuelle Struktur Buttonvon.The ControlTemplate creates the visual structure of the Button. In diesem Beispiel wird die Darstellung der Schaltfläche nicht geändert, wenn Sie den Mauszeiger darüber bewegen oder sie anklicken.This example does not change the button's appearance when you move the mouse pointer over it or click it. Das Ändern der Darstellung einer Schaltfläche, die sich in einem anderen Zustand befindet, wird weiter unten in diesem Thema erläutert.Changing the button's appearance when it is in a different state is discussed later in this topic.

In diesem Beispiel besteht die visuelle Struktur aus den folgenden Bausteinen:In this example, the visual structure consists of the following parts:

<ControlTemplate TargetType="Button">
  <Border Name="RootElement">

    <!--Create the SolidColorBrush for the Background 
        as an object elemment and give it a name so 
        it can be referred to elsewhere in the
        control template.-->
    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <!--Create a border that has a different color
        by adding smaller grid. The background of 
        this grid is specificied by the button's 
        Background property.-->
    <Grid Margin="4" Background="{TemplateBinding Background}">

      <!--Use a ContentPresenter to display the Content of
          the Button.-->
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />
    </Grid>

  </Border>
</ControlTemplate>

Beibehalten der Funktionalität von Steuerelementeigenschaften durch die Verwendung von TemplateBindingPreserving the Functionality of a Control's Properties by Using TemplateBinding

Wenn Sie ein neues ControlTemplateerstellen, können Sie auch die öffentlichen Eigenschaften verwenden, um die Darstellung des Steuer Elements zu ändern.When you create a new ControlTemplate, you still might want to use the public properties to change the control's appearance. Die TemplateBinding -Markup Erweiterung bindet eine Eigenschaft eines Elements, das sich in ControlTemplate der befindet, an eine öffentliche Eigenschaft, die vom-Steuerelement definiert wird.The TemplateBinding markup extension binds a property of an element that is in the ControlTemplate to a public property that is defined by the control. Bei der Verwendung von TemplateBinding können Steuerelementeigenschaften als Parameter der Vorlage fungieren.When you use TemplateBinding, you enable properties on the control to act as parameters to the template. D.h., beim Festlegen einer Steuerelementeigenschaft wird dieser Wert an das Element mit TemplateBinding übergeben.That is, when a property on a control is set, that value is passed on to the element that has the TemplateBinding on it.

Im folgenden Beispiel wird der Teil des vorangehenden Beispiels wiederholt, in dem die TemplateBinding -Markup Erweiterung verwendet wird, um Eigenschaften ControlTemplate von Elementen in an die öffentlichen Eigenschaften zu binden, die durch die Schaltfläche definiert werden.The following example repeats the part of the preceding example that uses the TemplateBinding markup extension to bind properties of elements that are in the ControlTemplate to public properties that are defined by the button.

<Grid Margin="4" Background="{TemplateBinding Background}">

  <!--Use a ContentPresenter to display the Content of
      the Button.-->
  <ContentPresenter
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    Margin="4,5,4,4" />
</Grid>

In diesem Beispiel Panel.Background ist die Grid Eigenschaften Vorlage von an Control.Backgroundgebunden.In this example, the Grid has its Panel.Background property template bound to Control.Background. Da Panel.Background Vorlagen gebunden ist, können Sie mehrere Schaltflächen erstellen, die dieselbe ControlTemplate verwenden, und Control.Background für jede Schaltfläche auf verschiedene Werte festlegen.Because Panel.Background is template bound, you can create multiple buttons that use the same ControlTemplate and set the Control.Background to different values on each button. Wenn Control.Background keine Vorlage an eine Eigenschaft eines Elements ControlTemplateim gebunden war, wirkt sich das Festlegen Control.Background des einer Schaltfläche nicht auf die Darstellung der Schaltfläche aus.If Control.Background was not template bound to a property of an element in the ControlTemplate, setting the Control.Background of a button would have no impact on the button's appearance.

Beachten Sie, dass die Namen der beiden Eigenschaften nicht identisch sein müssen.Note that the names of the two properties do not need to be identical. Im Control.HorizontalContentAlignment vorherigen Beispiel Button ist die-Eigenschaft der-Vorlage ContentPresenteran die FrameworkElement.HorizontalAlignment -Eigenschaft des gebunden.In the preceding example, the Control.HorizontalContentAlignment property of the Button is template bound to the FrameworkElement.HorizontalAlignment property of the ContentPresenter. Dadurch kann der Inhalt der Schaltfläche horizontal positioniert werden.This enables the content of the button to be positioned horizontally. ContentPresenterverfügt nicht über eine-Eigenschaft HorizontalContentAlignmentmit dem Control.HorizontalContentAlignment Namen, kann aber FrameworkElement.HorizontalAlignmentan gebunden werden.ContentPresenter does not have a property named HorizontalContentAlignment, but Control.HorizontalContentAlignment can be bound to FrameworkElement.HorizontalAlignment. Stellen Sie sicher, dass die Ziel und Quelleigenschaften dem selben Typ entsprechen, wenn Sie eine Eigenschaft an eine Vorlage binden.When you template bind a property, be sure that the target and source properties are the same type.

Die Control -Klasse definiert mehrere Eigenschaften, die von der-Steuerelement Vorlage verwendet werden müssen, um beim Festlegen eine Auswirkung auf das-Steuerelement zu haben.The Control class defines several properties that must be used by the control template to have an effect on the control when they are set. Wie die die-Eigenschaft verwendet,hängtvonder-Eigenschaftab.ControlTemplateHow the ControlTemplate uses the property depends on the property. Die ControlTemplate -Eigenschaft muss auf eine der folgenden Arten verwendet werden:The ControlTemplate must use the property in one of the following ways:

In der folgenden Tabelle werden die visuellen Eigenschaften aufgelistet, die von einem Control -Steuerelement der-Klasse geerbt wurden.The following table lists the visual properties inherited by a control from the Control class. In der Tabelle wird außerdem angegeben, ob die standardmäßige Steuerelementvorlage eines Steuerelements den geerbten Eigenschaftswert verwendet, oder ob er vorlagengebunden sein muss.It also indicates whether the default control template of a control uses the inherited property value or if it must be template bound.

EigenschaftProperty Verwendete MethodeUsage method
Background VorlagenbindungTemplate binding
BorderThickness VorlagenbindungTemplate binding
BorderBrush VorlagenbindungTemplate binding
FontFamily Eigenschaftenvererbung oder VorlagenbindungProperty inheritance or template binding
FontSize Eigenschaftenvererbung oder VorlagenbindungProperty inheritance or template binding
FontStretch Eigenschaftenvererbung oder VorlagenbindungProperty inheritance or template binding
FontWeight Eigenschaftenvererbung oder VorlagenbindungProperty inheritance or template binding
Foreground Eigenschaftenvererbung oder VorlagenbindungProperty inheritance or template binding
HorizontalContentAlignment VorlagenbindungTemplate binding
Padding VorlagenbindungTemplate binding
VerticalContentAlignment VorlagenbindungTemplate binding

In der Tabelle werden nur die visuellen Eigenschaften aufgelistet, Control die von der-Klasse geerbt wurden.The table lists only the visual properties inherited from the Control class. Abgesehen von den in der Tabelle aufgeführten Eigenschaften kann ein Steuerelement auch die DataContextEigenschaften, Languageund vom übergeordneten Framework- TextDecorations Element erben.Apart from the properties listed in the table, a control may also inherit the DataContext, Language, and TextDecorations properties from the parent framework element.

ContentPresenter Wenn sich der ControlTemplate in einem ContentControlbefindet, ContentPresenter bindet auch automatisch an die ContentTemplate -Eigenschaft und die- Content Eigenschaft.Also, if the ContentPresenter is in the ControlTemplate of a ContentControl, the ContentPresenter will automatically bind to the ContentTemplate and Content properties. Ebenso bindet ein ItemsPresenter , das sich ControlTemplate im von ItemsControl befindet, automatisch an die- Items Eigenschaft ItemsPresenter und die-Eigenschaft.Likewise, an ItemsPresenter that is in the ControlTemplate of an ItemsControl will automatically bind to the Items and ItemsPresenter properties.

Im folgenden Beispiel werden zwei Schaltflächen erstellt, ControlTemplate die die verwenden, die im vorherigen Beispiel definiert sind.The following example creates two buttons that use the ControlTemplate defined in the preceding example. Im Beispiel werden die BackgroundEigenschaften Foreground, und FontSize auf den einzelnen Schaltflächen festgelegt.The example sets the Background, Foreground, and FontSize properties on each button. Das Festlegen Background der-Eigenschaft hat einen Effekt, da Sie in der ControlTemplateVorlage gebunden ist.Setting the Background property has an effect because it is template bound in the ControlTemplate. Obwohl die- Foreground Eigenschaft FontSize und die-Eigenschaft nicht Vorlagen gebunden sind, wirkt sich dies auf die Festlegung aus, da ihre Werte geerbt werden.Even though the Foreground and FontSize properties are not template bound, setting them has an effect because their values are inherited.

<StackPanel>
  <Button Style="{StaticResource newTemplate}" 
          Background="Navy" Foreground="White" FontSize="14"
          Content="Button1"/>

  <Button Style="{StaticResource newTemplate}" 
          Background="Purple" Foreground="White" FontSize="14"
          Content="Button2" HorizontalContentAlignment="Left"/>
</StackPanel>

Das Ergebnis des vorhergehenden Beispiels ähnelt der folgenden Abbildung.The preceding example produces output that is similar to the following illustration.

Zwei Schaltflächen, eine blaue und eine violette.Two buttons, one blue and one purple.
Zwei Schaltflächen mit unterschiedlichen HintergrundfarbenTwo buttons with different background colors

Ändern der Darstellung eines Steuerelements in Abhängigkeit von dessen ZustandChanging the Appearance of a Control Depending on Its State

Der Unterschied zwischen einer Schaltfläche in der Standarddarstellung und der Schaltfläche aus dem vorhergehenden Beispiel besteht darin, dass die Darstellung der Standardschaltfläche je nach Zustand leicht geändert wird.The difference between a button with its default appearance and the button in the preceding example is that the default button subtly changes when it is in different states. So wird zum Beispiel die Standarddarstellung der Schaltfläche geändert, wenn sie angeklickt wird, oder wenn sich der Mauszeiger über der Schaltfläche befindet.For example, the default button's appearance changes when the button is pressed, or when the mouse pointer is over the button. Obwohl die ControlTemplate Funktionalität eines Steuer Elements nicht ändert, ändert es das visuelle Verhalten des Steuer Elements.Although the ControlTemplate does not change the functionality of a control, it does change the control's visual behavior. Das visuelle Verhalten beschreibt die Darstellung des Steuerelements in bestimmten Zuständen.A visual behavior describes the control appearance when it is in a certain state. Betrachten Sie das Schaltflächenbeispiel, um den Unterschied zwischen der Funktionalität und dem visuellen Verhalten besser zu verstehen.To understand the difference between the functionality and visual behavior of a control, consider the button example. Die Funktionalität der Schaltfläche besteht darin, Click das-Ereignis zu erhöhen, wenn darauf geklickt wird, aber das visuelle Verhalten der Schaltfläche besteht darin, die Darstellung zu ändern, wenn darauf gezeigt oder geklickt wird.The button's functionality is to raise the Click event when it is clicked, but the button's visual behavior is to change its appearance when it is pointed to or pressed.

Mit- VisualState Objekten können Sie die Darstellung eines-Steuer Elements angeben, wenn es sich in einem bestimmten Zustand befindet.You use VisualState objects to specify the appearance of a control when it is in a certain state. Ein VisualState enthält ein Storyboard -Element, das die Darstellung der Elemente in der ControlTemplateändert.A VisualState contains a Storyboard that changes the appearance of the elements that are in the ControlTemplate. Sie müssen keinen Code schreiben, um dies zu erreichen, da die Logik des Steuer Elements den Zustand mithilfe VisualStateManagervon ändert.You do not have to write any code to make this occur because the control's logic changes state by using the VisualStateManager. Wenn das Steuerelement in den Zustand eintritt VisualState.Name Storyboard , der durch die-Eigenschaft angegeben wird, beginnt.When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. Wenn das Steuerelement den Zustand verlässt, Storyboard wird beendet.When the control exits the state, the Storyboard stops.

Das folgende Beispiel zeigt VisualState die, die die Darstellung Button eines ändert, wenn sich der Mauszeiger darüber befindet.The following example shows the VisualState that changes the appearance of a Button when the mouse pointer is over it. Der Storyboard ändert die Rahmenfarbe der Schaltfläche durch Ändern der Farbe BorderBrushvon.The Storyboard changes the button's border color by changing the color of the BorderBrush. Wenn Sie ControlTemplate auf das Beispiel am Anfang dieses Themas verweisen, erinnern Sie sich, dass BorderBrush der Name SolidColorBrush der ist, die dem Background von Borderzugewiesen ist.If you refer to the ControlTemplate example at the beginning of this topic, you will recall that BorderBrush is the name of the SolidColorBrush that is assigned to the Background of the Border.

<!--Change the border of the button to red when the
    mouse is over the button.-->
<VisualState x:Name="MouseOver">
  <Storyboard>
    <ColorAnimation Storyboard.TargetName="BorderBrush"     
                    Storyboard.TargetProperty="Color"
                    To="Red" />

  </Storyboard>
</VisualState>

Die Zustände werden für ein Steuerelement innerhalb des Steuerelementvertrags definiert. Weitere Informationen diesbezüglich finden Sie im weiteren Verlauf dieses Themas unter Anpassen von anderen Steuerelementen mit Steuerelementverträgen.The control is responsible for defining the states as part of its control contract, which is discussed in detail in Customizing Other Controls by Understanding the Control Contract later in this topic. In der folgenden Tabelle sind die Zustände aufgeführt, die für Buttondie angegeben sind.The following table lists the states that are specified for the Button.

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

MouseOver Normal Pressed Disabled Definiert zwei Statusgruppen: die CommonStates Gruppe enthält die Zustände,, und. ButtonThe Button defines two state groups: the CommonStates group contains the Normal, MouseOver, Pressed, and Disabled states. Die Gruppe FocusStates enthält die Zustände Focused und Unfocused.The FocusStates group contains the Focused and Unfocused states. Zustände innerhalb einer Zustandsgruppe schließen sich gegenseitig aus.States in the same state group are mutually exclusive. Das Steuerelement befindet sich immer in genau einem Zustand aus jeder Gruppe.The control is always in exactly one state per group. Button Ein kann z. b. den Fokus haben, auch wenn sich der Mauszeiger nicht darüber befindet Button , sodass Focused ein im Zustand den MouseOverZustand, Pressedoder Normal aufweisen kann.For example, a Button can have focus even when the mouse pointer is not over it, so a Button in the Focused state can be in the MouseOver, Pressed, or Normal state.

Objekte werden Objekten hinzugefügt VisualState. VisualStateGroupYou add VisualState objects to VisualStateGroup objects. Sie fügen VisualStateGroup der VisualStateGroups angefügten-Eigenschaft-Objekte hinzu.You add VisualStateGroup objects to the VisualStateGroups attached property. Im folgenden Beispiel werden die VisualState -Objekte für Normal MouseOverdie Zustände, Pressed und definiert, die alle in der CommonStates Gruppe sind.The following example defines the VisualState objects for the Normal, MouseOver, and Pressed states, which are all in the CommonStates group. Der Name von jedem VisualState entspricht dem Namen in der vorherigen Tabelle.The Name of each VisualState matches the name in the preceding table. Der Zustand Disabled sowie die Zustände der FocusStates-Gruppe wurden ausgelassen, um das Beispiel kurz zu halten. Sie werden jedoch vom vollständigen Beispiel am Ende dieses Themas umfasst.The Disabled state and the states in the FocusStates group are omitted to keep the example short, but they are included in the entire example at the end of this topic.

Hinweis

Stellen Sie sicher, dass VisualStateGroups Sie die angefügte- FrameworkElement Eigenschaft im ControlTemplateStamm des-Objekts festlegen.Be sure to set the VisualStateGroups attached property on the root FrameworkElement of the ControlTemplate.

<ControlTemplate TargetType="Button">
  <Border Name="RootElement">

    <VisualStateManager.VisualStateGroups>

      <!--Define the states and transitions for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">

        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, BorderBrush, to red when the
            mouse is over the button.-->
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                            Storyboard.TargetProperty="Color" 
                            To="Red" />
          </Storyboard>
        </VisualState>

        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                            Storyboard.TargetProperty="Color"
                            To="Transparent"/>
          </Storyboard>
        </VisualState>

        <!--The Disabled state is omitted for brevity.-->
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />
    </Grid>
  </Border>
</ControlTemplate>

Das Ergebnis des vorhergehenden Beispiels ähnelt den folgenden Abbildungen.The preceding example produces output that is similar to the following illustrations.

Eine Schaltfläche mit einer benutzerdefinierten Steuerelement Vorlage.A button with a custom control template.
Eine Schaltfläche, die eine benutzerdefinierte Steuerelementvorlage verwendetA button that uses a custom control template in the normal state

Eine Schaltfläche mit einem roten Rahmen.A button with a red border.
Eine Schaltfläche, die eine benutzerdefinierte Steuerelementvorlage verwendet, wenn darüber sich der Mauszeiger befindetA button that uses a custom control template in the mouse over state

Der Rahmen ist auf einer gedrückten Schaltfläche transparent.The border is transparent on a pressed button.
Eine Schaltfläche, die eine benutzerdefinierte Steuerelementvorlage verwendet, wenn sie gedrückt wirdA button that uses a custom control template in the pressed state

Die visuellen Zustände für WPFWPF-Steuerelemente finden Sie unter Steuerelementformate und -vorlagen.To find the visual states for controls that are included with WPFWPF, see Control Styles and Templates.

Festlegen des Steuerelementverhaltens beim Wechsel zwischen ZuständenSpecifying the Behavior of a Control When It Transitions Between States

Im vorhergehenden Beispiel wird die Darstellung der Schaltfläche auch beim Anklicken der Schaltfläche geändert. Diesen Effekt sieht der Nutzer allerdings nicht, falls die Schaltfläche kürzer als eine ganze Sekunde lang gedrückt wird.In the preceding example, the appearance of the button also changes when the user clicks it, but unless the button is pressed for a full second, the user does not see the effect. Standardmäßig wird die Animation nach einer Sekunde sichtbar.By default, the animation takes one second to occur. Da Benutzer wahrscheinlich in viel kürzerer Zeit auf eine Schaltfläche klicken und diese freigeben, ist das visuelle Feedback nicht wirksam, wenn Sie ControlTemplate die in Ihrem Standardzustand belassen.Because users are likely to click and release a button in much less time, the visual feedback will not be effective if you leave the ControlTemplate in its default state.

Sie können den Zeitraum angeben, in dem eine Animation ausgeführt wird, um einen reibungslosen Übergang eines Steuer Elements von einem Zustand in einen VisualTransition anderen durchzuführen ControlTemplate, indem Sie-Objekte hinzufügen.You can specify the amount of time that it takes an animation to occur to smoothly transition a control from one state to another by adding VisualTransition objects to the ControlTemplate. Wenn Sie einen VisualTransitionerstellen, geben Sie einen oder mehrere der folgenden Informationen an:When you create a VisualTransition, you specify one or more of the following:

  • Die Zeitspanne für einen Wechsel zwischen Zuständen.The time it takes for a transition between states to occur.

  • Zusätzliche Änderungen der Darstellung des Steuerelements im Moment des Übergangs.Additional changes in the control's appearance that occur at the time of the transition.

  • Gibt an, VisualTransition auf welche Zustände der angewendet wird.Which states the VisualTransition is applied to.

Festlegen der Dauer eines ÜbergangsSpecifying the Duration of a Transition

Sie können angeben, wie lange ein Übergang dauert, indem GeneratedDuration Sie die-Eigenschaft festlegen.You can specify how long a transition takes by setting the GeneratedDuration property. Das vorangehende Beispiel verfügt VisualState über einen, der angibt, dass der Rahmen der Schaltfläche transparent wird, wenn die Schaltfläche gedrückt wird, die Animation aber zu lange dauert, wenn die Schaltfläche schnell gedrückt und freigegeben wird.The preceding example has a VisualState that specifies that the button's border becomes transparent when the button is pressed, but the animation takes too long to be noticeable if the button is quickly pressed and released. Mit einem VisualTransition können Sie angeben, wie lange das Steuerelement für den Übergang in den gedrückten Zustand benötigt wird.You can use a VisualTransition to specify the amount of time it takes the control to transition into the pressed state. Im folgenden Beispiel wird die Zeitspanne für den Übergang in den gedrückten Zustand auf eine Hundertstelsekunde festgelegt.The following example specifies that the control takes one hundredth of a second to go into the pressed state.

<!--Take one hundredth of a second to transition to the
    Pressed state.-->
<VisualTransition To="Pressed" 
                  GeneratedDuration="0:0:0.01" />

Festlegen von Änderungen an der Darstellung der Steuerelemente während eines ÜbergangsSpecifying Changes to the Control's Appearance During a Transition

Das VisualTransition -Element Storyboard enthält ein, das beginnt, wenn das Steuerelement zwischen Zuständen übergeht.The VisualTransition contains a Storyboard that begins when the control transitions between states. Sie können beispielsweise eine bestimmte Animation festlegen, die bei einem Übergang aus dem Zustand MouseOver in den Zustand Normal angezeigt wird.For example, you can specify that a certain animation occurs when the control transitions from the MouseOver state to the Normal State. Im folgenden Beispiel wird eine VisualTransition erstellt, die angibt, dass der Rahmen der Schaltfläche, wenn der Benutzer den Mauszeiger von der Schaltfläche weg bewegt, in blau, dann in gelb und dann in schwarz in 1,5 Sekunden wechselt.The following example creates a VisualTransition that specifies that when the user moves the mouse pointer away from the button, the button's border changes to blue, then to yellow, then to black in 1.5 seconds.

<!--Take one and a half seconds to transition from the
    MouseOver state to the Normal state. 
    Have the SolidColorBrush, BorderBrush, fade to blue, 
    then to yellow, and then to black in that time.-->
<VisualTransition From="MouseOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
  <Storyboard>
    <ColorAnimationUsingKeyFrames
      Storyboard.TargetProperty="Color"
      Storyboard.TargetName="BorderBrush"
      FillBehavior="HoldEnd" >

      <ColorAnimationUsingKeyFrames.KeyFrames>

        <LinearColorKeyFrame Value="Blue" 
          KeyTime="0:0:0.5" />
        <LinearColorKeyFrame Value="Yellow" 
          KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="Black" 
          KeyTime="0:0:1.5" />

      </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
  </Storyboard>
</VisualTransition>

Festlegen der Bedingungen für einen visuellen ÜbergangSpecifying When a VisualTransition Is Applied

Eine VisualTransition kann so eingeschränkt werden, dass Sie nur auf bestimmte Zustände angewendet wird, oder Sie kann jedes Mal angewendet werden, wenn das Steuerelement zwischen Zuständen übergeht.A VisualTransition can be restricted to apply to only certain states, or it can be applied any time the control transitions between states. Im vorangehenden Beispiel wird der VisualTransition angewendet, wenn das-Steuerelement MouseOver vom-Zustand in Normal den-Zustand wechselt. im obigen Beispiel wird VisualTransition der angewendet, wenn das Steuerelement in Pressed den Zustand wechselt.In the preceding example, the VisualTransition is applied when the control goes from the MouseOver state to the Normal state; in the example before that, the VisualTransition is applied when the control goes into the Pressed state. Sie schränken durch Festlegen VisualTransition der-Eigenschaft und der To - From Eigenschaft ein, wenn angewendet wird.You restrict when a VisualTransition is applied by setting the To and From properties. In der folgenden Tabelle sind die Beschränkungsebenen aufgelistet, von der restriktivsten bis zu der am wenigsten restriktiven.The following table describes the levels of restriction from most restrictive to least restrictive.

Art der EinschränkungType of restriction From-WertValue of From To-WertValue of To
Aus einem angegebenen Zustand in einen anderen angegebenen ZustandFrom a specified state to another specified state Der Name einesVisualStateThe name of a VisualState Der Name einesVisualStateThe name of a VisualState
Aus einem beliebigen Zustand in einen angegebenen ZustandFrom any state to a specified state Nicht festgelegtNot set Der Name einesVisualStateThe name of a VisualState
Aus einem angegebenen Zustand in einen beliebigen ZustandFrom a specified state to any state Der Name einesVisualStateThe name of a VisualState Nicht festgelegtNot set
Aus einem beliebigen Zustand in einen beliebigen ZustandFrom any state to any other state Nicht festgelegtNot set Nicht festgelegtNot set

Sie können mehrere VisualTransition -Objekte in einem VisualStateGroup -Objekt verwenden, die auf denselben Zustand verweisen, aber Sie werden in der Reihenfolge verwendet, in der die vorherige Tabelle angegeben ist.You can have multiple VisualTransition objects in a VisualStateGroup that refer to the same state, but they will be used in the order that the previous table specifies. Im folgenden Beispiel gibt es zwei VisualTransition -Objekte.In the following example, there are two VisualTransition objects. Wenn das Pressed Steuerelement vom-Zustand in den MouseOver -Zustand übergeht, wird das From VisualTransition - To Element verwendet, das sowohl als auch festgelegt ist.When the control transitions from the Pressed state to the MouseOver state, the VisualTransition that has both From and To set is used. Wenn das Steuerelement von einem anderen Zustand als Pressed in den Zustand MouseOver wechselt, wird der andere Zustand verwendet.When the control transitions from a state that is not Pressed to the MouseOver state, the other state is used.

<!--Take one half second to trasition to the MouseOver state.-->
<VisualTransition To="MouseOver" 
                  GeneratedDuration="0:0:0.5" />

<!--Take one hundredth of a second to transition from the
    Pressed state to the MouseOver state.-->
<VisualTransition From="Pressed" To="MouseOver" 
                  GeneratedDuration="0:0:0.01" />

Der VisualStateGroup verfügt über Transitions eine-Eigenschaft, VisualTransition die die-Objekte enthält VisualState , die auf VisualStateGroupdie-Objekte in der angewendet werden.The VisualStateGroup has a Transitions property that contains the VisualTransition objects that apply to the VisualState objects in the VisualStateGroup. Als Autor können Sie beliebig alle VisualTransition gewünschten einschließen. ControlTemplateAs the ControlTemplate author, you are free to include any VisualTransition you want. Wenn jedoch die- To Eigenschaft und die-Eigenschaft auf Zustands Namen festgelegt sind, VisualStateGroupdie nicht VisualTransition in der- From Eigenschaft sind, wird der ignoriert.However, if the To and From properties are set to state names that are not in the VisualStateGroup, the VisualTransition is ignored.

Das folgende Beispiel zeigt die VisualStateGroup für die CommonStates.The following example shows the VisualStateGroup for the CommonStates. Im Beispiel wird ein VisualTransition für jeden der folgenden Übergänge der Schaltfläche definiert.The example defines a VisualTransition for each of the button's following transitions.

  • In den Zustand Pressed.To the Pressed state.

  • In den Zustand MouseOver.To the MouseOver state.

  • Aus dem Zustand Pressed in den Zustand MouseOver.From the Pressed state to the MouseOver state.

  • Aus dem Zustand MouseOver in den Zustand Normal.From the MouseOver state to the Normal state.

<VisualStateGroup x:Name="CommonStates">

  <!--Define the VisualTransitions that
      can be used when the control transitions 
      between VisualStates that are defined in the
      VisualStatGroup.-->
  <VisualStateGroup.Transitions>

    <!--Take one hundredth of a second to 
        transition to the Pressed state.-->
    <VisualTransition To="Pressed" 
                      GeneratedDuration="0:0:0.01" />

    <!--Take one half second to trasition 
        to the MouseOver state.-->
    <VisualTransition To="MouseOver" 
                      GeneratedDuration="0:0:0.5" />

    <!--Take one hundredth of a second to transition from the
        Pressed state to the MouseOver state.-->
    <VisualTransition From="Pressed" To="MouseOver" 
                      GeneratedDuration="0:0:0.01" />

    <!--Take one and a half seconds to transition from the
        MouseOver state to the Normal state. 
        Have the SolidColorBrush, BorderBrush, fade to blue, 
        then to yellow, and then to black in that time.-->
    <VisualTransition From="MouseOver" To="Normal" 
                      GeneratedDuration="0:0:1.5">
      <Storyboard>
        <ColorAnimationUsingKeyFrames
          Storyboard.TargetProperty="Color"
          Storyboard.TargetName="BorderBrush"
          FillBehavior="HoldEnd" >

          <ColorAnimationUsingKeyFrames.KeyFrames>
            <LinearColorKeyFrame Value="Blue" 
              KeyTime="0:0:0.5" />
            <LinearColorKeyFrame Value="Yellow" 
              KeyTime="0:0:1" />
            <LinearColorKeyFrame Value="Black" 
              KeyTime="0:0:1.5" />

          </ColorAnimationUsingKeyFrames.KeyFrames>
        </ColorAnimationUsingKeyFrames>
      </Storyboard>
    </VisualTransition>
  </VisualStateGroup.Transitions>

  <!--The remainder of the VisualStateGroup is the
      same as the previous example.-->

  <VisualState x:Name="Normal" />

  <VisualState x:Name="MouseOver">
    <Storyboard>
      <ColorAnimation 
        Storyboard.TargetName="BorderBrush" 
        Storyboard.TargetProperty="Color" 
        To="Red" />

    </Storyboard>
  </VisualState>

  <VisualState x:Name="Pressed">
    <Storyboard>
      <ColorAnimation 
        Storyboard.TargetName="BorderBrush" 
        Storyboard.TargetProperty="Color" 
        To="Transparent"/>
    </Storyboard>
  </VisualState>

  <!--The Disabled state is omitted for brevity.-->

</VisualStateGroup>

Anpassen von anderen Steuerelementen mit SteuerelementverträgenCustomizing Other Controls by Understanding the Control Contract

Ein-Steuerelement, ControlTemplate das ein-Objekt verwendet, um die FrameworkElement visuelle Struktur (mithilfe von-Objekten) VisualState und visuelles Verhalten (mithilfe von-Objekten) anzugeben, verwendet das Parts-Steuerelement ModellA control that uses a ControlTemplate to specify its visual structure (by using FrameworkElement objects) and visual behavior (by using VisualState objects) uses the parts control model. Viele Steuerelemente des WPFWPF 4 verwenden dieses Modell.Many of the controls that are included with WPFWPF 4 use this model. Die Teile, die ControlTemplate ein Autor beachten muss, werden über den Steuerelement Vertrag kommuniziert.The parts that a ControlTemplate author needs to be aware of are communicated through the control contract. Sobald Sie sich mit den Bausteinen des Steuerelementvertrags auskennen, können Sie die Darstellung beliebiger Steuerelemente anpassen, die das Teilsteuerelementen-Modell verwenden.When you understand the parts of a control contract, you can customize the appearance of any control that uses the parts control model.

Ein Steuerelementvertrag besteht aus drei Elementen:A control contract has three elements:

  • Den visuellen Elementen, die die Logik des Steuerelements verwenden.The visual elements that the control's logic uses.

  • Den Zuständen des Steuerelements und den Gruppen, zu denen die einzelnen Zustände gehören.The states of the control and the group each state belongs to.

  • Den öffentlichen Eigenschaften, die die visuelle Darstellung des Steuerelements beeinflussen.The public properties that visually affect the control.

Visuelle Elemente im SteuerelementvertragVisual Elements in the Control Contract

Manchmal interagiert die Logik eines Steuer Elements mit FrameworkElement einem-Element, ControlTemplatedas sich in befindet.Sometimes a control's logic interacts with a FrameworkElement that is in the ControlTemplate. Das Steuerelement kann z.B. ein Ereignis für ein zugehöriges Element behandeln.For example, the control might handle an event of one of its elements. Wenn ein Steuerelement erwartet, dass ein FrameworkElement bestimmtes in ControlTemplateder gefunden wird, muss es diese Informationen ControlTemplate an den Autor übermitteln.When a control expects to find a particular FrameworkElement in the ControlTemplate, it must convey that information to the ControlTemplate author. Das-Steuerelement TemplatePartAttribute verwendet, um den Typ des erwarteten Elements und den Namen des Elements zu übermitteln.The control uses the TemplatePartAttribute to convey the type of element that is expected, and what the name of the element should be. Der Button besitzt ComboBoxkeine Teile in seinem Steuerelement Vertrag, aber andere Steuerelemente, wie z. b. die, Do. FrameworkElementThe Button does not have FrameworkElement parts in its control contract, but other controls, such as the ComboBox, do.

Das folgende Beispiel zeigt die TemplatePartAttribute -Objekte, die für die ComboBox -Klasse angegeben werden.The following example shows the TemplatePartAttribute objects that are specified on the ComboBox class. Die Logik von ComboBox erwartet, dass PART_EditableTextBox ein TextBox mit dem Namen Popup und PART_Popup ein mit ControlTemplateder Bezeichnung in der gefunden werden.The logic of ComboBox expects to find a TextBox named PART_EditableTextBox and a Popup named PART_Popup in its ControlTemplate.

[TemplatePartAttribute(Name = "PART_EditableTextBox", Type = typeof(TextBox))]
[TemplatePartAttribute(Name = "PART_Popup", Type = typeof(Popup))]
public class ComboBox : ItemsControl
{
}
<TemplatePartAttribute(Name:="PART_EditableTextBox", Type:=GetType(TextBox))> _
<TemplatePartAttribute(Name:="Part_Popup", Type:=GetType(Popup))> _
Public Class ComboBox
    Inherits ItemsControl

End Class

Das folgende ControlTemplate Beispiel zeigt ein vereinfachtes für das ComboBox -Element, das die Elemente enthält, TemplatePartAttribute die von den ComboBox -Objekten der-Klasse angegeben werden.The following example shows a simplified ControlTemplate for the ComboBox that includes the elements that are specified by the TemplatePartAttribute objects on the ComboBox class.

<ControlTemplate TargetType="ComboBox">
  <Grid>
    <ToggleButton x:Name="DropDownToggle"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  
      Margin="-1" HorizontalContentAlignment="Right"
      IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,
                  RelativeSource={RelativeSource TemplatedParent}}">
      <Path x:Name="BtnArrow" Height="4" Width="8" 
        Stretch="Uniform" Margin="0,0,6,0"  Fill="Black"
        Data="F1 M 300,-190L 310,-190L 305,-183L 301,-190 Z " />
    </ToggleButton>
    <ContentPresenter x:Name="ContentPresenter" Margin="6,2,25,2"
      Content="{TemplateBinding SelectionBoxItem}"
      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}">
    </ContentPresenter>
    <TextBox x:Name="PART_EditableTextBox"
      Style="{x:Null}"
      Focusable="False"
      Background="{TemplateBinding Background}"
      HorizontalAlignment="Left" 
      VerticalAlignment="Center" 
      Margin="3,3,23,3"
      Visibility="Hidden"
      IsReadOnly="{TemplateBinding IsReadOnly}"/>

    <Popup x:Name="PART_Popup"
      IsOpen="{TemplateBinding IsDropDownOpen}">
      <Border x:Name="PopupBorder" 
        HorizontalAlignment="Stretch" Height="Auto" 
        MinWidth="{TemplateBinding ActualWidth}"
        MaxHeight="{TemplateBinding MaxDropDownHeight}"
        BorderThickness="{TemplateBinding BorderThickness}" 
        BorderBrush="Black" Background="White" CornerRadius="3">
        <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
          <ItemsPresenter/>
        </ScrollViewer>
      </Border>
    </Popup>

  </Grid>
</ControlTemplate>

Zustände im SteuerelementvertragStates in the Control Contract

Die Zustände eines Steuerelements sind ebenfalls Teil des Steuerelementvertrags.The states of a control are also a part of the control contract. Im Beispiel für das Erstellen ControlTemplate eines für Button einen wird gezeigt, wie die Darstellung eines Button in Abhängigkeit von seinen Zuständen angegeben wird.The example of creating a ControlTemplate for a Button shows how to specify the appearance of a Button depending on its states. Sie erstellen ein VisualState -Objekt für jeden angegebenen Zustand und VisualState platzieren alle-Objekte GroupName , VisualStateGroupdie ein gemeinsam verwenden, wie unter Ändern des Erscheinungs Bilds eines Steuer Elements in Abhängigkeit von dessen Status weiter oben in diesem Thema beschrieben.You create a VisualState for each specified state and put all VisualState objects that share a GroupName in a VisualStateGroup, as described in Changing the Appearance of a Control Depending on Its State earlier in this topic. Steuerelemente von Drittanbietern sollten Zustände mithilfe TemplateVisualStateAttributevon angeben, mit denen Designer-Tools, wie z. b. Expression Blend, die Zustände des Steuer Elements für das Erstellen von Steuerelement Vorlagen verfügbar machen können.Third-party controls should specify states by using the TemplateVisualStateAttribute, which enables designer tools, such as Expression Blend, to expose the control's states for authoring control templates.

Den Steuerelementvertrag für Steuerelemente in WPFWPF finden Sie unter Steuerelementformate und -vorlagen.To find the control contract for controls that are included with WPFWPF, see Control Styles and Templates.

Eigenschaften im SteuerelementvertragProperties in the Control Contract

Die öffentlichen Eigenschaften, die sich auf das Steuerelement visuell auswirken, sind ebenfalls im Steuerelementvertrag enthalten.The public properties that visually affect the control are also included in the control contract. Sie können diese Eigenschaften festlegen, um die Darstellung des Steuer Elements zu ändern, ohne ControlTemplateeine neue zu erstellen.You can set these properties to change the appearance of the control without creating a new ControlTemplate. Sie können auch die TemplateBinding -Markup Erweiterung verwenden, um Eigenschaften von Elementen in zu binden ControlTemplate , die in den öffentlichen Eigenschaften von definiert Buttonsind, die durch definiert werden.You can also use the TemplateBinding markup extension to bind properties of elements that are in the ControlTemplate to public properties that are defined by the Button.

Das folgende Beispiel zeigt den Steuerelementvertrag für die Schaltfläche.The following example shows the control contract for the button.

[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
public class Button : ButtonBase
{
    public static readonly DependencyProperty BackgroundProperty;
    public static readonly DependencyProperty BorderBrushProperty;
    public static readonly DependencyProperty BorderThicknessProperty;
    public static readonly DependencyProperty ContentProperty;
    public static readonly DependencyProperty ContentTemplateProperty;
    public static readonly DependencyProperty FontFamilyProperty;
    public static readonly DependencyProperty FontSizeProperty;
    public static readonly DependencyProperty FontStretchProperty;
    public static readonly DependencyProperty FontStyleProperty;
    public static readonly DependencyProperty FontWeightProperty;
    public static readonly DependencyProperty ForegroundProperty;
    public static readonly DependencyProperty HorizontalContentAlignmentProperty;
    public static readonly DependencyProperty PaddingProperty;
    public static readonly DependencyProperty TextAlignmentProperty;
    public static readonly DependencyProperty TextDecorationsProperty;
    public static readonly DependencyProperty TextWrappingProperty;
    public static readonly DependencyProperty VerticalContentAlignmentProperty;

    public Brush Background { get; set; }
    public Brush BorderBrush { get; set; }
    public Thickness BorderThickness { get; set; }
    public object Content { get; set; }
    public DataTemplate ContentTemplate { get; set; }
    public FontFamily FontFamily { get; set; }
    public double FontSize { get; set; }
    public FontStretch FontStretch { get; set; }
    public FontStyle FontStyle { get; set; }
    public FontWeight FontWeight { get; set; }
    public Brush Foreground { get; set; }
    public HorizontalAlignment HorizontalContentAlignment { get; set; }
    public Thickness Padding { get; set; }
    public TextAlignment TextAlignment { get; set; }
    public TextDecorationCollection TextDecorations { get; set; }
    public TextWrapping TextWrapping { get; set; }
    public VerticalAlignment VerticalContentAlignment { get; set; }
}
<TemplateVisualState(Name:="Normal", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="MouseOver", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Pressed", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Disabled", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Unfocused", GroupName:="FocusStates")> _
<TemplateVisualState(Name:="Focused", GroupName:="FocusStates")> _
Public Class Button
    Inherits ButtonBase

    Public Shared ReadOnly BackgroundProperty As DependencyProperty
    Public Shared ReadOnly BorderBrushProperty As DependencyProperty
    Public Shared ReadOnly BorderThicknessProperty As DependencyProperty
    Public Shared ReadOnly ContentProperty As DependencyProperty
    Public Shared ReadOnly ContentTemplateProperty As DependencyProperty
    Public Shared ReadOnly FontFamilyProperty As DependencyProperty
    Public Shared ReadOnly FontSizeProperty As DependencyProperty
    Public Shared ReadOnly FontStretchProperty As DependencyProperty
    Public Shared ReadOnly FontStyleProperty As DependencyProperty
    Public Shared ReadOnly FontWeightProperty As DependencyProperty
    Public Shared ReadOnly ForegroundProperty As DependencyProperty
    Public Shared ReadOnly HorizontalContentAlignmentProperty As DependencyProperty
    Public Shared ReadOnly PaddingProperty As DependencyProperty
    Public Shared ReadOnly TextAlignmentProperty As DependencyProperty
    Public Shared ReadOnly TextDecorationsProperty As DependencyProperty
    Public Shared ReadOnly TextWrappingProperty As DependencyProperty
    Public Shared ReadOnly VerticalContentAlignmentProperty As DependencyProperty

    Public Background As Brush
    Public BorderBrush As Brush
    Public BorderThickness As Thickness
    Public Content As Object
    Public ContentTemplate As DataTemplate
    Public FontFamily As FontFamily
    Public FontSize As Double
    Public FontStretch As FontStretch
    Public FontStyle As FontStyle
    Public FontWeight As FontWeight
    Public Foreground As Brush
    Public HorizontalContentAlignment As HorizontalAlignment
    Public Padding As Thickness
    Public TextAlignment As TextAlignment
    Public TextDecorations As TextDecorationCollection
    Public TextWrapping As TextWrapping
    Public VerticalContentAlignment As VerticalAlignment
End Class

Wenn Sie einen ControlTemplateerstellen, ist es oft am einfachsten, mit einem ControlTemplate vorhandenen zu beginnen und Änderungen daran vorzunehmen.When creating a ControlTemplate, it is often easiest to begin with an existing ControlTemplate and make changes to it. Sie können eine der folgenden Aktionen ausführen, um eine vorhandene ControlTemplatezu ändern:You can do one of the following to change an existing ControlTemplate:

Vollständiges BeispielComplete Example

Das folgende Beispiel zeigt den Button ControlTemplate in diesem Thema erläuterten Vorgang.The following example shows the complete ButtonControlTemplate that is discussed in this topic.

<StackPanel>
  <StackPanel.Resources>
    <Style TargetType="Button" x:Key="newTemplate">
      <!--Set the Background, Foreground, FontSize, Width, 
                  Height, Margin, and Template properties for
                  the Button.-->
      <Setter Property="Background" Value="Navy"/>
      <Setter Property="Foreground" Value="White"/>
      <Setter Property="FontSize" Value="14"/>
      <Setter Property="Width" Value="100"/>
      <Setter Property="Height" Value="40"/>
      <Setter Property="Margin" Value="10"/>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Border x:Name="RootElement">
              <VisualStateManager.VisualStateGroups>

                <!--Define the states and transitions for the common states.
                    The states in the VisualStateGroup are mutually exclusive to
                    each other.-->
                <VisualStateGroup Name="CommonStates">

                  <!--Define the VisualTransitions that can be used when the control
                      transitions between VisualStates that are defined in the
                      VisualStatGroup.-->
                  <VisualStateGroup.Transitions>

                    <!--Take one hundredth of a second to transition to the
                        Pressed state.-->
                    <VisualTransition To="Pressed" 
                                      GeneratedDuration="0:0:0.01" />

                    <!--Take one half second to trasition to the MouseOver state.-->
                    <VisualTransition To="MouseOver" 
                                      GeneratedDuration="0:0:0.5" />

                    <!--Take one hundredth of a second to transition from the
                        Pressed state to the MouseOver state.-->
                    <VisualTransition From="Pressed" To="MouseOver" 
                                      GeneratedDuration="0:0:0.01" />

                    <!--Take one and a half seconds to transition from the
                        MouseOver state to the Normal state. 
                        Have the SolidColorBrush, BorderBrush, fade to blue, 
                        then to yellow, and then to black in that time.-->
                    <VisualTransition From="MouseOver" To="Normal" 
                                          GeneratedDuration="0:0:1.5">
                      <Storyboard>
                        <ColorAnimationUsingKeyFrames
                          Storyboard.TargetProperty="Color"
                          Storyboard.TargetName="BorderBrush"
                          FillBehavior="HoldEnd" >

                          <ColorAnimationUsingKeyFrames.KeyFrames>

                            <LinearColorKeyFrame Value="Blue" 
                              KeyTime="0:0:0.5" />
                            <LinearColorKeyFrame Value="Yellow" 
                              KeyTime="0:0:1" />
                            <LinearColorKeyFrame Value="Black" 
                              KeyTime="0:0:1.5" />

                          </ColorAnimationUsingKeyFrames.KeyFrames>
                        </ColorAnimationUsingKeyFrames>
                      </Storyboard>
                    </VisualTransition>
                  </VisualStateGroup.Transitions>

                  <!--The Normal state is the state the button is in
                      when it is not in another state from this VisualStateGroup.
                      There is no special visual behavior for this state, but
                      the VisualState must be defined in order for the button
                      to return to its initial state.-->
                  <VisualState x:Name="Normal" />

                  <!--Change the border of the button to red when the
                      mouse is over the button.-->
                  <VisualState x:Name="MouseOver">
                    <Storyboard>
                      <ColorAnimation Storyboard.TargetName="BorderBrush"     
                                      Storyboard.TargetProperty="Color"
                                      To="Red" />

                    </Storyboard>
                  </VisualState>

                  <!--Change the border of the button to Transparent when the
                      button is pressed.-->
                  <VisualState x:Name="Pressed">
                    <Storyboard >
                      <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                      Storyboard.TargetProperty="Color" 
                                      To="Transparent" 
                                      />
                    </Storyboard>
                  </VisualState>

                  <!--Show the DisabledRect when the IsEnabled property on
                      the button is false.-->
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="DisabledRect" 
                                       Storyboard.TargetProperty="Opacity"
                                       To="1" Duration="0" />
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>

                <!--Define the states and transitions for the focus states.
                    The states in the VisualStateGroup are mutually exclusive to
                    each other.-->
                <VisualStateGroup x:Name="FocusStates">

                  <!--Define the VisualStates in this VistualStateGroup.-->
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="FocusVisual" 
                        Storyboard.TargetProperty="Visibility" Duration
                        ="0">
                        
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="FocusVisual" 
                        Storyboard.TargetProperty="Visibility"
                        Duration="0">
                        
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <!--Create the SolidColorBrush for the Background 
                  as an object elemment and give it a name so 
                  it can be referred to elsewhere in the control template.-->
              <Border.Background>
                <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
              </Border.Background>

              <!--Create a border that has a different color by adding smaller grid.
                  The background of this grid is specified by the button's Background
                  property.-->
              <Grid Background="{TemplateBinding Background}" Margin="4">

                <!--Create a Rectangle that indicates that the
                    Button has focus.-->
                <Rectangle Name="FocusVisual" 
                           Visibility="Collapsed" Margin="2" 
                           Stroke="{TemplateBinding Foreground}" 
                           StrokeThickness="1" 
                           StrokeDashArray="1.5 1.5"/>

                <!--Use a ContentPresenter to display the Content of
                    the Button.-->
                <ContentPresenter
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                  Margin="4,5,4,4" />

                <!--Create a rectangle that causes the button to appear
                    grayed out when it is disabled.-->
                <Rectangle x:Name="DisabledRect" 
                         Fill="#A5FFFFFF"
                         Opacity="0" IsHitTestVisible="false" />
              </Grid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

  </StackPanel.Resources>

  <Button Style="{StaticResource newTemplate}" 
          Content="Button1"/>

  <Button Style="{StaticResource newTemplate}"
          Background="Purple" 
          Content="Button2" />
</StackPanel>

Siehe auchSee also