Exemplarische Vorgehensweise: Erstellen einer Schaltfläche mit XAML

  • Artikel

In dieser exemplarischen Vorgehensweise wird erläutert, wie Sie eine animierte Schaltfläche für die Verwendung in einer WPF-Anwendung (Windows Presentation Foundation) erstellen. In der exemplarischen Vorgehensweise werden Stile und eine Vorlage verwendet, um eine angepasste Schaltflächenressource zu erstellen, die es ermöglicht, Code wiederzuverwenden und die Schaltflächenlogik von der Schaltflächendeklaration zu trennen. Diese exemplarische Vorgehensweise ist vollständig in XAML (Extensible Application Markup Language) geschrieben.

Wichtig

In dieser exemplarischen Vorgehensweise werden Sie durch die Schritte zum Erstellen der Anwendung geführt, indem Sie XAML-Code (Extensible Application Markup Language) in Visual Studio eingeben oder einfügen. Wenn Sie lieber erfahren möchten, wie Sie einen Designer zum Erstellen derselben Anwendung verwenden können, lesen Sie unter Erstellen einer Schaltfläche mit Microsoft Expression Blend nach.

Die folgende Abbildung zeigt die fertigen Schaltflächen.

Custom buttons that were created by using XAML

Erstellen der grundlegenden Schaltflächen

Sie beginnen mit dem Erstellen eines neuen Projekts und dem Hinzufügen einiger Schaltflächen zum Fenster.

So erstellen Sie ein neues WPF-Projekt und fügen dem Fenster Schaltflächen hinzu

  1. Starten Sie Visual Studio.

  2. Erstellen eines neuen WPF-Projekts: Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt. Suchen Sie die Vorlage Windows Application (WPF), und benennen Sie das Projekt mit „AnimatedButton“. Dadurch wird das Gerüst für die Anwendung erstellt.

  3. Hinzufügen grundlegender Standardschaltflächen: Alle Dateien, die Sie für diese exemplarische Vorgehensweise benötigen, werden von der Vorlage bereitgestellt. Öffnen Sie die Datei „Window1.xaml“, indem Sie im Projektmappen-Explorer darauf doppelklicken. Standardmäßig gibt es ein Grid-Element in „Window1.xaml“. Entfernen Sie das Grid-Element, und fügen Sie der XAML-Seite (Extensible Application Markup Language) einige Schaltflächen hinzu, indem Sie den folgenden hervorgehobenen Code in der „Window1.xaml“ eingeben oder einfügen:

    <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. Sie sollten eine Reihe von Schaltflächen sehen, die wie in der folgenden Abbildung aussehen.

    Three basic buttons

    Nachdem Sie die grundlegenden Schaltflächen erstellt haben, sind Sie mit der Arbeit an der Datei „Window1.xaml“ fertig. Die restliche exemplarische Vorgehensweise führen Sie hauptsächlich in der Datei „app.xaml“ aus, in der Sie Stile und eine Vorlage für die Schaltflächen definieren.

Festlegen grundlegender Eigenschaften

Als Nächstes legen Sie einige Eigenschaften dieser Schaltflächen fest, um die Darstellung und das Layout der Schaltflächen zu steuern. Anstatt die Eigenschaften für die Schaltflächen einzeln festzulegen, verwenden Sie Ressourcen, um Schaltflächeneigenschaften für die gesamte Anwendung zu definieren. Anwendungsressourcen sind konzeptionell ähnlich wie externe Cascading Stylesheets (CSS) für Webseiten. Ressourcen sind jedoch viel effizienter als Cascading Stylesheets (CSS), wie Sie am Ende dieser exemplarischen Vorgehensweise sehen werden. Weitere Informationen zu Ressourcen finden Sie unter XAML-Ressourcen.

