uwp - ContentDialog - 自定义仿iphone提示框，提示框美化

原文:uwp - ContentDialog - 自定义仿iphone提示框，提示框美化

为了实现我想要的效果花费了我很长时间，唉，当初英语不好好学，翻官网翻了半天才找到，分享给刚入门的新手。

首先看一张图片示例，我们要模仿的dialog就是长这样的：

做出来的效果图：

【代码】

XAML【MainPage.xaml】：

 1 <Grid Background="#3d4ba4">
 2
 3         <ContentDialog x:Name="termsOfUseContentDialog"
 4           Background="Transparent" BorderBrush="Transparent"
 5
 6            >
 7             <Grid CornerRadius="8" Background="White" Width="284" Height="176">
 8                 <StackPanel Margin="20,20,20,54">
 9                     <Image Source="Assets/moren_hashiqi_thumb.png" Stretch="None"/>
10                     <Grid Height="15"></Grid>
11                     <TextBlock Text="Wow... What is your name?" HorizontalAlignment="Center" VerticalAlignment="Center"/>
12                     <TextBlock Text="Kudou Shinichi,Programmer and " VerticalAlignment="Center" HorizontalAlignment="Center"/>
13                     <TextBlock Text="Detective!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
14                 </StackPanel>
15                 <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
16                     <Border Height="44" Width="142" BorderBrush="#efefef" BorderThickness="0,1,0,0">
17                         <TextBlock Text="IKnorite" HorizontalAlignment="Center" VerticalAlignment="Center"/>
18                     </Border>
19                     <Border Height="44" Width="142" BorderBrush="#efefef" BorderThickness="1,1,0,0">
20                         <TextBlock Text="Wait,what?" Foreground="#2d7abb" HorizontalAlignment="Center" VerticalAlignment="Center"/>
21                     </Border>
22                 </StackPanel>
23             </Grid>
24
25         </ContentDialog>
26
27
28             <Grid VerticalAlignment="Bottom">
29                 <Button Click="button_Click" x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="36,35,0,0" VerticalAlignment="Top"/>
30             </Grid>
31
32
33
34     </Grid>

前台XAML代码

后台【MainPage.xaml.cs】没什么代码就一个事件监听：

1 private async void button_Click(object sender, RoutedEventArgs e)
2         {
3             //弹出提示框
4             await termsOfUseContentDialog.ShowAsync();
5
6         }

后台代码

【小笔记】

自定义在Page页面的ContentDialog不能这样用：

public MainPage(){this.InitializeComponent();//await termsOfUseContentDialog.ShowAsync();【会报错】//test();【报错】}public async void test(){//await termsOfUseContentDialog.ShowAsync();【会报错】}

但是却可以这样用：

 1  public MainPage()
 2         {
 3             this.InitializeComponent();
 4             test();//ok
 5         }
 6
 7         public async void test()
 8         {
 9             ContentDialog content_dialog = new ContentDialog()
10             {
11                 Title = "退出",
12                 Content = "KudouShinichi",
13                 PrimaryButtonText = "确定",
14                 SecondaryButtonText = "取消",
15                 FullSizeDesired = false,
16             };
17
18             content_dialog.PrimaryButtonClick += (_s, _e) => { };
19
20             await content_dialog.ShowAsync();
21         }

posted on 2018-11-07 00:27 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/9919877.html

uwp - ContentDialog - 自定义仿iphone提示框，提示框美化相关推荐

Qt 自定义仿iphone开关按钮
在做项目时,经常用到QPushButton,这次想设计成类似iphone开关按钮的样式.通过自定义Button类继承QPushButton类,重写paintEvent方法重绘按钮图形和重写mouseP ...
自定义Dialog提示框高仿QQ浏览器版本更新提示框
前言: 今天是5月7号,真的好久没有写博客了,时光匆匆,我总感觉自己忙忙碌碌似的,静想片刻确实是挺忙的,但是在繁忙当中却缺少了总结归纳,相信大家都知道总结归纳的重要性了,今天我要和大家分享我的自定义D ...
ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 js/jQuery实现类似百度搜索功能 #container { position: absolute; left: ...
android 自定义滑动删除,Android_Android ListView实现仿iPhone实现左滑删除按钮的简单实例，需要自定义ListView。这里就交Fl - phpStudy...
Android ListView实现仿iPhone实现左滑删除按钮的简单实例需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Ov ...
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
使用JQuery完成仿百度的信息提示
使用JQuery完成仿百度的信息提示 1.需求分析在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的). 2.步骤分析 1.创建一个数据库和表: 2.设计一个 ...
android--Spinne下拉列表视图r、ArrayAdapter数组适配器、SimpleAdapte简单适配器r、AutoCompleteTextView自动提示完成文本框
在学习这些之前呢,我们先来了解一下关于Spinner.ArrayAdapter.SimpleAdapter.AutoCompleteTextView的作用: Spinner :下拉列表视图 ,他的父类 ...
android接收消息后提示音,Android仿微信新消息提示音
怕有些人不知道怎么进入微信的新消息提示音功能,我这里说下操作步骤: 打开微信----我---设置---新消息提醒---新消息提示音. 经过以上的步骤就进入了这样的界面具体实现的步骤. 难点之一:获取 ...
html5自动提示插件,jquery万能浮动框提示插件
特效描述:jquery 万能浮动框提示.jquery万能浮动框提示插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 jQuery万能浮动框插件测试一.加载页面上元素默认rel加 ...
html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码代码如下: $(function() { $("a[title] ...

uwp - ContentDialog - 自定义仿iphone提示框，提示框美化

uwp - ContentDialog - 自定义仿iphone提示框，提示框美化相关推荐

最新文章

热门文章