背水一戰 Windows 10 (37) - 控制項（彈出類）: MessageDialog, ContentDialog

背水一戰 Windows 10 之控制項（彈出類）: MessageDialog, ContentDialog ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（彈出類）

MessageDialog
ContentDialog

示例
1、MessageDialog 的示例
Controls/FlyoutControl/MessageDialogDemo.xaml

<Page
    x:Class="Windows10.Controls.FlyoutControl.MessageDialogDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.FlyoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <Button Name="btnShowMessageDialogSimple" Margin="5" Content="彈出一個簡單的 MessageDialog" Click="btnShowMessageDialogSimple_Click" />

            <Button Name="btnShowMessageDialogCustomCommand" Margin="5" Content="彈出一個自定義命令按鈕的 MessageDialog" Click="btnShowMessageDialogCustomCommand_Click" />

        </StackPanel>
    </Grid>
</Page>

Controls/FlyoutControl/MessageDialogDemo.xaml.cs

/*
 * MessageDialog - 信息對話框（未繼承任何類）
 *     Content - 內容
 *     Title - 標題
 *     Options - 選項（Windows.UI.Popups.MessageDialogOptions 枚舉）
 *         None - 正常，預設值
 *         AcceptUserInputAfterDelay - 為避免用戶誤操作，彈出對話框後短時間內禁止單擊命令按鈕
 *     Commands - 對話框的命令欄中的命令集合，返回 IList<IUICommand> 類型的數據
 *     DefaultCommandIndex - 按“enter”鍵後，激發此索引位置的命令
 *     CancelCommandIndex - 按“esc”鍵後，激發此索引位置的命令
 *     ShowAsync() - 顯示對話框，並返回用戶激發的命令
 *     
 * IUICommand - 命令
 *     Label - 顯示的文字
 *     Id - 參數
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class MessageDialogDemo : Page
    {
        public MessageDialogDemo()
        {
            this.InitializeComponent();
        }

        // 彈出一個簡單的 MessageDialog
        private async void btnShowMessageDialogSimple_Click(object sender, RoutedEventArgs e)
        {
            MessageDialog messageDialog = new MessageDialog("內容", "標題");

            await messageDialog.ShowAsync();
        }

        // 彈出一個自定義命令按鈕的 MessageDialog
        private async void btnShowMessageDialogCustomCommand_Click(object sender, RoutedEventArgs e)
        {
            MessageDialog messageDialog = new MessageDialog("內容", "標題");

            messageDialog.Commands.Add
            (
                new UICommand
                (
                    "自定義命令按鈕1",
                    (command) =>
                    {
                        lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);
                    },
                    "param1"
                )
            );

            messageDialog.Commands.Add
            (
                new UICommand
                (
                    "自定義命令按鈕2", 
                    (command) =>
                    {
                        lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);
                    }, 
                    "param2"
                )
            );

            messageDialog.Commands.Add
            (
                new UICommand
                (
                    "自定義命令按鈕3", 
                    (command) =>
                    {
                        lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);
                    }, 
                    "param3"
                )
            );

            messageDialog.DefaultCommandIndex = 0; // 按“enter”鍵後，激發第 1 個命令
            messageDialog.CancelCommandIndex = 2; // 按“esc”鍵後，激發第 3 個命令
            messageDialog.Options = MessageDialogOptions.AcceptUserInputAfterDelay; // 對話框彈出後，短時間內禁止用戶單擊命令按鈕，以防止用戶的誤操作

            // 顯示對話框，並返回用戶激發的命令
            IUICommand chosenCommand = await messageDialog.ShowAsync();

            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += string.Format("result label:{0}, id:{1}", chosenCommand.Label, chosenCommand.Id);
        }
    }
}

2、ContentDialog 的示例
Controls/FlyoutControl/CustomContentDialog.xaml

<ContentDialog
    x:Class="Windows10.Controls.FlyoutControl.CustomContentDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.FlyoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    Title="custom dialog title"
    PrimaryButtonText="primary button"  
    SecondaryButtonText="secondary button"
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
    SecondaryButtonClick="ContentDialog_SecondaryButtonClick">

    <!--以下為自定義對話框的標題-->
    <ContentDialog.TitleTemplate>
        <DataTemplate>
            <TextBlock Text="custom dialog title" Foreground="Red" />
        </DataTemplate>
    </ContentDialog.TitleTemplate>

    <!--以下為自定義對話框的內容-->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <TextBox Name="email" Header="Email address"/>
        <PasswordBox  Name="password" Header="Password"/>
        <CheckBox Name="showPassword" Content="Show password"/>

        <TextBlock Name="body" TextWrapping="Wrap">
            <TextBlock.Text>
                content content content content content content content content content content content content content content
            </TextBlock.Text>
        </TextBlock>
    </StackPanel>
    
</ContentDialog>

Controls/FlyoutControl/CustomContentDialog.xaml.cs

/*
 * 自定義 ContentDialog
 */

