Answer the question
In order to leave comments, you need to log in
How to work with wpf animation?
I wanted to make a beautiful notification effect. It should be an inscription that rises up, gradually becoming transparent. I'm trying to make this caption through a user control with a label inside
. Ideally, I just create a caption object and it automatically starts its animation and disappears when it finishes.
Questions:
0: What is the difference between Parent and VisualParent?
1: How to move an object? How to get and set its position (relative to parent/window)?
(It seems possible to do this using Margin, but it seems like a crutch, no?)
2: How to remove an object from within itself?
Answer the question
In order to leave comments, you need to log in
When you press the button below, an inscription pops up and disappears. You can put anything in the control, not just text. The rest of the code is in the comments.
MainWindow.xaml.cs
using System.Windows;
namespace Notification
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OnButtonClick(object sender, RoutedEventArgs e)
{
_notification.Activate();
}
}
}
using System.Windows;
using System.Windows.Controls;
namespace Notification.Controls
{
public class NotificationControl : ContentControl
{
public NotificationControl()
{
DefaultStyleKey = typeof(NotificationControl);
}
public void Activate()
{
VisualStateManager.GoToState(this, "Default", false);
VisualStateManager.GoToState(this, "Activated", true);
}
}
}
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Notification.Controls">
<KeyTime x:Key="OffsetYKeyTime">0:0:0.8</KeyTime>
<KeyTime x:Key="OpacityDelayKeyTime">0:0:1.8</KeyTime>
<KeyTime x:Key="VisibilityDelayKeyTime">0:0:2.2</KeyTime>
<Style TargetType="controls:NotificationControl">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:NotificationControl">
<Border
x:Name="RootElement"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0"
Visibility="Collapsed">
<ContentPresenter
x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform />
<RotateTransform />
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Default">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
<EasingDoubleKeyFrame
KeyTime="0:0:0"
Value="0">
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame
KeyTime="0:0:0"
Value="1">
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Activated">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
<EasingDoubleKeyFrame
KeyTime="0:0:0"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame
KeyTime="{StaticResource OffsetYKeyTime}"
Value="-80">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame
KeyTime="0:0:0"
Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame
KeyTime="{StaticResource OpacityDelayKeyTime}"
Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="RootElement"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="{StaticResource VisibilityDelayKeyTime}">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question