Как работать с wpf анимацией?

Question

[NNn131]

Захотелось мне сделать красивый эффект уведомления. Это должна быть надпись, которая поднимается вверх, постепенно становясь прозрачной. Я пытаюсь сделать эту надпись через user control с label внутри
В идеале - я просто создаю объект надписи и он автоматически запускает свою анимацию и по её окончании удаляется.
Вопросы:
0: Чем отличаются Parent, VisualParent?
1: Как двигать объект? Как получить и установить его позицию (относительно родителя/окна)?
(Вроде можно это сделать с помощью Margin, но кажется это костыльно, нет?)
2: Как удалить объект изнутри себя же?

Comments

[Борис Животное]

1: Как двигать объект?

RenderTransform.TranslateTransform

Для понимания о чём речь.

<Rectangle Width="80" Height="45" Stroke="Blue" Fill="Red">
    <Rectangle.RenderTransform>
        <TranslateTransform X="10" Y="50" />
    </Rectangle.RenderTransform>
</Rectangle>

https://docs.microsoft.com/en-us/dotnet/desktop/wp...

Вроде можно это сделать с помощью Margin

Точно нет. Не через него.

[Борис Животное]

В идеале - я просто создаю объект надписи и он автоматически запускает свою анимацию и по её окончании удаляется.

Зачем его удалять? Если он просто периодически будет запускать анимацию, то пусть будет там, его удалять никакого смысла не имеет, по памяти там экономия будет не эпическая, чтобы тратить на это 3 минуты жизни.

[Борис Животное]

Уведомление появляется где? Внутри окна? То есть это не уведомление, которое независимо от окна всплывает где-то в одной из сторон экрана? Я с такой задачей много лет назад намучался, но сделал нормально, даже учитывалось расположение панели задач и насколько она выпирает от границы экрана. Уведомление могло вылетать с четырёх углов экрана (снизу вверх, сверху вниз, смотря какая сторона экрана - верхняя или нижняя).

Answer 1

[Борис Животное]

При её нажатии на кнопку снизу всплывает надпись и исчезает. В контрол можно поместить, что угодно, не только текст. Остальной код в комментариях.

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>

Comments

[Борис Животное]

Проверял на .NET Core (теперь просто .NET) версии. Должно работать и в .NET Framework.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

</Project>

MainWindow.xaml

<Window
    x:Class="Notification.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Notification.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:Notification"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Grid>
        <Button
            Width="100"
            Height="36"
            Margin="8,0,0,10"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            Click="OnButtonClick"
            Content="Button" />

        <controls:NotificationControl
            x:Name="_notification"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom">
            <TextBlock
                FontSize="32"
                Text="NotificationControl content!" />
        </controls:NotificationControl>
    </Grid>
</Window>

App.xaml

<Application x:Class="Notification.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Notification"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>
</Application>

[Борис Животное]

Ещё можно добавить в NotificationControl свойство, например OffsetY с типом double, в котором будет задаваться высота, на которую должен взлетать контент. Вместо -80 напиши {TemplateBinding OffsetY}.

[Борис Животное]

По этому же принципу можно сделать контрол, который будет из себя представлять тёмный оверлей, который появляется поверх всего контента и отображает анимацию ожидания, например загрузки контента (нужно создать новый контрол, для него новый стиль и добавить в него Dependency Property с типом bool и на его основе переключать состояния с помощью VisualStateManager, и немного подправить стиль).