c# - Apply animation on WPF control visibility change

Question

My xaml is

   <Grid DockPanel.Dock="Top" >
<DockPanel Background="#bdbec0"  MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >                    
    <Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Name="TopMenuArea"  Height="55">
 some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area
</DockPanel>

And code for button mouse over is

    private void showTopMenu_MouseEnter(object sender, MouseEventArgs e)
    {          
        TopMenuArea.Visibility = Visibility.Visible;
    }

How can i apply a animation effect while changing the visibility of TopMenuArea ? Is any way to do it from xaml directly?

Answer 1

Eventtrigger

<DockPanel Background="#bdbec0"  MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
    <DockPanel.Triggers>
        <EventTrigger RoutedEvent="DockPanel.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                        From="0.0" To="1.0" Duration="0:0:1"></DoubleAnimation>                            
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="DockPanel.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                        From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DockPanel.Triggers>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Opacity="0" Name="TopMenuArea"  Height="55">
</DockPanel>

Or use a style for fade in and out (with mouse enter / exit eventhandler like you did it)

<Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
  <Setter Property="Visibility" Value="Collapsed"/>
  <Setter Property="Opacity" Value="0"/>
  <Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                             From="0.0" To="1.0" Duration="0:0:0.2"/>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
    </Trigger>
  </Style.Triggers>
</Style>

<DockPanel Background="#151515" LastChildFill="True" Style="{StaticResource VisibleAnimation}" Name="TopMenuArea"  Height="55">

Just define the style in your App Resources, or in the local Window or UserControl. You reuse the Animation style for any control.

use this in your Stackpanel

<StackPanel Background="Red" HorizontalAlignment="Stretch" >
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.MouseLeftButtonDown" >
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenuArea"
                        Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <Label HorizontalAlignment="Center">Area outside top panel . Clicking here will hide top panel again</Label>
</StackPanel>