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