Windows Presentation Foundation - Button mit Animationen

Einer der großen Vorteile der WPF ist, das man schon im Layout kleine Animationen definieren kann um die man sich später in der Programmlogik keine Gedanken mehr machen muss. In diesem Beispiel finden sich drei Buttons die mit unterschiedlichen Farbeverläufen animiert werden.

<!--Quickbar Beispiel - Holger Hinzberg-->

<!-- www.hinzberg.net -->

<Window x:Class="Quickbar.Window1"

     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     Title="Quickbar" Height="350" Width="200" WindowStartupLocation="CenterScreen">

   <Window.Resources>

    <Style TargetType="{x:Type Button}">

       <Style.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

          <Setter Property="Background" Value="Red" />

         </Trigger>

         <!--Trigger für MouseEnter-->

         <EventTrigger RoutedEvent="Button.MouseEnter">

           <BeginStoryboard>

             <Storyboard>

               <DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:0.1" />

               <DoubleAnimation Storyboard.TargetProperty="Height" To="80" Duration="0:0:0.1" />

               <DoubleAnimation Storyboard.TargetProperty="FontSize" To="25" Duration="0:0:0.1" />

             </Storyboard>

           </BeginStoryboard>

         </EventTrigger>

         <!--Trigger für MouseLeave-->

         <EventTrigger RoutedEvent="Button.MouseLeave">

           <BeginStoryboard>

             <Storyboard>

               <DoubleAnimation Storyboard.TargetProperty="Width" To="40" Duration="0:0:0.1" />

               <DoubleAnimation Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.1" />

               <DoubleAnimation Storyboard.TargetProperty="FontSize" To="12" Duration="0:0:0.1" />

             </Storyboard>

           </BeginStoryboard>

         </EventTrigger>

       </Style.Triggers>

    </Style>

   </Window.Resources>

  <!--Hier das Layout-->

  <StackPanel Margin="5">

    <Button Height="40" Width="40" Name="b1">B 1</Button>

    <Label HorizontalAlignment="Center">Item 1</Label>

    <Button Height="40" Width="40">B 2</Button>

    <Label HorizontalAlignment="Center">Item 2</Label>

    <Button Height="40" Width="40">B 3</Button>

    <Label HorizontalAlignment="Center">Item 3</Label>

    <Button Height="40" Width="40">B 4</Button>

    <Label HorizontalAlignment="Center">Item 4</Label>

  </StackPanel>

</Window> 

Geschrieben am: 18.03.2007
Technologien: C#, WPF, Windows, .NET