不管什么平台，应用内难免会出现一些消息提示框，下面就来聊聊我在UWP里用到的消息提示框。
弹窗也可按是否需要用户操作促发一些逻辑进行分为两大类。
不需要用户干涉的一类：
MessageDialog：操作简单，写起来也省事，想具体了解的请参考MSDN 先看看效果
PC上效果：
mobile上效果：
再看看代码(●'◡'●)
前台：
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<RelativePanel HorizontalAlignment="Center">
<TextBlock x:Name="tbHW" Text="Hello 弹窗" />
<TextBlock x:Name="tb" RelativePanel.Below="tbHW" Margin="0,10" FontSize="20" Foreground="#f90"/>
</RelativePanel>
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
<Button Content="MessageDialog" Click="Button_Click"/>
</StackPanel>
</Grid>
后台：
private void Button_Click(object sender, RoutedEventArgs e)
{
this.tb.Text = "";
Button btn = sender as Button;
switch (btn.Content.ToString())
{
case "MessageDialog":
ShowMessageDialog();
break;
}
} private async void ShowMessageDialog()
{
var msgDialog = new Windows.UI.Popups.MessageDialog("我是一个提示内容") { Title = "提示标题" };
msgDialog.Commands.Add(new Windows.UI.Popups.UICommand("确定", uiCommand => { this.tb.Text = $"您点击了：{uiCommand.Label}"; }));
msgDialog.Commands.Add(new Windows.UI.Popups.UICommand("取消", uiCommand => { this.tb.Text = $"您点击了：{uiCommand.Label}"; }));
await msgDialog.ShowAsync();
}
很简单，但是不能控制显示位置、字体颜色、大小等，实际应用中酱紫的界面也很难说服UI妹纸。。。不要方，办法还是很多滴，下面再来介绍另外一种实现:通过Popup+UserControl来实现自己消息提示框。
还是先看效果吧。
继续来看代码：
新建一个用户控件，暂叫它MessagePopupWindow吧。
MessagePopupWindow.xaml
<Grid>
<Border x:Name="OutBorder" Background="#55000000"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/> <StackPanel x:Name="ContentGrid" Background="White"
Margin="45,45"
Orientation="Vertical"
VerticalAlignment="Center"> <Grid Padding="20">
<TextBlock x:Name="tbContent"
Grid.Row="0"
TextWrapping="Wrap"
HorizontalAlignment="Center" />
</Grid> <Grid Padding="15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="btnLeft"
Content="确定"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
BorderThickness="0"
Click="LeftButton_Click"
Background="#f90"
Foreground="White"
MaxWidth="150"/>
<Button
Grid.Column="2"
x:Name="btnRight"
Content="取消"
Click="RightButton_Click"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
BorderThickness="0"
Background="Gray"
Foreground="BlanchedAlmond"
MaxWidth="150"/>
</Grid>
</StackPanel>
</Grid>
MessagePopupWindow.xaml.cs
public sealed partial class MessagePopupWindow : UserControl
{
private Popup m_Popup;
private string m_TextBlockContent;
private MessagePopupWindow()
{
this.InitializeComponent(); m_Popup = new Popup();
this.Width = Window.Current.Bounds.Width;
this.Height = Window.Current.Bounds.Height;
m_Popup.Child = this;
this.Loaded += MessagePopupWindow_Loaded;
this.Unloaded += MessagePopupWindow_Unloaded;
} public MessagePopupWindow(string showMsg) : this()
{
this.m_TextBlockContent = showMsg;
}
private void MessagePopupWindow_Loaded(object sender, RoutedEventArgs e)
{
this.tbContent.Text = m_TextBlockContent;
Window.Current.SizeChanged += MessagePopupWindow_SizeChanged; ;
} private void MessagePopupWindow_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
this.Width = e.Size.Width;
this.Height = e.Size.Height;
} private void MessagePopupWindow_Unloaded(object sender, RoutedEventArgs e)
{
Window.Current.SizeChanged -= MessagePopupWindow_SizeChanged; ;
} public void ShowWIndow()
{
m_Popup.IsOpen = true;
} private void DismissWindow()
{
m_Popup.IsOpen = false;
} private void LeftButton_Click(object sender, RoutedEventArgs e)
{
DismissWindow();
LeftClick?.Invoke(this, e);
} private void RightButton_Click(object sender, RoutedEventArgs e)
{
DismissWindow();
RightClick?.Invoke(this, e);
} public event EventHandler<RoutedEventArgs> LeftClick;
public event EventHandler<RoutedEventArgs> RightClick;
}
MainPage.xaml改动如下:
MainPage.xaml.cs在Button_Click里增加一个case来处理点击“Custom”按钮的点击事件,
case "Custom":
ShowMessagePopupWindow();
break;
ShowMessagePopupWindow方法主要如下：
private void ShowMessagePopupWindow()
{
var msgPopup = new Controls.MessagePopupWindow("我是一个提示内容");
msgPopup.LeftClick += (s, e) => { this.tb.Text = "您点击了：确定"; };
msgPopup.RightClick += (s, e) => { this.tb.Text = "您点击了：取消"; };
msgPopup.ShowWIndow();
}
这样，一个自定义的消息提示框就完成了。。。
还有另一种不需要用户干预自己消失的提示框我们下期再约。
谢谢观赏！