Freigeben über

Exemplarische Vorgehensweise: Erstellen einer Schaltfläche mithilfe von XAML

Das Ziel dieser exemplarischen Vorgehensweise besteht darin, zu erfahren, wie Sie eine animierte Schaltfläche für die Verwendung in einer Windows Presentation Foundation (WPF)-Anwendung erstellen. In dieser exemplarischen Vorgehensweise werden Stile und eine Vorlage verwendet, um eine benutzerdefinierte Schaltflächenressource zu erstellen, die die Wiederverwendung von Code und Trennung von Schaltflächenlogik aus der Schaltflächendeklaration ermöglicht. Diese Anleitung ist vollständig in der Extensible Application Markup Language (XAML) verfasst worden.

Von Bedeutung

Diese exemplarische Vorgehensweise führt Sie durch die Schritte zum Erstellen der Anwendung, indem Sie Extensible Application Markup Language (XAML) in Visual Studio eingeben oder kopieren und einfügen. Wenn Sie lieber erfahren möchten, wie Sie einen Designer zum Erstellen derselben Anwendung verwenden, lesen Sie " Erstellen einer Schaltfläche mithilfe von Microsoft Expression Blend".

Die folgende Abbildung zeigt die fertigen Schaltflächen.

Benutzerdefinierte Schaltflächen, die mithilfe von XAML-custom_button_AnimatedButton_5 erstellt wurden

Erstellen grundlegender Schaltflächen

Beginnen wir 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 für windows-Anwendung (WPF), und nennen Sie das Projekt "AnimatedButton". Dadurch wird das Skelett 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 Window1.xaml eingeben oder kopieren und 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.

    Drei grundlegende Schaltflächen

    Nachdem Sie die grundlegenden Schaltflächen erstellt haben, sind Sie mit Ihrer Arbeit in der Datei "Window1.xaml" fertig. Der Rest der exemplarischen Vorgehensweise konzentriert sich auf die Datei "app.xaml", das Definieren von Stilen und eine Vorlage für die Schaltflächen.

Festlegen grundlegender Eigenschaften

Als Nächstes legen wir einige Eigenschaften für diese Schaltflächen fest, um die Darstellung und das Layout der Schaltfläche zu steuern. Anstatt Eigenschaften für die Schaltflächen einzeln festzulegen, verwenden Sie Ressourcen, um Schaltflächeneigenschaften für die gesamte Anwendung zu definieren. Anwendungsressourcen ähneln konzeptuell externen Cascading Stylesheets (CSS) für Webseiten; Ressourcen sind jedoch wesentlich leistungsfähiger 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 für die Schaltflächen

  1. Definieren eines Application.Resources-Blocks: Öffnen Sie "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 durch den Ort bestimmt, an dem Sie die Ressource definieren. Durch das Definieren von Ressourcen in Application.Resources der Datei "app.xaml" kann die Ressource von überall in der Anwendung verwendet werden. Weitere Informationen zum Definieren des Umfangs Ihrer Ressourcen finden Sie unter XAML-Ressourcen.

  2. Erstellen Sie eine Formatvorlage, und definieren Sie grundlegende Eigenschaftswerte darin: Fügen Sie dem Application.Resources Block das folgende Markup hinzu. Mit diesem Markup wird ein Style erstellt, das auf alle Schaltflächen in der Anwendung zutrifft. Es setzt die Width der Schaltflächen auf 90 und die Margin auf 10 fest.

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

    Die TargetType Eigenschaft gibt an, dass die Formatvorlage für alle Objekte des Typs Buttongilt. Jeder Setter legt einen anderen Eigenschaftswert für die Style. Daher hat an diesem Punkt jede Schaltfläche in der Anwendung eine Breite von 90 und einen Rand von 10. Wenn Sie F5 drücken, um die Anwendung auszuführen, wird das folgende Fenster angezeigt.

    Schaltflächen mit einer Breite von 90 und einem Rand von 10

    Es gibt viel mehr, was Sie mit Formatvorlagen tun können, einschließlich einer Vielzahl von Möglichkeiten, um zu optimieren, welche Objekte gezielt sind, die Angabe komplexer Eigenschaftswerte und sogar die Verwendung von Formatvorlagen als Eingabe für andere Formatvorlagen. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

  3. Legen Sie einen Stileigenschaftswert auf eine Ressource fest: Ressourcen ermöglichen eine einfache Möglichkeit, häufig definierte Objekte und Werte wiederzuverwenden. Es ist besonders hilfreich, komplexe Werte mithilfe von Ressourcen zu definieren, um Ihren Code modularer zu gestalten. Fügen Sie das folgende hervorgehobene Markup zu "app.xaml" 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" />
  </Style>
