Appliquer une animation au changement de visibilité du contrôle WPF
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 est
private void showTopMenu_MouseEnter(object sender, MouseEventArgs e)
{
TopMenuArea.Visibility = Visibility.Visible;
}
Comment puis-je appliquer un effet d'animation tout en modifiant la visibilité de TopMenuArea? Est-il possible de le faire directement à partir de 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 utilisez un style pour les fondus entrants et sortants (avec la souris, entrez/sortez 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">
Définissez simplement le style dans vos ressources d'application, dans la fenêtre locale ou dans UserControl. Vous réutilisez le style d'animation pour tout contrôle.
utilisez ceci dans votre 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>
C'est une vieille question, mais j'ai mis en place une bibliothèque open source pour permettre le fondu et/ou la traduction lorsque Visibility est modifiée, chargée ou liée.
Vous pouvez le trouver sur SciChart.Wpf.UI.Transitionz sur Github et sur 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>
Ce qui résulte en:
voici un exemple
<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 défini IsHitTestVisible="False" sur le dockPanel de TopMenuArea.
l’autre option est d’utiliser TopMenuArea comme source s’il est au-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>
essayez-le et voyez s'il est proche de ce que vous recherchez.
ci-dessus, il suffit de basculer l'opacité entre 0 et 1; vous pouvez également utiliser l'animation pour créer un effet de fondu, si nécessaire.
Je trouve un moyen d'afficher progressivement Grid et de masquer Grid à l'aide de ScaleTransform.
ScaleTransform est défini sur X = 0 Y = 0 à masquer, X = 1 Y = 1 à afficher,
et Trigger utilisant la propriété Tag, comme le code ci-dessous:
À 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";
}
A la 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:
Vous pouvez utiliser les événements ToggleButton Checked et UnChecked Routed 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:
Ceci serait un bon début… .. Vous pouvez simplement ajouter un fichier c # et définir une propriété comme ci-dessous.
common:VisibilityAnimation.AnimationType="Fade"