zoukankan      html  css  js  c++  java
  • UWP中的消息提示框(一)

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

  • 相关阅读:
    结巴分词 0.14 版发布,Python 中文分词库
    Lazarus 1.0.2 发布,Pascal 集成开发环境
    Android全屏 去除标题栏和状态栏
    服务器日志现 Android 4.2 传将添多项新特性
    Percona XtraBackup 2.0.3 发布
    长平狐 Android 强制设置横屏或竖屏 设置全屏
    NetBeans 7.3 Beta 发布,全新的 HTML5 支持
    CppDepend现在已经支持Linux
    GromJS 1.7.18 发布,服务器端的 JavaScript
    Apache OpenWebBeans 1.1.6 发布
  • 原文地址:https://www.cnblogs.com/helloblog/p/5191247.html
Copyright © 2011-2022 走看看