與眾不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl

[源碼下載]

與眾不同 windows phone (49) - 8.1 新增控件: 概述, ContentDialog, MapControl

作者：webabcd


介紹
與眾不同 windows phone 8.1 之 新增控件

• 概述
• ContentDialog - 對話框控件
• MapControl - 又一個地圖控件

示例
1、概述
Summary.xaml

<Page
    x:Class="Demo.Control.Summary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>

            <TextBlock TextWrapping="Wrap">
                <Run>1、新建 wp 項目時，有了 silverlight 版 wp 和 windows 版 wp 的區別，拋棄 silverlight 吧，以后只會有 Windows Runtime Apps</Run>
                <LineBreak />
                <Run>2、本系列僅以 windows 版 wp 為例，所有之前寫過的與 Windows Store Apps 相關的知識點都不會再寫，關於 Windows Store Apps 的知識點請參見《重新想象 Windows 8 Store Apps 系列文章》</Run>
                <LineBreak />
                <Run>3、大多數控件都是 wp 和 windows 通用的，另外 wp 有一些自己獨有的控件，后續會一一說明</Run>
            </TextBlock>

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

2、演示對話框控件的應用
ContentDialogDemo/CustomContentDialog.xaml

<ContentDialog
    x:Class="Demo.Control.ContentDialogDemo.CustomContentDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control.ContentDialogDemo"
    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" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
            <TextBlock.Text>
                content content content content content content content content content content content content content content
            </TextBlock.Text>
        </TextBlock>
    </StackPanel>
    
</ContentDialog>

ContentDialogDemo/CustomContentDialog.xaml.cs

/*
 * 自定義 ContentDialog
 */

using Windows.UI.Xaml.Controls;

namespace Demo.Control.ContentDialogDemo
{
    public sealed partial class CustomContentDialog : ContentDialog
    {
        public CustomContentDialog()
        {
            this.InitializeComponent();
        }

        private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            // 用戶點擊了第一個按鈕（在對話框的調用者中通過 ContentDialogResult 獲取用戶的行為）
        }

        private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            // 用戶點擊了第二個按鈕（在對話框的調用者中通過 ContentDialogResult 獲取用戶的行為）
        }
    }
}

ContentDialogDemo/Demo.xaml

<Page
    x:Class="Demo.Control.ContentDialogDemo.Demo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control.ContentDialogDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            
            <Button Name="btnShowDialog" Content="彈出一個標准的對話框" Click="btnShowDialog_Click" />

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

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

ContentDialogDemo/Demo.xaml.cs

/*
 * ContentDialog - 對話框控件（wp only）
 *     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 Demo.Control.ContentDialogDemo
{
    public sealed partial class Demo : Page
    {
        public Demo()
        {
            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 += "選擇了第一個按鈕\n";
            } 
            else if (result == ContentDialogResult.Secondary)
            {
                lblMsg.Text += "選擇了第二個按鈕\n";
            }
            else if (result == ContentDialogResult.None)
            {
                lblMsg.Text += "沒有選擇按鈕\n";
            }
        }

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

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


        // 彈出自定義對話框
        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 += "選擇了第一個按鈕\n";
            }
            else if (result == ContentDialogResult.Secondary)
            {
                lblMsg.Text += "選擇了第二個按鈕\n";
            }
            else if (result == ContentDialogResult.None)
            {
                lblMsg.Text += "沒有選擇按鈕\n";
            }
        }
    }
}

 
3、MapControl
MapControlDemo.xaml

<Page
    x:Class="Demo.Control.MapControlDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    
    xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps">

    <Grid>
        <StackPanel Orientation="Vertical">

            <TextBlock TextWrapping="Wrap">
                <Run>MapControl - 又一個地圖控件（Windows.UI.Xaml.Controls.Maps.MapControl）</Run>
                <LineBreak />
                <Run>這個地圖控件更靈活一些，其支持通過 tile 來顯示地圖，tile 的來源可以有三種，分別是：HttpMapTileDataSource, LocalMapTileDataSource, CustomMapTileDataSource</Run>
            </TextBlock>

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

MapControlDemo.xaml.cs

/*
 * MapControl - 又一個地圖控件（Windows.UI.Xaml.Controls.Maps.MapControl）
 * 
 * 這個地圖控件更靈活一些，其支持通過 tile 來顯示地圖，tile 的來源可以有三種，分別是：HttpMapTileDataSource, LocalMapTileDataSource, CustomMapTileDataSource
 * 
 */

using Windows.UI.Xaml.Controls;

namespace Demo.Control
{
    public sealed partial class MapControlDemo : Page
    {
        public MapControlDemo()
        {
            this.InitializeComponent();
        }
    }
}

OK
[源碼下載]