sdk/samples/WPFSamples/ControlAnimationGallery/xaml/scalingbutton.xaml

   1 <Page
   2   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   3   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4   Title="Button with Animated Scale Example"
   5   Background="White">
   6
   7   <Page.Resources>
   8     <Style x:Key="button" TargetType="{x:Type Button}">
   9
  10       <!-- This ScaleTransform is targeted by the Event Trigger. -->
  11       <Setter Property="RenderTransform">
  12         <Setter.Value>
  13             <ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="1" />
  14         </Setter.Value>
  15       </Setter>
  16
  17       <!-- Applies the ScaleTransform to the button's center. -->
  18       <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
  19
  20       <!-- Enlarge the button when the mouse enters. -->
  21       <Style.Triggers>
  22         <EventTrigger RoutedEvent="Mouse.MouseEnter">
  23           <EventTrigger.Actions>
  24             <BeginStoryboard>
  25               <Storyboard>
  26                 <DoubleAnimation
  27                   Storyboard.TargetProperty="RenderTransform.ScaleX"
  28                   Duration="0:0:0.5" To="1.25" AccelerationRatio="0.9" />
  29                 <DoubleAnimation
  30                   Storyboard.TargetProperty="RenderTransform.ScaleY"
  31                   Duration="0:0:0.5" To="1.25" AccelerationRatio="0.9"  />
  32               </Storyboard>
  33             </BeginStoryboard>
  34           </EventTrigger.Actions>
  35         </EventTrigger>
  36
  37         <!-- Return the button to its orginal size when the mouse leaves. -->
  38         <EventTrigger RoutedEvent="Mouse.MouseLeave">
  39           <EventTrigger.Actions>
  40             <BeginStoryboard>
  41               <Storyboard>
  42                 <DoubleAnimation
  43                   Storyboard.TargetProperty="RenderTransform.ScaleX"
  44                   Duration="0:0:0.5" To="1" AccelerationRatio=".9" />
  45                 <DoubleAnimation
  46                   Storyboard.TargetProperty="RenderTransform.ScaleY"
  47                   Duration="0:0:0.5" To="1" AccelerationRatio=".9"  />
  48               </Storyboard>
  49             </BeginStoryboard>
  50           </EventTrigger.Actions>
  51         </EventTrigger>
  52       </Style.Triggers>
  53
  54     </Style>
  55   </Page.Resources>
  56
  57   <StackPanel>
  58     <Border Width="500" Margin="25" BorderBrush="Orange"
  59             BorderThickness="2" CornerRadius="10"
  60             Padding="10,10,10,10" Background="White">
  61       <TextBlock TextWrapping="Wrap" TextAlignment="Left" FontWeight="Bold">
  62         This example animates a ScaleTransform
  63         applied to the RenderTransform property of a Button. When the mouse
  64         enters the button, it grows. When the mouse leaves the button, it is
  65         animated back to its original size.
  66       </TextBlock>
  67     </Border>
  68
  69     <Button Style="{StaticResource button}"
  70       FontSize="24" Content="Button"
  71       HorizontalAlignment="Center" />
  72
  73   </StackPanel>
  74 </Page>