Exemplarische Vorgehensweise: Erstellen einer Schaltfläche mit XAMLWalkthrough: Create a Button by Using XAML

In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie eine animierte Schaltfläche zur Verwendung in einer Windows Presentation Foundation (WPF)-Anwendung erstellen.The objective of this walkthrough is to learn how to create an animated button for use in a Windows Presentation Foundation (WPF) application. Diese exemplarische Vorgehensweise verwendet Stile und eine Vorlage, um eine angepasste Schaltflächen Ressource zu erstellen, die die Wiederverwendung von Code und die Trennung der Schaltflächen Logik von der Schaltflächen DeklarationThis walkthrough uses styles and a template to create a customized button resource that allows reuse of code and separation of button logic from the button declaration. Diese exemplarische Vorgehensweise ist vollständig in geschrieben Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) .This walkthrough is written entirely in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML).

Wichtig

Diese exemplarische Vorgehensweise führt Sie durch die Schritte zum Erstellen der Anwendung, indem Sie in Visual Studio eingeben oder kopieren und einfügen Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) .This walkthrough guides you through the steps for creating the application by typing or copying and pasting Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) into Visual Studio. Wenn Sie lieber erfahren möchten, wie Sie einen Designer verwenden, um dieselbe Anwendung zu erstellen, finden Sie unter Erstellen einer Schaltfläche mit Microsoft Expression BlendWeitere Informationen.If you would prefer to learn how to use a designer to create the same application, see Create a Button by Using Microsoft Expression Blend.

In der folgenden Abbildung sind die Schaltflächen fertig angezeigt.The following figure shows the finished buttons.

Benutzerdefinierte Schaltflächen, die mit XAML erstellt wurdenCustom buttons that were created by using XAML

Grundlegende Schaltflächen erstellenCreate Basic Buttons

Erstellen Sie zunächst ein neues Projekt, und fügen Sie dem Fenster einige Schaltflächen hinzu.Let's start by creating a new project and adding a few buttons to the window.

So erstellen Sie ein neues WPF-Projekt und fügen dem Fenster Schaltflächen hinzuTo create a new WPF project and add buttons to the window

  1. Starten Sie Visual Studio.Start Visual Studio.

  2. Erstellen Sie ein neues WPF-Projekt: Zeigen Sie im Menü Datei auf neu, und klicken Sie dann auf Projekt.Create a new WPF project: On the File menu, point to New, and then click Project. Suchen Sie die Vorlage Windows-Anwendung (WPF) , und benennen Sie das Projekt mit dem Namen "AnimatedButton".Find the Windows Application (WPF) template and name the project "AnimatedButton". Dadurch wird das Gerüst für die Anwendung erstellt.This will create the skeleton for the application.

  3. Einfache Standard Schaltflächen hinzufügen: Alle Dateien, die Sie für diese exemplarische Vorgehensweise benötigen, werden von der Vorlage bereitgestellt.Add basic default buttons: All the files you need for this walkthrough are provided by the template. Öffnen Sie die Datei Window1. XAML, indem Sie in Projektmappen-Explorer auf die Datei doppelklicken.Open the Window1.xaml file by double clicking it in Solution Explorer. Standardmäßig ist ein- Grid Element in Window1. XAML vorhanden.By default, there is a Grid element in Window1.xaml. Entfernen Grid Sie das-Element, und fügen Sie der Seite einige Schaltflächen hinzu, Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) indem Sie den folgenden hervorgehobenen Code in Window1. xaml eingeben oder kopieren und einfügen:Remove the Grid element and add a few buttons to the Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) page by typing or copy and pasting the following highlighted code to Window1.xaml:

    <Window x:Class="AnimatedButton.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="AnimatedButton" Height="300" Width="300"
      Background="Black">
      <!-- Buttons arranged vertically inside a StackPanel. -->
      <StackPanel HorizontalAlignment="Left">
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
      </StackPanel>
    </Window>
    

    Drücken Sie F5, um die Anwendung auszuführen. Es sollte eine Reihe von Schaltflächen angezeigt werden, die wie in der folgenden Abbildung aussehen.Press F5 to run the application; you should see a set of buttons that looks like the following figure.

    Drei grundlegende SchaltflächenThree basic buttons

    Nachdem Sie nun die grundlegenden Schaltflächen erstellt haben, sind Sie mit der Arbeit in der Datei Window1. XAML fertig.Now that you have created the basic buttons, you are finished working in the Window1.xaml file. Der Rest der exemplarischen Vorgehensweise konzentriert sich auf die Datei app. XAML, in der Stile und eine Vorlage für die Schaltflächen definiert werden.The rest of the walkthrough focuses on the app.xaml file, defining styles and a template for the buttons.