using System.Threading.Tasks;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class CustomContentDialog : ContentDialog
    {
        public CustomContentDialog()
        {
            this.InitializeComponent();
        }

        // 用戶點擊了第一個按鈕
        private async void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            // 通過 GetDeferral() 來等待長時任務，否則即使 await 了也不會等
            ContentDialogButtonClickDeferral deferral = args.GetDeferral();
            try
            {
                await Task.Delay(1);
            }
            finally
            {
                // 完成非同步操作
                deferral.Complete();
            }

            // 使此事件可以冒泡（當然 args.Cancel 預設就是 false）
            args.Cancel = false;
        }

        // 用戶點擊了第二個按鈕
        private async void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            // 通過 GetDeferral() 來等待長時任務，否則即使 await 了也不會等
            ContentDialogButtonClickDeferral deferral = args.GetDeferral();
            try
            {
                await Task.Delay(1);
            }
            finally
            {
                // 完成非同步操作
                deferral.Complete();
            }

            // 使此事件可以冒泡（當然 args.Cancel 預設就是 false）
            args.Cancel = false;
        }
    }
}

Controls/FlyoutControl/ContentDialogDemo.xaml

<Page
    x:Class="Windows10.Controls.FlyoutControl.ContentDialogDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.FlyoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="btnShowDialog" Margin="5" Content="彈出一個標準的對話框" Click="btnShowDialog_Click" />

            <Button Name="btnShowCustomDialog" Margin="5" Content="彈出一個自定義的對話框" Click="btnShowCustomDialog_Click" />

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/FlyoutControl/ContentDialogDemo.xaml.cs

/*
 * ContentDialog - 內容對話框（繼承自 ContentControl, 請參見 /Controls/BaseControl/ContentControlDemo/）
 *     FullSizeDesired - 是否全屏彈出對話框
 *     Title, TitleTemplate - 對話框的標題（可以自定義樣式）
 *     Content, ContentTemplate - 對話框的內容（可以自定義樣式）
 *     PrimaryButtonText - 對話框第一個按鈕顯示的文本
 *     SecondaryButtonText - 對話框第二個按鈕顯示的文本
 *     PrimaryButtonCommand, PrimaryButtonCommandParameter, SecondaryButtonCommand, SecondaryButtonCommandParameter - 按鈕命令及命令參數
 *     
 *     PrimaryButtonClick - 第一個按鈕按下時觸發的事件
 *     SecondaryButtonClick - 第二個按鈕按下時觸發的事件
 *     Closed, Closing, Opened - 顧名思義的一些事件
 *     
 *     ShowAsync() - 彈出對話框
 *     Hide() - 隱藏對話框
 *     
 * 
 * 註意：自定義的內容對話框參見 CustomContentDialog.xaml
 */

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class ContentDialogDemo : Page
    {
        public ContentDialogDemo()
        {
            this.InitializeComponent();
        }

        private async void btnShowDialog_Click(object sender, RoutedEventArgs e)
        {
            ContentDialog dialog = new ContentDialog()
            {
                Title = "dialog title",
                Content = "dialog content, dialog content, dialog content, dialog content, dialog content, dialog content, dialog content",
                FullSizeDesired = true,
                PrimaryButtonText = "PrimaryButton",
                SecondaryButtonText = "SecondaryButton"
            };

            dialog.PrimaryButtonClick += dialog_PrimaryButtonClick;
            dialog.SecondaryButtonClick += dialog_SecondaryButtonClick;

            // 彈出對話框，返回值為用戶的選擇結果
            /*
             * ContentDialogResult.Primary - 用戶選擇了第一個按鈕
             * ContentDialogResult.Secondary - 用戶選擇了第二個按鈕
             * ContentDialogResult.None - 用戶沒有選擇（按了系統的“返回”按鈕）
             */
            ContentDialogResult result = await dialog.ShowAsync();
            if (result == ContentDialogResult.Primary)
            {
                lblMsg.Text += "選擇了第一個按鈕";
                lblMsg.Text += Environment.NewLine;
            }
            else if (result == ContentDialogResult.Secondary)
            {
                lblMsg.Text += "選擇了第二個按鈕";
                lblMsg.Text += Environment.NewLine;
            }
            else if (result == ContentDialogResult.None)
            {
                lblMsg.Text += "沒有選擇按鈕";
                lblMsg.Text += Environment.NewLine;
            }
        }

        void dialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            lblMsg.Text += "點擊了第一個按鈕";
            lblMsg.Text += Environment.NewLine;
        }

        void dialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            lblMsg.Text += "點擊了第二個按鈕";
            lblMsg.Text += Environment.NewLine;
        }


        // 彈出自定義對話框
        async private void btnShowCustomDialog_Click(object sender, RoutedEventArgs e)
        {
            // 實例化自定義對話框
            CustomContentDialog contentDialog = new CustomContentDialog();

            // 彈出對話框，返回值為用戶的選擇結果
            /*
             * ContentDialogResult.Primary - 用戶選擇了第一個按鈕
             * ContentDialogResult.Secondary - 用戶選擇了第二個按鈕
             * ContentDialogResult.None - 用戶沒有選擇（按了系統的“返回”按鈕）
             */
            ContentDialogResult result = await contentDialog.ShowAsync();
            if (result == ContentDialogResult.Primary)
            {
                lblMsg.Text += "選擇了第一個按鈕";
                lblMsg.Text += Environment.NewLine;
            }
            else if (result == ContentDialogResult.Secondary)
            {
                lblMsg.Text += "選擇了第二個按鈕";
                lblMsg.Text += Environment.NewLine;
            }
            else if (result == ContentDialogResult.None)
            {
                lblMsg.Text += "沒有選擇按鈕";
                lblMsg.Text += Environment.NewLine;
            }
        }
    }
}

OK
[源碼下載]