Dock panel like animated buttons in WPF(XAML)

Like dockpanel buttons(Buttons which grows up as mouse enters on button) in windows, we can have the buttons in WPF without writing any C# or VB code. This can be achieved by using EventTriggers & DoubleAnimations.


As mentioned in above image as mouse enters on Recycle Bin icon, it grows up, similar thing can be achieved in wpf, sample XAML is written below.

Code:



<Grid Background="Black">
  <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Height="80">
    <Image x:Name="btn1" Height="60" Width="60" Source="/WpfApplication1;component/Images/green_pc.png">
      <Image.Style>
         <Style>
            <Style.Triggers>
               <EventTrigger RoutedEvent="Mouse.MouseEnter">
                 <EventTrigger.Actions>
                   <BeginStoryboard>
                     <Storyboard>
                       <DoubleAnimation Duration="0:0:0.2"                                                Storyboard.TargetProperty="Height" To="80" />
                       <DoubleAnimation Duration="0:0:0.2"
                           Storyboard.TargetProperty="Width" To="80" />
                     </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
              <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation Duration="0:0:0.2"
                          Storyboard.TargetProperty="Height" To="60" />
                      <DoubleAnimation Duration="0:0:0.2"
                          Storyboard.TargetProperty="Width" To="60" />
                   </Storyboard>
                 </BeginStoryboard>
               </EventTrigger.Actions>
              </EventTrigger>
            </Style.Triggers>
           </Style>
         </Image.Style>
        </Image>
       <Image x:Name="btn2" Height="60" Width="60" Source="/WpfApplication1;component/Images/livehelp.png">
       <Image.Style>
        <Style>
         <Style.Triggers>
          <EventTrigger RoutedEvent="Mouse.MouseEnter">
           <EventTrigger.Actions>
            <BeginStoryboard>
             <Storyboard>
              <DoubleAnimation Duration="0:0:0.2"
                Storyboard.TargetProperty="Height" To="80" />
              <DoubleAnimation Duration="0:0:0.2"
                Storyboard.TargetProperty="Width" To="80" />
             </Storyboard>
            </BeginStoryboard>
           </EventTrigger.Actions>
          </EventTrigger>
         <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
           <BeginStoryboard>
            <Storyboard>
             <DoubleAnimation Duration="0:0:0.2"
               Storyboard.TargetProperty="Height" To="60" />
             <DoubleAnimation Duration="0:0:0.2"
               Storyboard.TargetProperty="Width" To="60" />
            </Storyboard>
           </BeginStoryboard>
          </EventTrigger.Actions>
         </EventTrigger>
        </Style.Triggers>
       </Style>
      </Image.Style>
     </Image>
    </StackPanel>
  </Grid>

Output:



No comments:

Post a Comment