Festlegen von grundlegenden EigenschaftenSet Basic Properties

Als nächstes legen wir einige Eigenschaften für diese Schaltflächen fest, um die Darstellung und das Layout der Schaltfläche zu steuern.Next, let's set some properties on these buttons to control the button appearance and layout. Anstatt die Eigenschaften für die Schaltflächen einzeln festzulegen, verwenden Sie Ressourcen, um Schaltflächen Eigenschaften für die gesamte Anwendung zu definieren.Rather than setting properties on the buttons individually, you will use resources to define button properties for the entire application. Anwendungs Ressourcen sind konzeptionell vergleichbar mit externen Cascading Stylesheets (CSS) für Webseiten. Ressourcen sind jedoch viel leistungsfähiger als Cascading Stylesheets (CSS), wie Sie am Ende dieser exemplarischen Vorgehensweise sehen werden.Application resources are conceptually similar to external Cascading Style Sheets (CSS) for Web pages; however, resources are much more powerful than Cascading Style Sheets (CSS), as you will see by the end of this walkthrough. Weitere Informationen zu Ressourcen finden Sie unter XAML-Ressourcen.To learn more about resources, see XAML Resources.

So verwenden Sie Stile zum Festlegen grundlegender Eigenschaften auf den SchaltflächenTo use styles to set basic properties on the buttons

  1. Definieren eines "Application. Resources"-Blocks: Öffnen Sie App. XAML, und fügen Sie das folgende hervorgehobene Markup hinzu, wenn es nicht bereits vorhanden ist:Define an Application.Resources block: Open app.xaml and add the following highlighted markup if it is not already there:

    <Application x:Class="AnimatedButton.App"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      StartupUri="Window1.xaml"
      >
      <Application.Resources>
        <!-- Resources for the entire application can be defined here. -->
      </Application.Resources>
    </Application>
    

    Der Ressourcenbereich wird bestimmt, wo Sie die Ressource definieren.Resource scope is determined by where you define the resource. Durch Definieren von Ressourcen in Application.Resources in der Datei "App. XAML" kann die Ressource von überall in der Anwendung verwendet werden.Defining resources in Application.Resources in the app.xaml file enables the resource to be used from anywhere in the application. Weitere Informationen zum Definieren des Umfangs ihrer Ressourcen finden Sie unter XAML-Ressourcen.To learn more about defining the scope of your resources, see XAML Resources.

  2. Erstellen Sie einen Stil, und definieren Sie grundlegende Eigenschaftswerte damit: Fügen Sie dem-Block das folgende Markup hinzu Application.Resources .Create a style and define basic property values with it: Add the following markup to the Application.Resources block. Dieses Markup erstellt eine Style , die für alle Schaltflächen in der Anwendung gilt, wobei der Width der Schaltflächen auf 90 und auf 10 festgelegt wird Margin :This markup creates a Style that applies to all buttons in the application, setting the Width of the buttons to 90 and the Margin to 10:

    <Application.Resources>
      <Style TargetType="Button">
        <Setter Property="Width" Value="90" />
        <Setter Property="Margin" Value="10" />
      </Style>
    </Application.Resources>
    

    Die- TargetType Eigenschaft gibt an, dass der Stil für alle Objekte vom Typ gilt Button .The TargetType property specifies that the style applies to all objects of type Button. Jeder Setter legt einen anderen Eigenschafts Wert für fest Style .Each Setter sets a different property value for the Style. Daher hat an diesem Punkt jede Schaltfläche in der Anwendung eine Breite von 90 und einen Rand von 10.Therefore, at this point every button in the application has a width of 90 and a margin of 10. Wenn Sie F5 drücken, um die Anwendung auszuführen, wird das folgende Fenster angezeigt.If you press F5 to run the application, you see the following window.

    Schaltflächen mit einer Breite von 90 und einem Rand von 10Buttons with a width of 90 and a margin of 10

    Es gibt noch viel mehr Möglichkeiten mit Stilen, einschließlich einer Vielzahl von Möglichkeiten, um zu optimieren, welche Objekte als Ziel verwendet werden, wie komplexe Eigenschaftswerte angegeben werden, und sogar Stile als Eingabe für andere Stile verwendet werden.There is much more you can do with styles, including a variety of ways to fine-tune what objects are targeted, specifying complex property values, and even using styles as input for other styles. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.For more information, see Styling and Templating.

  3. Legen Sie einen Stil Eigenschafts Wert auf eine Ressource fest: Ressourcen ermöglichen eine einfache Möglichkeit, häufig definierte Objekte und Werte wiederzuverwenden.Set a style property value to a resource: Resources enable a simple way to reuse commonly defined objects and values. Es ist besonders hilfreich, komplexe Werte mithilfe von Ressourcen zu definieren, um den Code modularer zu gestalten.It is especially useful to define complex values using resources to make your code more modular. Fügen Sie der Datei "App. XAML" das folgende hervorgehobene Markup hinzu.Add the following highlighted markup to app.xaml.

    <Application.Resources>
      <LinearGradientBrush x:Key="GrayBlueGradientBrush" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="DarkGray" Offset="0" />
        <GradientStop Color="#CCCCFF" Offset="0.5" />
        <GradientStop Color="DarkGray" Offset="1" />
      </LinearGradientBrush>
      <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
        <Setter Property="Width" Value="80" />
        <Setter Property="Margin" Value="10" />
      </Style>
    </Application.Resources>
    

    Direkt unter dem- Application.Resources Block haben Sie eine Ressource mit dem Namen "GrayBlueGradientBrush" erstellt.Directly under the Application.Resources block, you created a resource called "GrayBlueGradientBrush". Diese Ressource definiert einen horizontalen Farbverlauf.This resource defines a horizontal gradient. Diese Ressource kann als Eigenschafts Wert von jeder beliebigen Stelle in der Anwendung verwendet werden, einschließlich der Schaltfläche für den Schaltflächen Stil für die Background Eigenschaft.This resource can be used as a property value from anywhere in the application, including inside the button style setter for the Background property. Jetzt haben alle Schaltflächen einen Background Eigenschafts Wert dieses Farbverlaufs.Now, all the buttons have a Background property value of this gradient.

    Drücken Sie die Taste F5, um die Anwendung auszuführen.Press F5 to run the application. Es sollte wie folgt aussehen.It should look like the following.

    Schaltflächen mit einem FarbverlaufshintergrundButtons with a gradient background

