WPF Flyout风格动画消息弹出消息提示框

WPF Flyout风格动画消息弹出消息提示框

效果如图：

XAML:

<Window x:Class="你的名称控件.FlyoutNotication"
        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:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:dxt="http://schemas.devexpress.com/winfx/2008/xaml/core/themekeys"
        xmlns:local="clr-namespace:SMAT.Controls"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="FlyoutNotication"
        Width="300"
        Height="80"
        AllowsTransparency="True"
        Background="Transparent"
        ResizeMode="NoResize"
        WindowStartupLocation="Manual"
        WindowStyle="None"
        mc:Ignorable="d">
    <Window.Resources>
        <Storyboard x:Key="Show">
            <DoubleAnimation Storyboard.TargetName="Translate"
                             Storyboard.TargetProperty="X"
                             From="310"
                             To="0"
                             Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="Hide">
            <DoubleAnimation Storyboard.TargetName="Translate"
                             Storyboard.TargetProperty="X"
                             To="310"
                             Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Border Background="Gray" BorderBrush="LightGray" BorderThickness="1">
        <Border.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="Translate" X="300" />
            </TransformGroup>
        </Border.RenderTransform>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <TextBlock x:Name="Title"
                       Margin="12,12,4,4"
                       FontSize="16"
                       FontWeight="Bold"
                       Text="标题" />

            <TextBlock x:Name="Message"
                       Grid.Row="1"
                       Margin="12,4"
                       Text="消息内容"
                       TextWrapping="Wrap" />
        </Grid>
    </Border>

</Window>

C#:

 /// <summary>
 /// FlyoutNotication.xaml 的交互逻辑
 /// </summary>
 public partial class FlyoutNotication : Window
 {
     public FlyoutNotication()
     {
         InitializeComponent();
     }

     public static async void ShowNotication(string message, string title)
     {
         FlyoutNotication flyoutNotication = new FlyoutNotication()
         {
             Owner = Application.Current.MainWindow,
             ShowInTaskbar = false,
             Left = Application.Current.MainWindow.ActualWidth+ (Application.Current.MainWindow.WindowState == WindowState.Maximized?-20: Application.Current.MainWindow.Left) - 300,
             Top = Application.Current.MainWindow.ActualHeight + (Application.Current.MainWindow.WindowState == WindowState.Maximized ? -20 : Application.Current.MainWindow.Top) - 80,
         };

         flyoutNotication.Message.Text = message;
         flyoutNotication.Title.Text = title;
         var sbShow = flyoutNotication.FindResource("Show") as Storyboard;
         flyoutNotication.Show();
         sbShow.Begin();

         await Task.Delay(2000);
         var sbHide = flyoutNotication.FindResource("Hide") as Storyboard;
         sbHide.Completed += (s, e) => flyoutNotication.Close();
         sbHide.Begin();
     }
 }

调用控件：

FlyoutNotication.ShowNotication("测试消息提示", "标题");