WPF 实现高仿 Windows 通知提示框:工业级弹窗设计与实现

前言

软件开发中,用户交互体验至关重要。特别是在工业监控、金融系统或企业级应用中,消息提示作为信息反馈的重要手段,其美观性、易用性和稳定性都不可忽视。

本文将详细介绍如何使用 WPFC# 实现一个类似 Windows 系统的通知提示框(Toast Notification),支持动画效果、自动关闭、多消息堆叠显示等功能,并通过代码展示完整的实现逻辑。适用于桌面应用程序的消息推送机制,具有良好的扩展性和复用性。

正文

一、效果图展示

主窗口界面简洁,仅包含一个触发按钮。点击按钮后,会在屏幕右下角依次弹出多个提示框,每个提示框带有标题、内容和关闭按钮,并具有淡入淡出的动画效果。

二、提示框界面设计(XAML)

提示框采用无边框、无标题栏的设计,设置为始终置顶窗口。核心结构如下:

xml 复制代码
    
        
            
            
        
        
            
            
            
        
        
    

关键属性说明:

  • ResizeMode="NoResize":禁止调整大小。

  • WindowStyle="None":去除默认窗口样式。

  • Topmost="True":始终保持最上层。

三、主窗口后台逻辑(MainWindow.xaml.cs)

1、数据模型定义

用于传递提示框的标题和内容:

csharp 复制代码
class NotifyData
{
    public string Title { get; set; }
    public string Content { get; set; }
}

2、主窗口类实现

csharp 复制代码
public partial class MainWindow : Window
{
    int i = 0;
    public static List _dialogs = new List();

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        i++;
        NotifyData data = new NotifyData();
        data.Title = "提示";
        data.Content = "XXX余额不足,XXX余额不足,XXX余额不足,XXX余额不足" + i;

        Window1 dialog = new Window1();
        dialog.Closed += Dialog_Closed;
        dialog.TopFrom = GetTopFrom();
        dialog.DataContext = data;
        dialog.Show();

        _dialogs.Add(dialog);
    }

    private void Dialog_Closed(object sender, EventArgs e)
    {
        var closedDialog = sender as Window1;
        _dialogs.Remove(closedDialog);
    }

    double GetTopFrom()
    {
        double topFrom = System.Windows.SystemParameters.WorkArea.Bottom - 10;
        bool isContinueFind = _dialogs.Any(o => o.TopFrom == topFrom);

        while (isContinueFind)
        {
            topFrom = topFrom - 160;
            isContinueFind = _dialogs.Any(o => o.TopFrom == topFrom);
        }

        if (topFrom <= 0)
            topFrom = System.Windows.SystemParameters.WorkArea.Bottom - 10;

        return topFrom;
    }
}

功能说明:

  • GetTopFrom() 方法用于计算下一个提示框的位置,避免重叠。

  • _dialogs 列表用于管理所有打开的提示框。

  • 每个提示框关闭时会从列表中移除。

四、提示框后台逻辑(Window1.xaml.cs)

该类负责处理提示框的加载、位置动画和自动关闭功能。

csharp 复制代码
public partial class Window1 : Window
{
    public double TopFrom { get; set; }

    public Window1()
    {
        InitializeComponent();
        this.Loaded += NotificationWindow_Loaded;
    }

    private void NotificationWindow_Loaded(object sender, RoutedEventArgs e)
    {
        NotifyData data = this.DataContext as NotifyData;
        if (data != null)
        {
            tbContent.Text = data.Content;
            tbTitle.Text = data.Title;
        }

        Window1 self = sender as Window1;
        if (self != null)
        {
            double right = SystemParameters.WorkArea.Right - 10;
            self.Top = TopFrom - 160;

            DoubleAnimation animation = new DoubleAnimation();
            animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
            animation.From = right;
            animation.To = right - self.ActualWidth;
            self.BeginAnimation(Window.LeftProperty, animation);

            Task.Factory.StartNew(delegate
            {
                int seconds = 5;
                System.Threading.Thread.Sleep(TimeSpan.FromSeconds(seconds));

                this.Dispatcher.Invoke(delegate
                {
                    animation = new DoubleAnimation();
                    animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
                    animation.Completed += (s, a) => { self.Close(); };
                    animation.From = right - self.ActualWidth;
                    animation.To = right;
                    self.BeginAnimation(Window.LeftProperty, animation);
                });
            });
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        double right = SystemParameters.WorkArea.Right;
        DoubleAnimation animation = new DoubleAnimation();
        animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        animation.Completed += (s, a) => { this.Close(); };
        animation.From = right - this.ActualWidth;
        animation.To = right;
        this.BeginAnimation(Window.LeftProperty, animation);
    }
}

功能说明:

  • 提示框加载时执行滑动动画,从右侧滑入。

  • 默认显示5秒后自动关闭,并执行反向滑出动画。

  • 用户可点击"×"手动关闭提示框。

总结

本文详细介绍了如何使用 WPF 开发一个功能完整、视觉美观的通知提示框控件,涵盖了从界面布局、数据绑定到动画控制、自动关闭等多个关键技术点。通过实际编码展示了如何在工业级桌面应用中实现优雅的信息推送机制。

该提示框具备以下特点:

  • 支持多消息堆叠显示;

  • 自动计算弹窗位置,避免遮挡;

  • 支持滑动动画,提升用户体验;

  • 可灵活扩展内容格式和交互方式。

无论是用于业务提醒、系统通知还是异常提示,该组件都能很好地满足需求,具有良好的复用价值和工程实践意义。

关键词(顿号分隔)

WPF、通知框、Toast、弹窗、提示框、C#、WindowStyle、Topmost、DoubleAnimation、Dispatcher、Task、MVVM、UI交互、动画效果、工业级弹窗、消息推送、Windows提示风格、XAML、自定义控件、源码下载

最后

如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!

优秀是一种习惯,欢迎大家留言学习!

相关推荐
狂奔小菜鸡2 小时前
Day27 | Java集合框架之List接口详解
java·后端·java ee
未秃头的程序猿2 小时前
《Spring Boot MongoDB革命性升级!silky-mongodb-spring-boot-starter发布,开发效率暴增300%!》
后端·mongodb
a程序小傲2 小时前
美团二面:KAFKA能保证顺序读顺序写吗?
java·分布式·后端·kafka
a努力。2 小时前
网易Java面试被问:fail-safe和fail-fast
java·windows·后端·面试·架构
白衣鸽子2 小时前
【基础数据篇】数据等价裁判:Comparer模式
后端·设计模式
Cache技术分享2 小时前
266. Java 集合 - ArrayList vs LinkedList 内存使用深度剖析
前端·后端
回家路上绕了弯2 小时前
分布式系统设计:中心化与去中心化思想的碰撞与融合
分布式·后端
用户44402098631552 小时前
我的服务器带宽被“偷”了,于是我写了个脚本来抓现行
后端
踏浪无痕3 小时前
MySQL 脏读、不可重复读、幻读?一张表+3个例子彻底讲清!
后端·面试·架构