Erstellen einer Vorlage, die das Aussehen der Schaltfläche definiertCreate a Template That Defines the Look of the Button

In diesem Abschnitt erstellen Sie eine Vorlage, mit der die Darstellung (Darstellung) der Schaltfläche angepasst wird.In this section, you create a template that customizes the appearance (presentation) of the button. Die Darstellung der Schaltfläche besteht aus mehreren Objekten, einschließlich Rechtecke und anderen Komponenten, um der Schaltfläche ein eindeutiges aussehen zu verschaffen.The button presentation is made up of several objects including rectangles and other components to give the button a unique look.

Bisher wurde die Steuerung, wie Schaltflächen in der Anwendung aussehen, auf das Ändern der Eigenschaften der Schaltfläche beschränkt.So far, the control of how buttons look in the application has been confined to changing properties of the button. Was geschieht, wenn Sie radikale Änderungen an der Darstellung der Schaltfläche vornehmen möchten?What if you want to make more radical changes to the button's appearance? Vorlagen ermöglichen eine leistungsstarke Kontrolle über die Darstellung eines Objekts.Templates enable powerful control over the presentation of an object. Da Vorlagen in Stilen verwendet werden können, können Sie eine Vorlage auf alle Objekte anwenden, auf die sich der Stil bezieht (in dieser exemplarischen Vorgehensweise die Schaltfläche).Because templates can be used within styles, you can apply a template to all objects that the style applies to (in this walkthrough, the button).

