与众不同 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
[源码下载]