不管什么平台,应用内难免会出现一些消息提示框,下面就来聊聊我在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();
}

这样,一个自定义的消息提示框就完成了。。。

还有另一种不需要用户干预自己消失的提示框我们下期再约。

谢谢观赏!

UWP中的消息提示框(二)

UWP中的消息提示框(一)的更多相关文章

  1. UWP中的消息提示框(二)

    在UWP中的消息提示框(一)中介绍了一些常见的需要用户主动去干涉的一些消息提示框,接下来打算聊聊不需要用户主动去干涉的一些消息提示框.效果就是像双击退出的那种提示框. 先说说比较简单的吧,通过系统To ...

  2. 10wx.showToast消息提示框 wx.showModal模态对话框

    1==>wx.showToast 弹出层 在界面交互中 显示消息提示框 它是一个消失提示框 提示用户成功 或者失败等消息 <button size='mini' bindtap='hanl ...

  3. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  4. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

  5. 精美舒适的对话消息提示框--第三方开源--SweetAlertDialog

    SweetAlertDialog(sweet-alert-dialog)是一个套制作精美.动画效果出色生动的Android对话.消息提示框 SweetAlertDialog(sweet-alert-d ...

  6. Android消息提示框Toast

    Android消息提示框Toast Toast是Android中一种简易的消息提示框.和Dialog不一样的是,Toast是没有焦点的,toast提示框不能被用户点击,而且Toast显示的时间有限,t ...

  7. Android开发 ---构建对话框Builder对象,消息提示框、列表对话框、单选提示框、多选提示框、日期/时间对话框、进度条对话框、自定义对话框、投影

    效果图: 1.activity_main.xml 描述: a.定义了一个消息提示框按钮 点击按钮弹出消息 b.定义了一个选择城市的输入框 点击按钮选择城市 c.定义了一个单选提示框按钮 点击按钮选择某 ...

  8. easyui 消息提示框

    1.浏览器消息提示框 浏览器弹出框,可以在浏览器设置中被屏蔽掉,导致效果失效 alert() 2.easyui 框架提供的消息框 easyui 框架自带的消息框,不可以被屏蔽. $.messager. ...

  9. wpf实现仿qq消息提示框

    原文:wpf实现仿qq消息提示框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...

随机推荐

  1. TensorFlow 学习(十三)—— tf.app.flags

    flags = tf.app.flags FLAGS = flags.FLAGS flags.DEFINE_integer('num_hidden_layers', 3, 'number of hid ...

  2. Linux之定时任务Crond介绍

    Linux之定时任务 定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种服务或软件,一般情况下,我们安装完Centos5/6 linux操作系统之后,默认便 ...

  3. TensorFlow 学习(六) —— TensorFlow 与 numpy 的交互

    1. 将 numpy 下的多维数组(ndarray)转化为 tensor a = np.zeros((3, 3)) ta = tf.convert_to_tensor(a) with tf.Sessi ...

  4. 【心情】2016ICPC青岛站打铁记

    Day0 下午到的青岛; 然后就在下面这两个地方转了很久:一直找不到公交站台 路上还看到了一个类似堡垒的东西:感觉屌屌的. 然后在落日的余晖下:我们找到了公交站台; 路上不知道他们在讨论什么:GPS什 ...

  5. 卷积神经网络(CNN)的细节问题(滤波器的大小选择)

    0. 滤波器的大小选择 大部分卷积神经网络都会采用逐层递增(1⇒ 3 ⇒ 5 ⇒ 7)的方式. 每经过一次池化层,卷积层过滤器的深度都会乘以 2: 1. 权值共享:减轻过拟合 & 降低计算量 ...

  6. hadoop 集群及hbase集群的pid文件存放位置

    一.当hbase集群和hadoop集群停了做一些配置调整,结果执行stop-all.sh的时候无法停止集群, 提示no datanode,no namenode等等之类的信息, 查看stop-all. ...

  7. Matlab Tricks(三十) —— 任意区间的均匀分布

    matlab 的内置函数 rand返回的是 0-1 区间上的均匀分布,rand的参数多是用于设置返回的矩阵的维度大小. 如果要得到 (a, b) 区间上的均匀分布,只需对其做简单的线性变换即可: a+ ...

  8. C/C++ 常量的定义与应用(编程中的常量)

    常量一般定义为全局变量,且大写: 1. 字符串常量 const string EXPAND_X = "X+YF"; const string EXPAND_Y = "FX ...

  9. Windows SublimeText内使用NDK编译Android so(不用cygwin)

    測试环境: sublime text version 2.0.2, build 2221 和 sublime text stable channel, build 3065 (version3) Wi ...

  10. 像职业选手样编码:地道Python

    Code Like a Pythonista: Idiomatic Python David Goodger goodger@python.org http://python.net/~goodger ...