So verwenden Sie Stile zum Festlegen grundlegender Eigenschaften von Schaltflächen

  1. Definieren eines Application.Resources-Blocks: Öffnen Sie die Datei „app.xaml“, und fügen Sie das folgende hervorgehobene Markup hinzu, wenn es noch nicht vorhanden ist:

    <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 dadurch bestimmt, wo Sie die Ressource definieren. Durch das Definieren von Ressourcen in Application.Resources in der Datei „app.xaml“ kann die Ressource an jeder beliebigen Stelle in der Anwendung verwendet werden. Weitere Informationen zum Definieren des Bereichs Ihrer Ressourcen finden Sie unter XAML-Ressourcen.

  2. Erstellen eines Stils und definieren grundlegender Eigenschaftswerte: Fügen Sie dem Application.Resources-Block das folgende Markup hinzu. Dieses Markup erstellt einen Style, der auf alle Schaltflächen in der Anwendung angewandt wird, indem die Width der Schaltflächen auf 90 und die Margin auf 10 festgelegt werden:

    <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 auf alle Objekte vom Typ Button angewandt wird. Jeder Setter legt einen anderen Eigenschaftswert für den Style fest. Daher weist zu diesem Zeitpunkt jede Schaltfläche in der Anwendung eine Breite von 90 und einen Rand von 10 auf. Wenn Sie F5 drücken, um die Anwendung auszuführen, wird das folgende Fenster angezeigt.

    Buttons with a width of 90 and a margin of 10

    Sie können mit Stilen noch viel mehr erreichen, einschließlich einer Vielzahl von Möglichkeiten zum Optimieren der Zielobjekte, der Angabe komplexer Eigenschaftswerte und sogar der Verwendung von Stilen als Eingabe für andere Stile. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

  3. Festlegen eines Stileigenschaftswerts für eine Ressource: Ressourcen bieten eine einfache Möglichkeit, häufig definierte Objekte und Werte wiederzuverwenden. Sie sind besonders nützlich, um komplexe Werte mithilfe von Ressourcen zu definieren, um Ihren Code modularer zu gestalten. Fügen Sie das folgende hervorgehobene Markup in „app.xaml“ ein.

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

    Sie haben direkt unter dem Application.Resources-Block eine Ressource namens „GrayBlueGradientBrush“ erstellt. Diese Ressource definiert einen horizontalen Farbverlauf. Sie kann von überall in der Anwendung als Eigenschaftswert verwendet werden, auch innerhalb des Schaltflächenstilsetters für die Background-Eigenschaft. Jetzt verfügen alle Schaltflächen über einen Background-Eigenschaftswert mit diesem Farbverlauf.

    Drücken Sie F5, um die Anwendung auszuführen. Diese sollte wie folgt aussehen:

    Buttons with a gradient background

Erstellen einer Vorlage zum Definieren des Aussehens der Schaltfläche

In diesem Abschnitt erstellen Sie eine Vorlage, die die Darstellung der Schaltfläche angepasst. Die Schaltflächendarstellung umfasst mehrere Objekte, einschließlich eines Rechtecks und anderen Komponenten, um der Schaltfläche ein einzigartiges Aussehen zu verleihen.

Bisher war die Steuerung des Aussehens von Schaltflächen in der Anwendung auf Änderungen an den Eigenschaften der Schaltfläche beschränkt. Was wäre, wenn Sie noch radikalere Änderungen an der Darstellung der Schaltfläche vornehmen könnten? Vorlagen ermöglichen eine umfassende Steuerung der Darstellung eines Objekts. Da Vorlagen innerhalb von Stilen verwendet werden können, können Sie eine Vorlage auf alle Objekte anwenden, für die der Stil gilt (in dieser exemplarischen Vorgehensweise die Schaltfläche).

So definieren Sie das Aussehen der Schaltfläche mithilfe der Vorlage

  1. Einrichten der Vorlage: Da Steuerelemente wie Button eine Template-Eigenschaft besitzen, können Sie den Eigenschaftswert in der Vorlage genauso wie die anderen Eigenschaftswerte definieren, die Sie in einem Style mit einem Setter festgelegt haben. Fügen Sie dem Schaltflächenstil das folgende hervorgehobene Markup hinzu.

    <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. Ändern der Schaltflächendarstellung: An diesem Punkt müssen Sie eine Vorlage definieren. Fügen Sie das folgende hervorgehobene Markup hinzu. Dieses Markup gibt zwei Rectangle-Elemente mit abgerundeten Kanten gefolgt von einem DockPanel an. Das DockPanel wird verwendet, um den ContentPresenter der Schaltfläche zu hosten. Ein ContentPresenter zeigt den Inhalt der Schaltfläche an. In dieser exemplarischen Vorgehensweise ist der Inhalt Text („Button 1“, „Button 2“, „Button 3“). Alle Vorlagenkomponenten (die Rechtecke und der DockPanel) befinden sich in einem 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 F5, um die Anwendung auszuführen. Diese sollte wie folgt aussehen:

    Window with 3 buttons

  3. Hinzufügen eines Glaseffekts zur Vorlage: Als Nächstes fügen Sie einen Glaseffekt hinzu. Zunächst erstellen Sie einige Ressourcen, die einen Farbverlauf mit Glaseffekt erzeugen. Fügen Sie diese Farbverlaufsressourcen überall im Application.Resources-Block hinzu:

    <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 das Rechteck verwendet, das Sie in das Grid der Schaltflächenvorlage einfügen. Fügen Sie das folgende hervorgehobene Markup in die Vorlage ein.

    <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 die Opacity des Rechtecks mit der x:Name-Eigenschaft „glassCube“ den Wert „0“ hat. Wenn Sie das Beispiel ausführen, wird das Rechteck mit dem Glaseffekt daher nicht überlagert angezeigt. Dazu fügen Sie später der Vorlage Trigger hinzu, wenn Benutzer*innen mit der Schaltfläche interagieren. Sie können jedoch sehen, wie die Schaltfläche jetzt aussieht, indem Sie den Wert von Opacity in „1“ ändern und die Anwendung ausführen. Dies wird in der folgenden Abbildung veranschaulicht. Bevor Sie mit dem nächsten Schritt fortfahren, ändern Sie Opacity zurück in „0“.

    Custom buttons that were created by using XAML