</Application.Resources>

    Direkt unter dem Application.Resources Block haben Sie eine Ressource namens "GrayBlueGradientBrush" erstellt. Diese Ressource definiert einen horizontalen Farbverlauf. Diese Ressource kann an jeder Stelle der Anwendung als Eigenschaftswert verwendet werden, einschließlich in den Stileinstellungen der Schaltfläche für die Background Eigenschaft. Jetzt weisen alle Schaltflächen einen Background Eigenschaftswert dieses Farbverlaufs auf.

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

    Schaltflächen mit Hintergrund mit Farbverlauf

Erstellen einer Vorlage, die das Aussehen der Schaltfläche definiert

In diesem Abschnitt erstellen Sie eine Vorlage, mit der die Darstellung (Präsentation) der Schaltfläche angepasst wird. Die Schaltflächenpräsentation besteht aus mehreren Objekten, einschließlich Rechtecke und anderen Komponenten, um der Schaltfläche ein einzigartiges Aussehen zu verleihen.

Bisher war die Kontrolle darüber, wie Schaltflächen in der Anwendung aussehen, auf das Ändern der Eigenschaften der Schaltflächen beschränkt. Was geschieht, wenn Sie radikalere Änderungen an der Darstellung der Schaltfläche vornehmen möchten? Vorlagen ermöglichen eine leistungsstarke Kontrolle über die Darstellung eines Objekts. Da Vorlagen innerhalb von Formatvorlagen verwendet werden können, können Sie eine Vorlage auf alle Objekte anwenden, auf die die Formatvorlage angewendet wird (in dieser exemplarischen Vorgehensweise die Schaltfläche).

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

  1. Vorlage einrichten: Da Steuerelemente wie Button über eine Template-Eigenschaft verfügen, können Sie den Wert der Vorlageneigenschaft genauso definieren wie die anderen Eigenschaftswerte, die wir in einem Style mit einem Setter festgelegt haben. Fügen Sie das folgende hervorgehobene Markup zu Ihrem Schaltflächenstil 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. Präsentation der Schaltfläche ändern: Zu diesem Zeitpunkt müssen Sie die Vorlage definieren. Fügen Sie das folgende hervorgehobene Markup hinzu. Dieses Markup gibt zwei Rectangle Elemente mit abgerundeten Rändern an, gefolgt von einem DockPanel. Dies DockPanel wird verwendet, um die ContentPresenter Schaltfläche zu hosten. A ContentPresenter zeigt den Inhalt der Schaltfläche an. In dieser exemplarischen Vorgehensweise ist der Inhalt Text ("Schaltfläche 1", "Schaltfläche 2", "Schaltfläche 3"). Alle Vorlagenkomponenten (die Rechtecke und die DockPanel) sind innerhalb eines Grid angeordnet.

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

    Fenster mit drei Schaltflächen

  3. Fügen Sie der Vorlage eine Glaseffect hinzu: Als Nächstes fügen Sie das Glas hinzu. Zuerst erstellen Sie einige Ressourcen, die einen Glasverlaufseffekt erzeugen. Fügen Sie diese Farbverlaufsressourcen an einer beliebigen Stelle 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 ein Rechteck verwendet, das wir in die Grid Schaltflächenvorlage einfügen. Fügen Sie der Vorlage das folgende 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>
</Setter.Value>

    Beachten Sie, dass das Opacity Rechteck mit der x:Name Eigenschaft "glassCube" 0 ist, sodass beim Ausführen des Beispiels das Glasrechteck nicht überlagert wird. Dies liegt daran, dass der Vorlage später Trigger hinzugefügt werden, wenn der Benutzer mit der Schaltfläche interagiert. Sie können jedoch sehen, wie die Schaltfläche jetzt aussieht, indem Sie den Opacity Wert in 1 ändern und die Anwendung ausführen. Siehe die folgende Abbildung. Bevor Sie mit dem nächsten Schritt fortfahren, ändern Sie Opacity zurück auf 0.

    Benutzerdefinierte Schaltflächen, die mithilfe von XAML-custom_button_AnimatedButton_5 erstellt wurden

