WPF 显示气泡提示框

气泡提示框应用举例

有时候在我们开发的软件经常会遇到需要提示用户的地方，为了让用户更直观，快速了解提示信息，使用简洁、好看又方便的气泡提示框显得更加方便，更具人性化。如下面例子：(当用户未输入账号时，气泡提示会在登录页面上方提示用户“请输入登录账号”，用户点击其他地方或者在无操作一段时间后，气泡会自动消失。根据不同类型的提示框，字体颜色和图标也不一样。本例的气泡提示框可在不同窗体上显示。)

接下来就开始做一个有趣的气泡提示框吧(形状可自定义)

气泡提示框代码创建

新建气泡提示框窗体

新建一个气泡提示框窗体(之所以选择窗体是因为可以让它不附属于其他窗体，可在任意窗体上运行)，使用Popup控件作为提示框主体。在Popup控件中添加提示图标和提示信息，通过InfoType依赖属性来设置其图标和信息背景颜色。

<Window x:Class="BubblePrompt.PopupMessageWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BubblePrompt"
        mc:Ignorable="d"
        Name="own" AllowsTransparency="True" ShowInTaskbar="False"
        Title="PopupMessageWindow" Height="60" Width="410" WindowStyle="None"   Background="{x:Null}" >
    <Popup Name="popupInfo" Opened="popupInfo_Opened"  StaysOpen="False" IsOpen="False" AllowsTransparency="True" VerticalOffset="60" HorizontalOffset="100"  Placement="Top"  PlacementTarget="{Binding Element,ElementName=own}">
        <Border CornerRadius="4" Background="{Binding BackColor,ElementName=own}" Height="50" Width="400" >
            <Grid>
                <Image Width="20" Height="20" Source="{Binding ImageSource,ElementName=own}" HorizontalAlignment="Left" Margin="30,0,0,0"/>
                <TextBlock x:Name="txtbInfo" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="60,0,0,0" FontSize="16"
                           Text="{Binding Info,ElementName=own}" Foreground="{Binding InfoTextColor,ElementName=own}"/>
            </Grid>
        </Border>
    </Popup>