So definieren Sie mit der Vorlage das Aussehen der SchaltflächeTo use the template to define the look of the button

  1. Einrichten der Vorlage: Da Steuerelemente wie Button über eine- Template Eigenschaft verfügen, können Sie den Eigenschafts Wert der Vorlage genau wie die anderen Eigenschaftswerte definieren, die wir in einem mithilfe von festgelegt haben Style Setter .Set up the template: Because controls like Button have a Template property, you can define the template property value just like the other property values we have set in a Style using a Setter. Fügen Sie dem Schaltflächen Stil das folgende hervorgehobene Markup hinzu.Add the following highlighted markup to your button style.

    <Application.Resources>
      <LinearGradientBrush x:Key="GrayBlueGradientBrush"
        StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="DarkGray" Offset="0" />
        <GradientStop Color="#CCCCFF" Offset="0.5" />
        <GradientStop Color="DarkGray" Offset="1" />
      </LinearGradientBrush>
      <Style TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
        <Setter Property="Width" Value="80" />
        <Setter Property="Margin" Value="10" />
        <Setter Property="Template">
          <Setter.Value>
            <!-- The button template is defined here. -->
          </Setter.Value>
        </Setter>
      </Style>
    </Application.Resources>
    
  2. Alter Button-Präsentation: An diesem Punkt müssen Sie die Vorlage definieren.Alter button presentation: At this point, you need to define the template. Fügen Sie das folgende hervorgehobene Markup hinzu.Add the following highlighted markup. Dieses Markup gibt zwei Rectangle Elemente mit abgerundeten Kanten an, gefolgt von einer DockPanel .This markup specifies two Rectangle elements with rounded edges, followed by a DockPanel. Der DockPanel wird zum Hosten des ContentPresenter der Schaltfläche verwendet.The DockPanel is used to host the ContentPresenter of the button. Ein ContentPresenter zeigt den Inhalt der Schaltfläche an.A ContentPresenter displays the content of the button. In dieser exemplarischen Vorgehensweise ist der Inhalt Text ("Button 1", "Button 2", "Schaltfläche 3").In this walkthrough, the content is text ("Button 1", "Button 2", "Button 3"). Alle Vorlagen Komponenten (Rechtecke und DockPanel ) werden in einer angeordnet Grid .All of the template components (the rectangles and the DockPanel) are laid out inside of a Grid.

    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
          <!-- Outer Rectangle with rounded corners. -->
          <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
          <!-- Inner Rectangle with rounded corners. -->
          <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
          <!-- Present Content (text) of the button. -->
          <DockPanel Name="myContentPresenterDockPanel">
            <ContentPresenter x:Name="myContentPresenter" Margin="20" Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
          </DockPanel>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
    

    Drücken Sie die Taste F5, um die Anwendung auszuführen.Press F5 to run the application. Es sollte wie folgt aussehen.It should look like the following.

    Fenster mit drei Schaltflächen

  3. Fügen Sie der Vorlage einen glasseffect hinzu: Als Nächstes fügen Sie das Glas hinzu.Add a glasseffect to the template: Next you will add the glass. Zuerst erstellen Sie einige Ressourcen, die einen Glas Farbverlaufs Effekt erzeugen.First you create some resources that create a glass gradient effect. Fügen Sie diese Farbverlaufs Ressourcen an einer beliebigen Stelle innerhalb des Application.Resources BlocksAdd these gradient resources anywhere within the Application.Resources block:

    <Application.Resources>
      <GradientStopCollection x:Key="MyGlassGradientStopsResource">
        <GradientStop Color="WhiteSmoke" Offset="0.2" />
        <GradientStop Color="Transparent" Offset="0.4" />
        <GradientStop Color="WhiteSmoke" Offset="0.5" />
        <GradientStop Color="Transparent" Offset="0.75" />
        <GradientStop Color="WhiteSmoke" Offset="0.9" />
        <GradientStop Color="Transparent" Offset="1" />
      </GradientStopCollection>
      <LinearGradientBrush x:Key="MyGlassBrushResource"
        StartPoint="0,0" EndPoint="1,1" Opacity="0.75"
        GradientStops="{StaticResource MyGlassGradientStopsResource}" />
    <!-- Styles and other resources below here. -->
    

    Diese Ressourcen werden als Fill für ein Rechteck verwendet, das in die Grid der Schaltflächen Vorlage eingefügt wird.These resources are used as the Fill for a rectangle that we insert into the Grid of the button template. Fügen Sie der Vorlage das folgende hervorgehobene Markup hinzu.Add the following highlighted markup to the template.

    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
          ClipToBounds="True">
    
        <!-- Outer Rectangle with rounded corners. -->
        <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
          RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
    
        <!-- Inner Rectangle with rounded corners. -->
        <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20"
          Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
    
        <!-- Glass Rectangle -->
        <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch"
          StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
          Fill="{StaticResource MyGlassBrushResource}"
          RenderTransformOrigin="0.5,0.5">
          <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="LightBlue" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Stroke>
          <!-- These transforms have no effect as they are declared here.
          The reason the transforms are included is to be targets
          for animation (see later). -->
          <Rectangle.RenderTransform>
            <TransformGroup>
              <ScaleTransform />
              <RotateTransform />
            </TransformGroup>
          </Rectangle.RenderTransform>
          <!-- A BevelBitmapEffect is applied to give the button a "Beveled" look. -->
          <Rectangle.BitmapEffect>
            <BevelBitmapEffect />
          </Rectangle.BitmapEffect>
        </Rectangle>
    
        <!-- Present Text of the button. -->
        <DockPanel Name="myContentPresenterDockPanel">
          <ContentPresenter x:Name="myContentPresenter" Margin="20"
            Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
        </DockPanel>
      </Grid>
    </ControlTemplate>
    </Setter.Value>
    

    Beachten Sie, dass der Opacity des Rechtecks mit der- x:Name Eigenschaft von "glassCube" den Wert 0 hat. Wenn Sie das Beispiel ausführen, wird das Glas Rechteck nicht oberhalb der oberen Position angezeigt.Notice that the Opacity of the rectangle with the x:Name property of "glassCube" is 0, so when you run the sample, you do not see the glass rectangle overlaid on top. Dies liegt daran, dass später der Vorlage Trigger hinzugefügt werden, wenn der Benutzer mit der Schaltfläche interagiert.This is because we will later add triggers to the template for when the user interacts with the button. Sie können jedoch sehen, wie die Schaltfläche jetzt aussieht, indem Sie den Opacity Wert in 1 ändern und die Anwendung ausführen.However, you can see what the button looks like now by changing the Opacity value to 1 and running the application. Dies wird in der folgenden Abbildung veranschaulicht.See the following figure. Bevor Sie mit dem nächsten Schritt fortfahren, ändern Opacity Sie zurück in 0.Before proceeding to the next step, change the Opacity back to 0.

    Benutzerdefinierte Schaltflächen, die mit XAML erstellt wurdenCustom buttons that were created by using XAML

