Windows Presentation Foundation - Quickbar

Bewegt man den Mauspfeil in einen Button wird dieser durch eine DoubleAnimation vergrößert. Nach Verlassen des Button nimmt dieser wieder seine ursprünglich Größe an.

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