Aplicar animación en el cambio de visibilidad del control WPF

Solución:

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>

O use un estilo para fade in y out (con el mouse enter / exit eventhandler como lo hizo)

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

Simplemente defina el estilo en los recursos de su aplicación, o en la ventana local o UserControl. Reutiliza el estilo de animación para cualquier control.

usa esto en tu 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>

Es una pregunta antigua, pero he creado una biblioteca de código abierto para permitir el desvanecimiento y / o traducción en Visibilidad modificada, cargada o vinculante.

Puede encontrarlo en SciChart.Wpf.UI.Transitionz en Github y en NuGet.

Uso:

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

Lo que resulta en:

---

---

Utiliza Nuestro Buscador