Interaktivität der Schaltfläche erstellen

In diesem Abschnitt erstellen Sie Eigenschaftsauslöser und Ereignistrigger, um Eigenschaftswerte zu ändern und Animationen als Reaktion auf Benutzeraktionen auszuführen, z. B. Bewegen des Mauszeigers über die Schaltfläche und Klicken.

Eine einfache Möglichkeit, Interaktivität (Mouseover, Maus verlassen, Klicken usw.) hinzuzufügen, besteht darin, Trigger innerhalb Ihrer Vorlage oder Ihres Stils zu definieren. Um eine TriggerEigenschaft zu erstellen, definieren Sie eine Eigenschaft "Bedingung", z. B.: Der Wert der Schaltflächeneigenschaft IsMouseOver ist gleich true. Anschließend definieren Sie Setter (Aktionen), die ausgeführt werden, wenn die Triggerbedingung wahr ist.

So erstellen Sie Die Interaktivität der Schaltfläche

  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 Eigenschaftentriggern: Fügen Sie dem 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 den Effekt anzuzeigen, während Sie den Mauszeiger über die Schaltflächen bewegen.

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

    <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 hervorgehoben bleibt, nachdem Sie darauf geklickt haben, da sie weiterhin den Fokus hat. Wenn Sie auf eine andere Schaltfläche klicken, erhält die neue Schaltfläche den Fokus, während die letzte diesen verliert.

  4. Hinzufügen von Animationen fürMouseEnterundMouseLeave: Als Nächstes fügen wir einige Animationen zu den Triggern 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 Glasrechteck verkleinert sich, wenn der Mauszeiger sich über die Schaltfläche bewegt, und kehrt wieder zur normalen Größe zurück, wenn der Zeiger die Schaltfläche verlässt.

    Es gibt zwei Animationen, die ausgelöst werden, wenn der Zeiger über die Schaltfläche wechselt (MouseEnter Ereignis wird ausgelöst). Diese Animationen verkleinern das Glasrechteck entlang der X- und Y-Achse. Beachten Sie die Eigenschaften für die DoubleAnimation Elemente – Duration und By. Die Duration gibt an, dass die Animation eine halbe Sekunde dauert, und By gibt an, dass das Glas um 10%schrumpft.

    Der zweite Ereignistrigger (MouseLeave) stoppt einfach den ersten. Wenn Sie ein StoryboardElement beenden, kehren alle animierten Eigenschaften zu ihren Standardwerten zurück. Wenn der Benutzer den Mauszeiger aus der Schaltfläche bewegt, geht die Schaltfläche also wie zuvor zurück, bevor der Mauszeiger über die Schaltfläche bewegt wurde. Weitere Informationen zu Animationen finden Sie unter "Animationsübersicht".

  5. Fügen Sie eine Animation hinzu, wenn auf die Schaltfläche geklickt wird: Der letzte Schritt besteht darin, einen Trigger hinzuzufügen, für den der Benutzer auf die Schaltfläche klickt. Fügen Sie das folgende Markup an einer beliebigen Stelle im ControlTemplate.Triggers Block 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 um.

Zusammenfassung

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

  • Gezielt einen Style auf einen Objekttyp (Button).

  • Kontrollierte die grundlegenden Eigenschaften der Schaltflächen in der gesamten Anwendung mit Hilfe von Style.

  • Erstellte Ressourcen wie Farbverläufe, die für Eigenschaftswerte der Style Setter verwendet werden sollen.

  • Das Erscheinungsbild von Schaltflächen in der gesamten Anwendung wurde angepasst, indem eine Vorlage auf die Schaltflächen angewendet wird.

  • Angepasstes Verhalten für die Schaltflächen als Reaktion auf Benutzeraktionen, wie z. B. MouseEnter, MouseLeave und Click, einschließlich Animationseffekten.

Siehe auch