N
N
NNn1312021-10-14 16:54:56
.NET
NNn131, 2021-10-14 16:54:56

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

1 answer(s)
B
Boris the Animal, 2021-10-17
@Casper-SC

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();
        }
    }
}

Controls/NotificationControl.cs
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);
        }
    }
}

Resources/Styles.xaml
<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 question

Ask a Question

731 491 924 answers to any question