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

2023-10-22 14:54:34

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

码农公寓

相关文章