Interaktivität zum Erstellen einer SchaltflächeCreate Button Interactivity

In diesem Abschnitt erstellen Sie Eigenschafts Trigger und Ereignis Trigger, um Eigenschaftswerte zu ändern und Animationen als Reaktion auf Benutzeraktionen auszuführen, z. b. das Bewegen des Mauszeigers über die Schaltfläche und das Klicken auf.In this section, you will create property triggers and event triggers to change property values and run animations in response to user actions such as moving the mouse pointer over the button and clicking.

Eine einfache Möglichkeit, Interaktivität hinzuzufügen (Mouseover, Mouseover, Click usw.), besteht darin, Trigger innerhalb Ihrer Vorlage oder Ihres Stils zu definieren.An easy way to add interactivity (mouse-over, mouse-leave, click, and so on) is to define triggers within your template or style. Um einen zu erstellen Trigger , definieren Sie eine Eigenschaft "Bedingung", z. b IsMouseOver .: der Eigenschafts Wert der Schaltfläche ist gleich true .To create a Trigger, you define a property "condition" such as: The button IsMouseOver property value is equal to true. Dann definieren Sie Setter (Aktionen), die stattfinden, wenn die Auslöserbedingung erfüllt ist.You then define setters (actions) that take place when the trigger condition is true.