</Window>

    /// <summary>
    /// PopupMessageWindow.xaml 的交互逻辑
    /// </summary>
    public partial class PopupMessageWindow : Window
    {
        private static BitmapImage NormalInfoImg = new BitmapImage(new Uri("/BubblePrompt;component/Images/ic_pop_normal.png", UriKind.RelativeOrAbsolute));
        private static BitmapImage WarnInfoImg = new BitmapImage(new Uri("/BubblePrompt;component/Images/ic_pop_warn.png", UriKind.RelativeOrAbsolute));
        private static BitmapImage ErrorInfoImg = new BitmapImage(new Uri("/BubblePrompt;component/Images/ic_pop_fail.png", UriKind.RelativeOrAbsolute));

        private static Brush NormalBackColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#DEF4FF"));
        private static Brush WarnBackColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFF0E6"));
        private static Brush ErrorBackColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFF0E6"));

        private static Brush NormalInfoColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0094FF"));
        private static Brush WarnInfoColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FB9048"));
        private static Brush ErrorInfoColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FB9048"));
        System.Windows.Threading.DispatcherTimer uiTimer;
        public FrameworkElement Element
        {
            get { return (FrameworkElement)GetValue(ElementProperty); }
            set { SetValue(ElementProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Element.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ElementProperty =
            DependencyProperty.Register("Element", typeof(FrameworkElement), typeof(Window), new PropertyMetadata(null));



        public string Info
        {
            get { return (string)GetValue(InfoProperty); }
            set { SetValue(InfoProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Info.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty InfoProperty =
            DependencyProperty.Register("Info", typeof(string), typeof(Window), new PropertyMetadata(""));



        public int Delay
        {
            get { return (int)GetValue(DelayProperty); }
            set { SetValue(DelayProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Delay.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DelayProperty =
            DependencyProperty.Register("Delay", typeof(int), typeof(Window), new PropertyMetadata(3));





        public Brush BackColor
        {
            get { return (Brush)GetValue(BackColorProperty); }
            set { SetValue(BackColorProperty, value); }
        }
        // Using a DependencyProperty as the backing store for BackColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BackColorProperty =
            DependencyProperty.Register("BackColor", typeof(Brush), typeof(Window), new PropertyMetadata(NormalBackColor));

        public Brush InfoTextColor
        {
            get { return (Brush)GetValue(InfoTextColorProperty); }
            set { SetValue(InfoTextColorProperty, value); }
        }
        // Using a DependencyProperty as the backing store for BackColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty InfoTextColorProperty =
            DependencyProperty.Register("InfoTextColor", typeof(Brush), typeof(Window), new PropertyMetadata(NormalInfoColor));


        /// <summary>
        /// 0:Normal 1:Warn 2:Error
        /// </summary>
        public int InfoType
        {
            get { return (int)GetValue(InfoTypeProperty); }
            set
            {
                SetValue(InfoTypeProperty, value);
                if (value == 0)
                {
                    ImageSource = NormalInfoImg;
                    BackColor = NormalBackColor;
                    InfoTextColor = NormalInfoColor;
                }
                else if (value == 1)
                {
                    ImageSource = WarnInfoImg;
                    BackColor = WarnBackColor;
                    InfoTextColor = WarnInfoColor;
                }
                else if (value == 2)
                {
                    ImageSource = ErrorInfoImg;
                    BackColor = ErrorBackColor;
                    InfoTextColor = ErrorInfoColor;
                }
            }
        }

        // Using a DependencyProperty as the backing store for InfoType.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty InfoTypeProperty =
            DependencyProperty.Register("InfoType", typeof(int), typeof(Window), new PropertyMetadata(0));



        public BitmapImage ImageSource
        {
            get { return (BitmapImage)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register("ImageSource", typeof(BitmapImage), typeof(Window), new PropertyMetadata(null));


        DateTime startTime;
        public PopupMessageWindow()
        {
            InitializeComponent();
        }

        private void UITimerTick(object sender, EventArgs e)
        {
            if (popupInfo.IsOpen == false)
            {
                uiTimer.Stop();
                return;
            }
            if ((DateTime.Now - startTime).TotalSeconds >= Delay)
            {
                this.Hide();
                popupInfo.IsOpen = false;
            }
        }


        private void popupInfo_Opened(object sender, EventArgs e)
        {
            if (uiTimer == null || uiTimer.IsEnabled == false)
            {
                uiTimer = new System.Windows.Threading.DispatcherTimer();
                uiTimer.Interval = TimeSpan.FromMilliseconds(1000);
                uiTimer.Tick += UITimerTick;
                startTime = DateTime.Now;
                uiTimer.Start();
            }
            else
            {
                startTime = DateTime.Now;
            }

        }
    }

新建气泡提示框管理类

新建气泡提示框管理类作为公共类，使其可以被全局访问和使用。

    public class MessageManager
    {
        private PopupMessageWindow mPopupMessageWindow = new PopupMessageWindow();
        /// <summary>
        /// Poup消息提示
        /// </summary>
        public PopupMessageWindow PopupMessageWindow { set { mPopupMessageWindow = value; } get { return mPopupMessageWindow; } }
        /// <summary>
        /// type: 0:常规 1:注意 2:警告
        /// </summary>
        /// <param name="element"></param>
        /// <param name="type"></param>
        public void ShowMessageTip(string info, FrameworkElement element = null, int type = 0, int delaytime = 3)
        {
            if (PopupMessageWindow != null && info.Length <= 30)
            {
                PopupMessageWindow.Element = element;
                PopupMessageWindow.InfoType = type;
                PopupMessageWindow.popupInfo.IsOpen = true;
                PopupMessageWindow.Info = info;
                PopupMessageWindow.Delay = delaytime;
                PopupMessageWindow.Show();
            }
        }
    }

窗体中应用气泡提示框

在任意窗体中使用气泡提示管理类中气泡提示框方法，设置其信息和信息类型，在该窗体中显示气泡提示。

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// 消息提醒管理
        /// </summary>
        public MessageManager MessageManager {  get { return new MessageManager(); } }
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnTip_Click(object sender, RoutedEventArgs e)
        {
            MessageManager.ShowMessageTip("当前资源为最新", this, 1);
        }
    }