I have two stackpanels, where the second panel is extra information that can be slided down and shown when clicking on a button (like jQuerys slideDown effect). And afterwards be slided up, when clicking the button again.
I´ve never been fiddling with animations before, but have been doing some research. I´m still quite confused though, and cant figure out this simple problem.
When I only listen on the Visibility=Visible property, it works fine. But when I also want to slide the panel up, it behaves weird.
This is my XAML code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Width="600" Orientation="Horizontal">
<TextBlock Style="{StaticResource Heading4}">Panel 1</TextBlock>
<Button Width="300" Margin="30,0,0,0" Click="Button_OnClick">Click to slide other panel down</Button>
</StackPanel>
<StackPanel Name="StackPanelShowHide" Grid.Row="1" Width="500" Orientation="Vertical" Background="Beige" Height="70">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="0" To="70" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Visibility" Value="Collapsed">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="70" To="0" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<TextBlock Style="{StaticResource Heading4}">New panel</TextBlock>
</StackPanel>
</Grid>
And this is my Codebehind:
private void Button_OnClick(object Sender, RoutedEventArgs E) {
if (StackPanelShowHide.Visibility == Visibility.Collapsed) {
StackPanelShowHide.Visibility = Visibility.Visible;
} else {
StackPanelShowHide.Visibility = Visibility.Collapsed;
}
}
Really hope you can help :)
Kind regards,
Lars
I guess that instead of slide up animation on collapse it just instantly disappears. This is because you set Visibility to Collapsed, so there is nothing to display.
To fix this:
a) use MVVM: add some property to ViewModel and trigger on it. Modify property via ICommand.
b) Do not set Visibility, just start proper Storyboard in event handler.
I believe that your problem is that when the StackPanel has a Visibility value of Collapsed, it is removed from the UI. Therefore, even if the Animation were to occur, you would not see it.
Related
So I have an expander that I want to have the normal functionality (open and close with its own button) but I also want a different button to expand it when pressed (this button is in the header of the expander). I'm using a storyboard in an event trigger for the Button.Click which works, but after it is expanded this way the normal button doesn't work, it just stays expanded. My xaml is below, I would really prefer to keep this all in the xaml, I could come up with a way to do it in the codebehind/viewmodel myself.
<Expander x:Name="IndexExpander" IsExpanded="True" Grid.Row="4" Grid.ColumnSpan="5" Margin="10" MaxHeight="150">
<Expander.Triggers>
<EventTrigger SourceName="btnAddIndex" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="IndexExpander" Storyboard.TargetProperty="IsExpanded" BeginTime="0:0:0.25" Duration="0:0:0.20" >
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Expander.Triggers>
<Expander.Header>
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<TextBlock Text="Indexes" FontWeight="Bold"/>
<!-- Add/Delete Buttons-->
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="btnAddIndex" Command="{Binding AddIndexCommand}" Template="{StaticResource AddButtonTemplate}" IsEnabled="{Binding IsEditable}" Margin="0,0,5,0" />
</Grid>
</StackPanel>
</Expander.Header>
Alright, so for anyone following in my footsteps here's what I did. I got the idea from here, and adapted it until it worked correctly.
<Expander.Triggers>
<EventTrigger SourceName="btnAddCol" RoutedEvent="Button.Click">
<BeginStoryboard x:Name="ColumnExpanderStory">
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="ColumnExpander" Storyboard.TargetProperty="IsExpanded">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.PreviewMouseUp">
<RemoveStoryboard BeginStoryboardName="ColumnExpanderStory" />
</EventTrigger>
</Expander.Triggers>
<Expander.Header>
The problem was that the storyboard overrides any other bindings to the IsExpanded property, so it has to be removed to restore them (read more here). The suggestion was to use the ToggleButton.Checked event to remove the storyboard, but that didn't work for me, only the "Preview" events seemed to have the right timing. I started with PreviewMouseDown, but it would remove the storyboard, then on mouse up toggle the expander, meaning the first click would just flip states back and forth quickly. Using PreviewMouseUp got around that issue.
I want a control (e.g. a GroupBox) to show a grow animation when it becomes visible and a shrink animation, when the visibility is changed to "Collapsed".
Therefore, I created a style which implements an animated grow and shrink effect as shown here in a small sample application (shown below).
However, only the grow animation is shown. Instead of showing the shrink animation, the groupbox disappears at once.
Can anyone tell me, why?
And even better, how to fix it?
<Window x:Class="ShrinkTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="FrameworkElement" x:Key="ExpandableElement">
<Setter Property="RenderTransformOrigin" Value="0.5 0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Visibility" Value="Hidden">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:0:0.5" AccelerationRatio="0.2" DecelerationRatio="0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="8" Width="140" Click="ButtonBase_OnClick">Expand / Shrink</Button>
<TextBlock Grid.Row="1" Text="--- Header ---"/>
<GroupBox x:Name="GroupBox" Grid.Row="2" Header="GroupBox" Style="{StaticResource ExpandableElement}" >
<StackPanel Orientation="Vertical">
<TextBlock Text="Test Test Test"/>
<TextBlock Text="Test Test Test"/>
<TextBlock Text="Test Test Test"/>
<TextBlock Text="Test Test Test"/>
<TextBlock Text="Test Test Test"/>
</StackPanel>
</GroupBox>
<TextBlock Grid.Row="3" Text="--- Footer ---"/>
</Grid>
</Window>
I had a similar problem. Just think about it for a minute... your problem is that you can see your animation when it's visible, but you can't when it is hidden. That is also your answer to why... because it is hidden. I know, that's fairly unsatisfactory answer, but that's just how it is.
As to how to fix it... well saying it is simple, but implementing it is not. Simply put, you have to run your animation until it ends and then set the Visibility to Hidden. So unfortunately this means that nice, simple setting the Visibility property in the Trigger is no longer viable... it's ok to make it visible, just not for hiding.
In my case, I have a whole framework that I built my animations into. Basically speaking though, when I remove items from the collections, internally the item is not actually removed, but instead its exit animation is started. Only when that animation is complete will the internal collection actually remove the item.
So if you can be bothered, then you'll have to implement something like this where, rather than setting the Visibility property to Hidden, you set another property to true which triggers the animation and when the Completed event from that animation is called, then you set the Visibility property to Hidden.
Sheridan is right. As soon as a control becomes invisible, it doesn't matter, which animation you apply to it. :-)
So I created a special ExpandingContentControl:
public class ExpandingContentControl : ContentControl
{
public static readonly DependencyProperty IsExpandedProperty = DependencyProperty.Register(
"IsExpanded", typeof(bool), typeof(ExpandingContentControl), new PropertyMetadata(false));
public bool IsExpanded
{
get { return (bool)GetValue(IsExpandedProperty); }
set { SetValue(IsExpandedProperty, value); }
}
public ExpandingContentControl()
{
Visibility = IsExpanded ? Visibility.Visible : Visibility.Collapsed;
}
}
But there was also a problem with the style: Creating two triggers which are bound to different values of the same property obviously doesn't work.
Instead, I'm now using just one trigger where the EnterAction implements growing and the ExitAction implements shrinking the control:
<Style TargetType="controls:ExpandingContentControl" >
<Setter Property="RenderTransformOrigin" Value="0.5 1" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="00:00:00"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1"
Duration="0:0:0.3" DecelerationRatio="0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:0:0.2" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="00:00:0.2"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
i am using the MVVM design pattern and do not want much code in my code behind. coding in XAML and C#.
when a user saves a new record i would like "record saved" to appear in a text Block then fade away.
this is the sort of thing i would like to work:
<TextBlock Name="WorkflowCreated" Text="Record saved">
<TextBlock.Triggers>
<DataTrigger Binding="{Binding Path=NewWorkflowCreated}">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="WorkflowCreated"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</TextBlock.Triggers>
so when NewWorkflowCreated is changed in the viewmodel it would trigger the animation, unfortunately this does not work. i have also tried this:
<TextBlock Name="Message" Text="This is a test.">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Message"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
any help would be much appreciated. Maybe there is away that requires code in the View model?
You're using a DataTrigger which needs to be in a style.
<Window.DataContext>
<WpfApplication2:TestViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="textBoxStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=NewWorkflowCreated}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<TextBlock Name="WorkflowCreated" Style="{StaticResource textBoxStyle}" Text="Record saved" />
<Button Content="press me" Grid.Row="1" Click="Button_Click_1"/>
</Grid>
public class TestViewModel : INotifyPropertyChanged
{
private bool _newWorkflowCreated;
public bool NewWorkflowCreated
{
get { return _newWorkflowCreated; }
set {
_newWorkflowCreated = value;
PropertyChanged(this, new PropertyChangedEventArgs("NewWorkflowCreated"));
}
}
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
This sort of UI-specific behavior should definitely be handled in the View, not the ViewModel
I would suggest looking into the TextChanged event, and see about kicking off the animation in there
Not my blog but I pretty much found what I was looking for here:
https://michaelscherf.wordpress.com/2009/02/23/how-to-trigger-an-animation-when-textblocks-text-is-changed-during-a-databinding/
I would like to enlarge (i.e. ScaleTransform) a whole grid depending on a property of my custom class.
My Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="0">
<TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding BoxId}" />
</Viewbox>
<Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding ProdNr}" />
</Viewbox>
</Grid>
This is the style I used. The problem is, there is no scaling to be seen at all. I tested the code with another animation (changing the background color) which worked fine.
<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsReadyToUnload}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" To="2" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Could you give me any hints on how to achieve the correct scaling behavior?
Try attaching this to your ViewBox.
<Viewbox x:Name="viewbox" RenderTransformOrigin="0.5,0.5" ...>
<Viewbox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Viewbox.RenderTransform>
Also try changing your animation to this, name your first ViewBox viewbox.
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="viewbox">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2"/>
</DoubleAnimationUsingKeyFrames>
Sorry, didn't see that you are using LayoutTransform. You should use RenderTransform instead, try changing the Setter Property as well as the Storyboard.TargetProperty to RenderTransform and it should work.
<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
Also if you want to keep the LayoutTransform you can try changing your Grid to a Canvas, that might work too.
Your Grid is defining the space your ViewBoxes are allowed to occupy, so you should animate your Grid's properties, not your ViewBoxes.
You can either animate it's Height/Width, or apply a ScaleTransform to it.
Also, a LayoutTransform gets applied before rendering, while a RenderTransform gets applied afterwards. You might want to try using a RenderTransform instead of a Layout one with your existing code to see if it will all your ViewBoxes to expand outside of their allowed area.
I have done something similair to you this way (done in the code behind on a mouse over event):
DoubleAnimation animation = new DoubleAnimation();
animation.From = MenuBorder.Width;
animation.To = 170;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(350));
MenuBorder.BeginAnimation(WidthProperty, animation);
Here i have a grid with a border inside. The grids with is set to automatic. Therefore it looks like it is the grid I am animating but it is really the border inside the grid I am animating.
You should add the Type to the animation:
<DoubleAnimation Storyboard.TargetProperty="(Grid.LayoutTransform).(ScaleTransform.ScaleX)" To="2" Duration="0:0:0.5" />
I would set the value of ScaleX explicitly at the control:
<ScaleTransform ScaleX="1" />
I think what you are trying to achieve is to change the width/height of the ViewBox, and then the content will Scale accordingly.
I have implemented the animation of moving of a grid control in the following manner:
<Grid
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger
Binding="{Binding ElementName=rootLayout, Path=IsVisible}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
Storyboard.TargetProperty="Margin"
From="-500,0,0,0"
To="0,0,0,0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Border
Grid.RowSpan="2"
Background="Black"
CornerRadius="6" >
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
<TextBlock
Grid.Row="0"
Width="400"
Height="200"
Margin="20,20,20,10"
Text="{Binding Path=MessageText}" />
<Button
Grid.Row="1"
Margin="20,5,20,15"
HorizontalAlignment="Right"
Width="75"
Content="OK"
Command="{Binding Path=CloseDialogCommand}" />
</Grid>
The animation works fine, but it's ugly. It is shaky / jittery / jerky and it really looks unprofessional. Is there a way to improve this? Am I using the right approach with animating the value change on the Margin property in order to move the grid? I've read about RenderTransform, but I don't know how to use it in my case.
Also, the animation looks unnatural. I know this can be improved but I don't know how. What are these properties and can they help me enhance my animation:
AccelerationRatio
DecelerationRatio
EasingFunction
IsAdditive
IsCumulative
SpeedRatio
Thanks for helping!
P.S. I am trying to put as much code as possible in XAML, so I'd prefer that approach, but really, if there's anything to improve this...
Use easing functions, a simple DoubleAnimation and RenderTransform, e.g.
<Button Content="Test">
<Button.RenderTransform>
<TranslateTransform/>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X"
From="-500" To="0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
This should be quite smooth, check out this overview on easing functions to get an idea of how they affect the animation.
Also note that the duration has a strong effect on what an animation looks like, depending on what easing function you use setting high duration values is needed because they slow down significantly at the end.