Erstellen von Schaltflächeninteraktivität

In diesem Abschnitt erstellen Sie Trigger für Eigenschaften und Ereignisse, um als Reaktion auf Benutzeraktionen Eigenschaftswerte zu ändern und Animationen auszuführen, z. B. beim Bewegen des Mauszeigers über die Schaltfläche und beim Klicken.

Eine einfache Möglichkeit zum Hinzufügen von Interaktivität (Bewegen des Mauszeigers auf die Schaltfläche und von der Schaltfläche weg, Klicken usw.) besteht darin, Trigger innerhalb Ihrer Vorlage oder Ihres Stils zu definieren. Um einen Trigger zu erstellen, definieren Sie eine „Eigenschaftsbedingung“, z. B.: Der IsMouseOver-Eigenschaftswert der Schaltfläche ist gleich true. Anschließend definieren Sie Setter (Aktionen), die ausgeführt werden, wenn die Triggerbedingung erfüllt ist.

So erstellen Sie Schaltflächeninteraktivität

  1. Hinzufügen von Vorlagentriggern: Fügen Sie der Vorlage das hervorgehobene Markup hinzu.

    <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. Hinzufügen von Eigenschaftsauslösern: Fügen Sie im ControlTemplate.Triggers-Block das hervorgehobene Markup hinzu:

    <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 beachten Sie den Effekt, wenn Sie den Mauszeiger über die Schaltflächen bewegen.

  3. Hinzufügen eines Fokustriggers: Als Nächstes fügen Sie einige ähnliche Setter hinzu, um den Fall zu behandeln, wenn die Schaltfläche den Fokus hat (z. B. nachdem Benutzer*innen darauf klicken).

    <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. Beachten Sie, dass die Schaltfläche nach dem Klicken hervorgehoben bleibt, da sie weiterhin den Fokus hat. Wenn Sie auf eine andere Schaltfläche klicken, wechselt der Fokus von der letzten Schaltfläche zur neuen Schaltfläche.

  4. Hinzufügen von Animationen für MouseEnter und MouseLeave: Als Nächstes fügen Sie den Triggern einige Animationen hinzu. Fügen Sie das folgende Markup an einer beliebigen Stelle innerhalb des ControlTemplate.Triggers-Blocks hinzu.

    <!-- 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 Rechteck mit dem Glaseffekt wird verkleinert, wenn der Mauszeiger über die Schaltfläche bewegt wird, und wieder auf die normale Größe zurückgesetzt, wenn der Zeiger sie verlässt.

    Es werden zwei Animationen ausgelöst, wenn der Mauszeiger über die Schaltfläche bewegt wird (das MouseEnter-Ereignis wird ausgelöst). Diese Animationen verkleinern das Glasrechteck entlang der X- und Y-Achse. Beachten Sie die Eigenschaften der DoubleAnimation-Elemente Duration und By. Die Duration gibt an, dass die Animation eine halbe Sekunde langt ausgeführt wird, und By gibt an, dass das Glas um 10 % verkleinert wird.

    Der zweite Ereignisauslöser (MouseLeave) beendet einfach die erste Animation. Wenn Sie ein Storyboard beenden, werden alle animierten Eigenschaften auf ihre Standardwerte zurückgesetzt. Wenn die Benutzer*innen also den Mauszeiger von der Schaltfläche weg bewegen, nimmt sie wieder die Form an, die sie vor dem Bewegen des Mauszeigers auf die Schaltfläche hatte. Weitere Informationen zu Animationen finden Sie unter Übersicht über Animationen.

  5. Hinzufügen einer Animation beim Klicken auf die Schaltfläche: Der letzte Schritt besteht darin, einen Trigger hinzuzufügen, wenn Benutzer*innen auf die Schaltfläche klicken. Fügen Sie das folgende Markup an einer beliebigen Stelle innerhalb des ControlTemplate.Triggers-Blocks hinzu:

    <!-- 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. Wenn Sie auf eine Schaltfläche klicken, dreht sich das Glasrechteck.

Zusammenfassung

In dieser exemplarischen Vorgehensweise haben Sie die folgenden Aufgaben ausgeführt:

  • Sie haben als Ziel eines Style einen Objekttyp (Button) festgelegt.

  • Sie haben grundlegende Eigenschaften der Schaltflächen in der gesamten Anwendung mithilfe von Style festgelegt.

  • Sie haben Ressourcen wie Farbverläufe erstellt, die für Eigenschaftswerte der Style-Setter verwendet werden.

  • Sie haben das Aussehen von Schaltflächen in der gesamten Anwendung angepasst, indem Sie eine Vorlage auf die Schaltflächen angewandt haben.

  • Sie haben das Verhalten der Schaltflächen als Reaktion auf Benutzeraktionen (z. B. MouseEnter, MouseLeave und Click) mit Animationseffekten angepasst.

Siehe auch