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

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

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

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

做出来的效果图：

【代码】

XAML【MainPage.xaml】：

 <Grid Background="#3d4ba4">

         <ContentDialog x:Name="termsOfUseContentDialog"
           Background="Transparent" BorderBrush="Transparent"

            >
             <Grid CornerRadius="" Background="White" Width="" Height="">
                 <StackPanel Margin="20,20,20,54">
                     <Image Source="Assets/moren_hashiqi_thumb.png" Stretch="None"/>
                     <Grid Height=""></Grid>
                     <TextBlock Text="Wow... What is your name?" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     <TextBlock Text="Kudou Shinichi,Programmer and " VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     <TextBlock Text="Detective!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                 </StackPanel>
                 <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
                     <Border Height="" Width="" BorderBrush="#efefef" BorderThickness="0,1,0,0">
                         <TextBlock Text="IKnorite" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     </Border>
                     <Border Height="" Width="" BorderBrush="#efefef" BorderThickness="1,1,0,0">
                         <TextBlock Text="Wait,what?" Foreground="#2d7abb" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     </Border>
                 </StackPanel>
             </Grid>

         </ContentDialog>

             <Grid VerticalAlignment="Bottom">
                 <Button Click="button_Click" x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="36,35,0,0" VerticalAlignment="Top"/>
             </Grid>

     </Grid>

前台XAML代码

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

 private async void button_Click(object sender, RoutedEventArgs e)
         {
             //弹出提示框
             await termsOfUseContentDialog.ShowAsync();

         }

后台代码

【小笔记】

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

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

            //test();【报错】
        }

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

但是却可以这样用：

  public MainPage()
         {
             this.InitializeComponent();
             test();//ok
         }

         public async void test()
         {
             ContentDialog content_dialog = new ContentDialog()
             {
                 Title = "退出",
                 Content = "KudouShinichi",
                 PrimaryButtonText = "确定",
                 SecondaryButtonText = "取消",
                 FullSizeDesired = false,
             };

             content_dialog.PrimaryButtonClick += (_s, _e) => { };

             await content_dialog.ShowAsync();
         }