Appliquer une animation sur le contrôle WPF visibilité changement

Mon xaml est

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

Et le code pour le bouton de la souris sur est

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

Comment puis-je appliquer un effet d'animation lors du changement de la visibilité de TopMenuArea ? Est de toute façon de le faire directement à partir de xaml?

ce que l'animation que vous recherchez?
La visibilité comme effet ou Plus, comme l'Opacité de 1 à 0 et nouveau de 0 à 1

OriginalL'auteur Jibin Mathew | 2014-08-13

animation c#wpf xaml

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>

Ou utiliser un style fade in et fade out (avec la souris pour entrer /quitter le gestionnaire d'événements comme vous l'avez fait)

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

Il suffit de définir le style de vos Ressources de l'Application, ou dans la Fenêtre locale ou UserControl. Vous réutilisez le style d'Animation pour les tout contrôle.

l'utiliser dans vos 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>

La deuxième approche est exactement ce que je suis en train de mettre en œuvre. Mais puis-je demander Visible à l'Effondrement fadeout effet aussi en même temps?
simplement manipuler la souris en dehors de l'Événement. et d'ajouter un deuxième Déclencheur. je vais mettre à jour ma réponse
Mais je ne peux utiliser de l'événement Mouseout bof changer la visibilité de effondré. Dans mon cas, je suis en train de la visibilité à collpased uniquement lorsque l'utilisateur cliquez sur n'importe où à l'intérieur d'une autre zone de <nom de grille="contentArea"></grid>
le Problème est ... que lorsque vous définissez la visibilité s'est effondré le contrôle est masqué avant le début de l'Animation dans ce cas 🙂 mais il sera réinitialisé l'opacité à 0
lorsque vous définissez la Effondré et n'importe pas

OriginalL'auteur S.L.

C'est une vieille question, mais j'ai mis en place une bibliothèque open source pour permettre à la décoloration et/ou de la traduction sur la Visibilité changé, de Chargement ou de liaison.

Vous pouvez le trouver à SciChart.Wpf.L'INTERFACE utilisateur.Transitionz sur Github et sur NuGet.

Utilisation:

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

Qui se traduit par:

Appliquer une animation sur le contrôle WPF visibilité changement

Que NuGet packge est de l'or pur. Merci.

OriginalL'auteur Dr. ABT

voici un exemple d'échantillon

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

dans l'exemple ci-dessus, j'ai mis IsHitTestVisible="False" sur le TopMenuArea dockPanel, comme je peux voir qu'il est sur le dessus de la précédente (source pour déclencher panneau)

autre option est d'utiliser le TopMenuArea comme la source si il est sur le dessus

échantillon

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

lui donner un essai et voir si il est proche de ce que vous cherchez.

les deux ci-dessus il suffit de passer l'opacité entre 0 & 1, vous pouvez également utiliser l'animation pour faire un effet de fondu en cas de besoin.

OriginalL'auteur pushpraj

Vous pouvez utiliser ToggleButton activée et Désactivée Événement Routé avec 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>

Résultat:

Appliquer une animation sur le contrôle WPF visibilité changement

OriginalL'auteur tabby

J'ai trouver un moyen de faire progressivement afficher la Grille et masquer la Grille à l'aide de ScaleTransform.

ScaleTransform est définie pour X=0 Y=0 pour masquer, X=1 Y=1 pour montrer,

et de Déclencher à l'aide de Tag bien, comme le code ci-dessous:

Au 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";
}

À Vue:

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

Exemple De Capture D'Écran:

Appliquer une animation sur le contrôle WPF visibilité changement

OriginalL'auteur yu yang Jian

Vous devez vous connecter pour publier un commentaire.