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?

Visibility like effect or More like Opacity 1 to 0 and again 0 to 1 — Sebastian, Aug 13 '14 at 05:35

S.L. · Accepted Answer · 2014-08-13T08:11:25.863

36

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>

edited Aug 13 '14 at 08:11

answered Aug 13 '14 at 05:48

S.L.

1,056
7
15

The second approach is exactly what i am trying to implement. But can i apply Visible to Collapse fadeout effect also at the same time? – Sebastian Aug 13 '14 at 06:35
just handle the mouse out Event. and add a second Trigger. i will update my answer – S.L. Aug 13 '14 at 06:36
But i cant use Mouseout event fro changing visibility to collapsed. In my case i am setting the visibilty to collpased only when user click on anywhere inside a seperate area – Sebastian Aug 13 '14 at 06:38
1

the Problem is ... when you set the visibility to collapsed the control is hidden before the Animation starts in this case :) but it will reset the opacity to 0 – S.L. Aug 13 '14 at 06:38
@JMat where you set the Collapsed doesnt matter – S.L. Aug 13 '14 at 06:39
i think you will be able to extend this example to fit your needs – S.L. Aug 13 '14 at 06:42
Yes when i set the visibility to collapsed the control is hidden before the Animation starts and as a result i cant make the visibility again back – Sebastian Aug 13 '14 at 06:52
why you cant set the visibility back to Visible ? – S.L. Aug 13 '14 at 06:53
Here is what i tried http://pastebin.com/R7KYm7GC. If i comment the Visibility=Collpased area from trigger , it starts working as expected , otherwise not – Sebastian Aug 13 '14 at 07:52
okay ... i tried it. strange behavior. But just delete the Collapsed Trigger, you do not Need it. than everything works as expected – S.L. Aug 13 '14 at 08:02
But deleting Collpased trigger makes any animations on Visibility to Collapsed event?? What i ma trying to achieve is get an animation effect on both visibile to collapsed and collpased to visible transitions – Sebastian Aug 13 '14 at 08:03
@JMat ... Change the order of the Trigger. The Collapsed Trigger before the Visible Trigger. Than it works – S.L. Aug 13 '14 at 08:04
let me think a second please :) – S.L. Aug 13 '14 at 08:05
see my updated answer. Remove the collapsed Trigger in style. Update your Stackpanel like in the answer without the mouseLeftButtonDown EventHandler. For me it works – S.L. Aug 13 '14 at 08:12
Is there any possibility to make it as a part of first style itself? My problem is i have a similar bottomArea also that have to be visible and collapsed. But with this approach i am struggling to make it for both Here is the experiments i tried http://pastebin.com/amL3Eke9 – Sebastian Aug 13 '14 at 08:46
you can extract the eventtrigger in a seperate style and use it in your stackpanel. ` – S.L. Aug 13 '14 at 08:50
in a seperate style can we mention TargetName , it gives xaml exceptions – Sebastian Aug 13 '14 at 09:12
i create an example :) give me a second – S.L. Aug 13 '14 at 09:12
Did you Change something ? it doesnt even work with 1 dockpanel – S.L. Aug 13 '14 at 09:50
No its the same solution copied from answer – Sebastian Aug 13 '14 at 09:56
Yes concept is more clear and i can customize further like opening top ,bottom same time etc . – Sebastian Aug 13 '14 at 10:26
hope that helps :) and you get rid of the code behind. – S.L. Aug 13 '14 at 10:29
All things goes perfect. But i tried ScrollViewer in place of Stackpanel and it stops hiding the top and bottom menus. I suspect the event trigger should be some other things than MouseLeftButtonDown – Sebastian Aug 13 '14 at 11:25
`RoutedEvent="StackPanel.MouseLeftButtonDown"`use `UIElement.MouseLeftButtonDown`instead :) this should work – S.L. Aug 13 '14 at 11:27
NO luck i tried UIElement.MouseDown also and strange on right click of mouse , the hideMenus triger executed , but on click event inside scroolarea gives no result http://pastebin.com/UqYXVtpT – Sebastian Aug 13 '14 at 11:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59268/discussion-between-s-l-and-jmat). – S.L. Aug 13 '14 at 11:38
"the Problem is ... when you set the visibility to collapsed the control is hidden before the Animation starts in this case" -> This is why you need the Transitionz NuGet Package (2nd answer in this question) :) https://github.com/ABTSoftware/SciChart.Wpf.UI/wiki/Transitionz-Library – Dr. Andrew Burnett-Thompson Mar 22 '19 at 18:00

Dr. Andrew Burnett-Thompson · Answer 2 · 2019-03-22T17:58:39.843

It's an old question, but I've put together an open source library to allow fading and/or translation on Visibility changed, Loaded or binding.

You can find it at SciChart.Wpf.UI.Transitionz on Github and on NuGet.

Usage:

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
    </Window.Resources>
    <Grid>
        <CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
        <TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
            Visibility="Collapsed"
            tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
    </Grid>
</Window>

Which results in:

That NuGet packge is pure gold. Thanks. – Askolein Nov 28 '18 at 00:18 — Askolein, Nov 28 '18 at 00:18
Fabulous NuGet..! Thanks – Soni Vimalkumar Dec 15 '20 at 06:19 — Soni Vimalkumar, Dec 15 '20 at 06:19

score 2 · Answer 3 · answered Feb 01 '19 at 03:59

2

This would be a good start. You can just add one c# file and set property like below.

common:VisibilityAnimation.AnimationType="Fade"

answered Feb 01 '19 at 03:59

Sangwon Choi

218
2
11

score 1 · Answer 4 · answered Aug 13 '14 at 05:44

here is a sample example

<Grid DockPanel.Dock="Top">
    <DockPanel Background="#bdbec0"
               x:Name="topPanel"
               HorizontalAlignment="Stretch"
               Height="55">
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center">Down</Button>
    </DockPanel>
    <DockPanel Background="#151515"
               LastChildFill="True"
               Name="TopMenuArea"
               IsHitTestVisible="False"
               Height="55">
        <TextBlock Foreground="White"> 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</TextBlock>
        <DockPanel.Style>
            <Style TargetType="DockPanel">
                <Setter Property="Opacity"
                        Value="0" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver,ElementName=topPanel}"
                                 Value="true">
                        <Setter Property="Opacity"
                                Value="1" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DockPanel.Style>
    </DockPanel>
</Grid>

in the sample above I have set IsHitTestVisible="False" on the TopMenuArea dockPanel, as i can see that it is on top of previous (source for trigger panel)

other option is to use the TopMenuArea as the source if it is on the top

sample

<Grid DockPanel.Dock="Top">
    <DockPanel Background="#bdbec0"
               HorizontalAlignment="Stretch"
               Height="55">
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center">Down</Button>
    </DockPanel>
    <DockPanel Background="#151515"
               LastChildFill="True"
               Name="TopMenuArea"
               Height="55">
        <TextBlock Foreground="White"> 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</TextBlock>
        <DockPanel.Style>
            <Style TargetType="DockPanel">
                <Setter Property="Opacity"
                        Value="0" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                                 Value="true">
                        <Setter Property="Opacity"
                                Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DockPanel.Style>
    </DockPanel>
</Grid>

give it a try and see if it is close to what you are looking for.

both of above just switch the opacity between 0 & 1, you may also use animation to make a fade effect if needed.

score 1 · Answer 5 · answered Jul 22 '18 at 13:50

I come up with a way to gradually show Grid and hide Grid using ScaleTransform.

The ScaleTransform is set to X=0 Y=0 to hide, X=1 Y=1 to show,

and Trigger using Tag property, as the code below:

At ViewModel:

private string _helpVisiblilityTag = "hide";
public string HelpVisiblilityTag
{
    get { return _helpVisiblilityTag; }
    set
    {
        _helpVisiblilityTag = value;
        NotifyOfPropertyChange(() => HelpVisiblilityTag);
    }
}

public void Hide()
{
    HelpVisiblilityTag = "hide";
}
public void Show()
{
    HelpVisiblilityTag = "show";
}

At View:

<Button Click="Show"/>



<Grid VerticalAlignment="Center" HorizontalAlignment="Center"  Tag="{Binding HelpVisiblilityTag}" 
              RenderTransformOrigin="0.5, 0.5"  >
    <Grid.Background>
        <SolidColorBrush Color="#D4F1FA" Opacity="0.8"/>
    </Grid.Background>

    <Grid.RenderTransform>
        <ScaleTransform x:Name="MyAnimatedScaleTransform" 
  ScaleX="0" ScaleY="0" />
    </Grid.RenderTransform>

    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <Trigger Property="Tag" Value="show">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:1" AutoReverse="False" />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"  
                                From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
                                 >
                                    <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseOut" Oscillations="1"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
                                 >
                                    <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseOut" Oscillations="1"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                          Duration="0:0:0.5" AutoReverse="False" />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
                                 />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
                                 />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>

    <Button Click="Hide"/>

</Grid>

Sample Screenshot:

tabby · Answer 6 · 2017-12-27T06:31:27.350

You can use ToggleButton Checked and UnChecked Routed Event with Event Trigger:

 <ToggleButton Content="Toggle" Height="20" Width="60" Panel.ZIndex="2" VerticalAlignment="Top" HorizontalAlignment="Left">
        <ToggleButton.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetName="MyDockPanel" 
                                         Storyboard.TargetProperty="Opacity"
                                         From="0" To="1" 
                                         Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                       <DoubleAnimation Storyboard.TargetName="MyDockPanel" 
                                        Storyboard.TargetProperty="Opacity"
                                        From="1" To="0" 
                                        Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </ToggleButton.Triggers>
    </ToggleButton>
    <DockPanel x:Name="MyDockPanel"  Background="Yellow" Opacity="0">
        <TextBlock DockPanel.Dock="Bottom" Text="DockPanel" 
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </DockPanel>

Result:

Apply animation on WPF control visibility change

6 Answers6

Linked