So erstellen Sie Schaltflächen-InteraktivitätTo create button interactivity

  1. Vorlagen Trigger hinzufügen: Fügen Sie der Vorlage das hervorgehobene Markup hinzu.Add template triggers: Add the highlighted markup to your template.

    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Width="{TemplateBinding Width}"
          Height="{TemplateBinding Height}" ClipToBounds="True">
    
          <!-- Outer Rectangle with rounded corners. -->
          <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"
          RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
    
          <!-- Inner Rectangle with rounded corners. -->
          <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" Stroke="Transparent"
            StrokeThickness="20"
            Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"
          />
    
          <!-- Glass Rectangle -->
          <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
            Fill="{StaticResource MyGlassBrushResource}"
            RenderTransformOrigin="0.5,0.5">
            <Rectangle.Stroke>
              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Offset="0.0" Color="LightBlue" />
                  <GradientStop Offset="1.0" Color="Gray" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Rectangle.Stroke>
    
            <!-- These transforms have no effect as they
                 are declared here.
                 The reason the transforms are included is to be targets
                 for animation (see later). -->
            <Rectangle.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <RotateTransform />
              </TransformGroup>
            </Rectangle.RenderTransform>
    
              <!-- A BevelBitmapEffect is applied to give the button a
                   "Beveled" look. -->
            <Rectangle.BitmapEffect>
              <BevelBitmapEffect />
            </Rectangle.BitmapEffect>
          </Rectangle>
    
          <!-- Present Text of the button. -->
          <DockPanel Name="myContentPresenterDockPanel">
            <ContentPresenter x:Name="myContentPresenter" Margin="20"
              Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
          </DockPanel>
        </Grid>
    
        <ControlTemplate.Triggers>       <!-- Set action triggers for the buttons and define            what the button does in response to those triggers. -->     </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
    
  2. Eigenschafts Trigger hinzufügen: Fügen Sie dem Block das hervorgehobene Markup hinzu ControlTemplate.Triggers :Add property triggers: Add the highlighted markup to the ControlTemplate.Triggers block:

    <ControlTemplate.Triggers>
    
      <!-- Set properties when mouse pointer is over the button. -->   <Trigger Property="IsMouseOver" Value="True">     <!-- Below are three property settings that occur when the           condition is met (user mouses over button).  -->     <!-- Change the color of the outer rectangle when user           mouses over it. -->     <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <!-- Sets the glass opacity to 1, therefore, the           glass "appears" when user mouses over it. -->     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />     <!-- Makes the text slightly blurry as though you           were looking at it through blurry glass. -->     <Setter Property="ContentPresenter.BitmapEffect"        TargetName="myContentPresenter">       <Setter.Value>         <BlurBitmapEffect Radius="1" />       </Setter.Value>     </Setter>   </Trigger>
    
    <ControlTemplate.Triggers/>
    

    Drücken Sie F5, um die Anwendung auszuführen, und sehen Sie sich den Effekt an, während Sie den Mauszeiger über den Schaltflächen ausführen.Press F5 to run the application and see the effect as you run the mouse pointer over the buttons.

  3. Hinzufügen eines Fokus Auslösers: Als Nächstes fügen wir einige ähnliche Setter hinzu, um den Fall zu behandeln, dass die Schaltfläche den Fokus besitzt (z. b. Nachdem der Benutzer darauf geklickt hat).Add a focus trigger: Next, we'll add some similar setters to handle the case when the button has focus (for example, after the user clicks it).

    <ControlTemplate.Triggers>
    
      <!-- Set properties when mouse pointer is over the button. -->
      <Trigger Property="IsMouseOver" Value="True">
    
        <!-- Below are three property settings that occur when the
             condition is met (user mouses over button).  -->
        <!-- Change the color of the outer rectangle when user          mouses over it. -->
        <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
          Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
    
        <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
        <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />
    
        <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
        <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
          <Setter.Value>
            <BlurBitmapEffect Radius="1" />
          </Setter.Value>
        </Setter>
      </Trigger>
      <!-- Set properties when button has focus. -->   <Trigger Property="IsFocused" Value="true">     <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />     <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />   </Trigger>
    
    </ControlTemplate.Triggers>
    

    Drücken Sie F5, um die Anwendung auszuführen, und klicken Sie auf eine der Schaltflächen.Press F5 to run the application and click on one of the buttons. Beachten Sie, dass die Schaltfläche hervorgehoben bleibt, nachdem Sie darauf geklickt haben, da Sie noch den Fokus besitztNotice that the button stays highlighted after you click it because it still has focus. Wenn Sie auf eine andere Schaltfläche klicken, erhält die neue Schaltfläche den Fokus, während der letzte die Schaltfläche verliert.If you click another button, the new button gains focus while the last one loses it.

  4. Animationen hinzufügen für MouseEnter und MouseLeave : Als Nächstes fügen wir den Triggern einige Animationen hinzu. Add animations for MouseEnter and MouseLeave : Next we add some animations to the triggers. Fügen Sie das folgende Markup an einer beliebigen Stelle innerhalb des- ControlTemplate.Triggers Blocks hinzu.Add the following markup anywhere inside of the ControlTemplate.Triggers block.

    <!-- Animations that start when mouse enters and leaves button. -->
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard Name="mouseEnterBeginStoryboard">
          <Storyboard>
          <!-- This animation makes the glass rectangle shrink in the X direction. -->
            <DoubleAnimation Storyboard.TargetName="glassCube"
              Storyboard.TargetProperty=
              "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
              By="-0.1" Duration="0:0:0.5" />
            <!-- This animation makes the glass rectangle shrink in the Y direction. -->
            <DoubleAnimation
            Storyboard.TargetName="glassCube"
              Storyboard.TargetProperty=
              "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
              By="-0.1" Duration="0:0:0.5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
      <EventTrigger.Actions>
        <!-- Stopping the storyboard sets all animated properties back to default. -->
        <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
      </EventTrigger.Actions>
    </EventTrigger>
    

    Das Glas Rechteck verkleinert sich, wenn der Mauszeiger über die Schaltfläche bewegt wird, und kehrt zur normalen Größe zurück, wenn der Zeiger verlässt.The glass rectangle shrinks when the mouse pointer moves over the button and returns back to normal size when the pointer leaves.

    Zwei Animationen werden ausgelöst, wenn der Mauszeiger über die Schaltfläche bewegt wird (das- MouseEnter Ereignis wird ausgelöst).There are two animations that are triggered when the pointer goes over the button (MouseEnter event is raised). Diese Animationen verkleinern das Glas Rechteck entlang der X-und Y-Achse.These animations shrink the glass rectangle along the X and Y axis. Beachten Sie die Eigenschaften der DoubleAnimation Elemente – Duration und By .Notice the properties on the DoubleAnimation elements — Duration and By. Der Duration gibt an, dass die Animation über eine halbe Sekunde ausgeführt wird, und By gibt an, dass das Glas um 10% verkleinert wird.The Duration specifies that the animation occurs over half a second, and By specifies that the glass shrinks by 10%.

    Der zweite Ereignis auslöst ( MouseLeave ) beendet einfach den ersten.The second event trigger (MouseLeave) simply stops the first one. Wenn Sie ein Beenden Storyboard , werden alle animierten Eigenschaften auf die Standardwerte zurückgegeben.When you stop a Storyboard, all the animated properties return to their default values. Wenn der Benutzer den Mauszeiger auf die Schaltfläche verschiebt, wird die Schaltfläche auf die Art und Weise zurückgesetzt, in der sich der Mauszeiger über die Schaltfläche bewegt hat.Therefore, when the user moves the pointer off the button, the button goes back to the way it was before the mouse pointer moved over the button. Weitere Informationen zu Animationen finden Sie unter Übersichtüber Animationen.For more information about animations, see Animation Overview.

  5. Fügen Sie eine Animation für hinzu, wenn auf die Schaltfläche geklickt wird: Der letzte Schritt ist das Hinzufügen eines-Auslösers, wenn der Benutzer auf die Schaltfläche klickt.Add an animation for when the button is clicked: The final step is to add a trigger for when the user clicks the button. Fügen Sie das folgende Markup an einer beliebigen Stelle innerhalb des- ControlTemplate.Triggers Blocks hinzu:Add the following markup anywhere inside of the ControlTemplate.Triggers block:

    <!-- Animation fires when button is clicked, causing glass to spin.  -->
    <EventTrigger RoutedEvent="Button.Click">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="glassCube"
              Storyboard.TargetProperty=
              "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
              By="360" Duration="0:0:0.5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
    

    Drücken Sie F5, um die Anwendung auszuführen, und klicken Sie auf eine der Schaltflächen.Press F5 to run the application, and click one of the buttons. Wenn Sie auf eine Schaltfläche klicken, dreht sich das Glas Rechteck herum.When you click a button, the glass rectangle spins around.

ZusammenfassungSummary

In dieser exemplarischen Vorgehensweise haben Sie die folgenden Übungen ausgeführt:In this walkthrough, you performed the following exercises:

  • Als Ziel Style für einen Objekttyp ( Button ).Targeted a Style to an object type (Button).

  • Die grundlegenden Eigenschaften der Schaltflächen in der gesamten Anwendung werden mithilfe von gesteuert Style .Controlled basic properties of the buttons in the entire application using the Style.

  • Es wurden Ressourcen wie Farbverläufe erstellt, die für Eigenschaftswerte der Setter verwendet werden Style .Created resources like gradients to use for property values of the Style setters.

  • Sie haben das Aussehen von Schaltflächen in der gesamten Anwendung angepasst, indem Sie eine Vorlage auf die Schaltflächen anwenden.Customized the look of buttons in the entire application by applying a template to the buttons.

  • Benutzerdefiniertes Verhalten für die Schaltflächen als Reaktion auf Benutzeraktionen (z. b. MouseEnter , MouseLeave und Click ), die Animationseffekte enthalten.Customized behavior for the buttons in response to user actions (such as MouseEnter, MouseLeave, and Click) that included animation effects.

Siehe auchSee also