How can I achieve THIS type of animation? I'm very new to WPF.
I tried with DoubleAnimation in WPF but not achieved the target.
Animation should be happen when I update the score like in video it's happening when score is updating from 17 to 23.
Try this.
<Window x:Class="WpfApplication1.AnimWindow"
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:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="AnimWindow" Height="300" Width="300">
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PointsNew" To="1.0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="PointsOld" To="0.0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" />
<ThicknessAnimation Storyboard.TargetName="PointsNew" From="0 -32 0 0" To="0 0 0 0" Storyboard.TargetProperty="Margin" Duration="0:0:0.5" />
<ThicknessAnimation Storyboard.TargetName="PointsOld" To="0 32 0 0" Storyboard.TargetProperty="Margin" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.0" x:Name="PointsNew">
<TextBlock Text="23" FontSize="96" FontWeight="Bold" />
</Border>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1.0" x:Name="PointsOld">
<TextBlock Text="17" FontSize="96" FontWeight="Bold" />
</Border>
</Grid></Window>
Try to play with margin, duration, and so on! :-)
Related
<Storyboard x:Key="OnClick1">
<DoubleAnimation Storyboard.TargetName="{StaticResource test}"
Storyboard.TargetProperty="Opacity"
From="1"
To="0"
RepeatBehavior="2000"
AutoReverse="True"
Duration="0:0:0.7"/>
</Storyboard>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Loaded" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
<Button x:Name="button2" x:key="test" Content="Button" Margin="234,140,164,0" Height="37" VerticalAlignment="Top"/>
<Button x:Name="button3" x:key="test" Content="Button" Margin="234,140,164,0" Height="37" VerticalAlignment="Top"/>
I am trying to add this double animation to multiple buttons without duplicating the double animation. Initially, I had the TargetName set to the name of the first button and it works but if added key to the button I get this message "The property "key" does not exist in WinFX namespace.
Give ButtonA the storyboard that drives its Opacity. For each other button,
<Button
x:Name="button3"
Opacity="{Binding Opacity, ElementName=button2}"
...
/>
Alternatively, put all the buttons inside a StackPanel (or Grid, or whatever), and animate the parent's Opacity.
The sample markup you have posted doesn't provide a reproducible sample of your issue but you could add a trigger to each Button that you want to animate:
<Window x:Class="WpfApplication1.Window1"
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"
mc:Ignorable="d"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Storyboard x:Key="OnClick1">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1"
To="0"
RepeatBehavior="2000"
AutoReverse="True"
Duration="0:0:0.7"/>
</Storyboard>
</Window.Resources>
<StackPanel>
<Button x:Name="button2" Content="Button" Height="37" VerticalAlignment="Top">
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Button.Triggers>
</Button>
<Button x:Name="button3" Content="Button" Height="37" VerticalAlignment="Top">
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Window>
I want to use a DoubleAnimation multiple times. Here the code:
<Window x:Class="Project.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<DoubleAnimation x:Key="LeftAnimation" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
<DoubleAnimation x:Key="TopAnimation" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder1">
<StaticResourceExtension ResourceKey="LeftAnimation" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder2">
<StaticResourceExtension ResourceKey="LeftAnimation" />
<StaticResourceExtension ResourceKey="TopAnimation" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas>
<Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
<Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" />
</Canvas>
</Window>
The code works fine, but ReSharper underlines LeftAnimation in line <StaticResourceExtension ResourceKey="LeftAnimation" /> and says: "Invalid resource type: expected type is 'TriggerCollection', actual type is 'DoubleAnimation'."
Is that really a problem or is this a bug in ReSharper (version 9.2)?
Here is an editted solution:
Resources:
<Window.Resources>
<TimelineCollection x:Key="TimelinesCollectionKey1">
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" />
</TimelineCollection>
<TimelineCollection x:Key="TimelinesCollectionKey2">
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="0" To="100" />
</TimelineCollection></Window.Resources>
Triggers:
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder1">
<!--<StaticResourceExtension ResourceKey="LeftAnimation" />-->
<Storyboard.Children>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="AnimatedBorder2">
<Storyboard.Children>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey1}"></ParallelTimeline>
<ParallelTimeline Children="{StaticResource TimelinesCollectionKey2}"></ParallelTimeline>
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</EventTrigger></Window.Triggers>
Targets:
<Canvas>
<Border x:Name="AnimatedBorder1" Background="Blue" Width="20" Height="20" />
<Border x:Name="AnimatedBorder2" Background="Red" Width="20" Height="20" /></Canvas>
Regards,
My req is to have a grid of 2 rows - the first row will be filled with comboboxes as search criteria for a DB query. The second row will be a DataGrid with the results.
I want the upper grid to slide down from the top when I hover over it, and slide back up on mouse leave. I guess I can have a simple textblock at the top "Filters" and hovering over it will bring down the comboboxes?
I have something like this, but when mouse over, the animation goes up/down with out stopping.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="0"
To="66"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="(Grid.Height)"
From="66"
To="0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<TextBlock HorizontalAlignment="Center" FontSize="20" Text="Filters..."/>
</Grid>
<Grid Margin="0" Name="ControlsGrid" VerticalAlignment="top" Background="Yellow"/>
<DataGrid Grid.Row="1" ColumnHeaderStyle="{DynamicResource GridViewColumnHeaderStyle}" Background="LightGray" RowBackground="LightYellow" AlternatingRowBackground="LightBlue"
x:Name="dataGridViewRoomQuery" BorderBrush="Gray" BorderThickness="5"/>
</Grid>
The problem with your approach is that the "hovering" Grid (the one with the event triggers) gets a MouseLeave event whenever the ControlsGrid is placed above it.
You have to put the ControlsGrid into the hovering Grid:
<Grid Grid.Row="0" Background="Transparent">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="Height"
To="66" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ControlsGrid"
Storyboard.TargetProperty="Height"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<TextBlock HorizontalAlignment="Center" FontSize="20" Text="Filters..."/>
<Grid Name="ControlsGrid" Height="0" VerticalAlignment="Top" Background="Yellow">
</Grid>
</Grid>
<DataGrid .../>
How to Begin a StoryBoard when IsOpen property of a Popup is set to True?
ex:
<EventTrigger RoutedEvent="{Binding IsOpen, ElementName=pop}">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="pop"
Storyboard.TargetProperty="Height"
Duration="0:0:1"
From="0.0"
To="200" />
<DoubleAnimation Storyboard.TargetName="pop"
Storyboard.TargetProperty="Width"
Duration="0:0:1"
From="0.0"
To="{Binding ElementName=root,Path=ActualWidth}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
I know EventTrigger RoutedEvent="{Binding IsOpen, ElementName=pop} is not ok
Thank you!
Since you did not mark for Answer, I assumed you still need some help in this.
Here is a code snippet that will work your way (as per H.B.'s post)
<Window x:Class="WpfTestApp.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 x:Key="PopupStyle" TargetType="{x:Type Popup}">
<Style.Triggers>
<Trigger Property="IsOpen" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Duration="0:0:1"
From="0.0"
To="200" />
<DoubleAnimation
Storyboard.TargetProperty="Width"
Duration="0:0:1"
From="0.0"
To="500" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Height="29" HorizontalAlignment="Left" Margin="24,19,0,0" Name="button1" VerticalAlignment="Top" Width="90" Click="button1_Click" />
<Popup Name="pop" Style="{StaticResource PopupStyle}" >
<Grid Background="Red">
<TextBlock Text="I am in pop up" />
</Grid>
</Popup>
</Grid>
and the button click event handler in code behind to open the pop up..
private void button1_Click(object sender, RoutedEventArgs e)
{
pop.PlacementTarget = (Button)sender;
pop.IsOpen = true;
}
Create a Style for the Popup.
Trigger on IsOpen -> true
Use Trigger.EnterActions to start a storyboard.
I have a wrap panel full of usercontrols. When I hover the mouse over a usercontrol I want it to expand to show more details.
Some stripped down sample code:
<UserControl x:Class="WPFTestBed.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<Setter TargetName="WPFTestBed.UserControl1" Property="Control.Width" Value="200"/>
</EventTrigger.Actions>
</EventTrigger>
</UserControl.Triggers>
<Grid Height="95" Width="123">
<Button Height="23" HorizontalAlignment="Left" Margin="17,30,0,0" Name="button1" VerticalAlignment="Top" Width="75">Button</Button>
</Grid>
</UserControl>
I would appreciate it if someone could point out where I'm going wrong, and set me down the correct path.
Ideally, I want the usercontrol to delay for x seconds when there is a mouseover, before expanding and showing the extra details.
Here is a solution (tested):
Keep in mind that you have to set a Width manually on the UserControl for this to work.
Then add this to your UserControl's body:
<UserControl.Style>
<Style>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="0:0:4.0" Storyboard.TargetProperty="Width">
<DoubleAnimation To="200" Duration="0:0:1.0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
It will start after 4 seconds, then animate the width from its current value to 200, over 1 second.
I've managed to get a bit further with what I want:
<UserControl x:Class="WPFTestBed.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="200" Width="170">
<UserControl.Resources>
<Storyboard x:Key="ExpandDisplay">
<DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
From="200" To="380" Duration="0:0:0.25" AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
Storyboard.TargetName="mainBorder"
From="190" To="370" Duration="0:0:0.25" AutoReverse="False"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CollapseDisplay">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
From="380" To="200" Duration="0:0:0.25" AutoReverse="False"/>
<DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
Storyboard.TargetName="mainBorder"
From="370" To="190" Duration="0:0:0.25" AutoReverse="False"/>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseDown">
<BeginStoryboard Storyboard="{StaticResource ExpandDisplay}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="button2">
<BeginStoryboard Storyboard="{StaticResource CollapseDisplay}"/>
</EventTrigger>
</UserControl.Triggers>
<Border Name="mainBorder" Height="190" Width="160" Background="Black" CornerRadius="20,20,20,20">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="10" Opacity=".5"
Softness="9"/>
</Border.BitmapEffect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Height="23" Width="75" VerticalAlignment="Center" HorizontalAlignment="Center" Name="button1" >Details</Button>
<Button Grid.Row="1" Height="23" Width="23" VerticalAlignment="Center" HorizontalAlignment="Center" Name="button2" Visibility="Collapsed">-</Button>
</Grid>
</Border>
</UserControl>
This expands the usercontrol when I click, rather than mouseover, as I couldn't find a satisfactory way to wait for a second before beginning. I could delay the start and cancel on a mouseleave but this also cancelled the expand whenever the mouseleave was called.
I have a button to collapse the usercontrol, but I would prefer to switch which storyboard the usercontrol onclick event calls, can this be done?