重新想象 Windows 8 Store Apps (69)

[源码下载]

重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu

作者：webabcd


介绍
重新想象 Windows 8 Store Apps 之 其它

• 自定义启动屏幕
• 检查当前呈现的应用程序是运行在本地还是运行在远程桌面或模拟器
• 保持屏幕的点亮状态
• MessageDialog - 信息对话框
• PopupMenu - 上下文菜单

示例
1、演示如何自定义启动屏幕
Feature/MySplashScreen.xaml

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

    <Grid Background="#1b4b7c">

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="180"/>
        </Grid.RowDefinitions>

        <Canvas Grid.Row="0">
            <Image x:Name="splashImage" Source="/Assets/SplashScreen.png" />
        </Canvas>
        <StackPanel Grid.Row="1" HorizontalAlignment="Center">
            <ProgressRing IsActive="True" />
            <TextBlock Name="lblMsg" Text="我是自定义启动页，1 秒后跳转到主页" FontSize="14.667" Margin="0 10 0 0" />
        </StackPanel>
        
    </Grid>
</Page>

Feature/MySplashScreen.xaml.cs

/*
 * 演示如何自定义启动屏幕
 *     关联代码：App.xaml.cs 中的 override void OnLaunched(LaunchActivatedEventArgs args)
 * 
 * 应用场景：
 * 1、app 的启动屏幕就是一个图片加一个背景色，其无法更改，
 * 2、但是启动屏幕过后可以参照启动屏幕做一个内容更丰富的自定义启动屏幕
 * 3、在自定义启动屏幕显示后，可以做一些程序的初始化工作，初始化完成后再进入主程序
 */

using System.Threading.Tasks;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Feature
{
    public sealed partial class MySplashScreen : Page
    {
        /*
         * SplashScreen - app 的启动屏幕对象，在 Application 中的若干事件处理器中的事件参数中均可获得
         *     ImageLocation - app 的启动屏幕的图片的位置信息，返回 Rect 类型对象
         *     Dismissed - app 的启动屏幕关闭时所触发的事件
         */

        // app 启动屏幕的相关信息
        private SplashScreen _splashScreen;

        public MySplashScreen()
        {
            this.InitializeComponent();

            lblMsg.Text = "自定义 app 的启动屏幕，打开 app 时可看到此页面的演示";
        }

        // LaunchActivatedEventArgs 来源于 App.xaml.cs 中的 override void OnLaunched(LaunchActivatedEventArgs args)
        public MySplashScreen(LaunchActivatedEventArgs args)
        {
            this.InitializeComponent();

            ImplementCustomSplashScreen(args);
        }

        private async void ImplementCustomSplashScreen(LaunchActivatedEventArgs args)
        {
            // 窗口尺寸发生改变时，重新调整自定义启动屏幕
            Window.Current.SizeChanged += Current_SizeChanged;

            // 获取 app 的启动屏幕的相关信息
            _splashScreen = args.SplashScreen;

            // app 的启动屏幕关闭时所触发的事件
            _splashScreen.Dismissed += splashScreen_Dismissed;

            // 获取 app 启动屏幕的图片的位置，并按此位置调整自定义启动屏幕的图片的位置
            Rect splashImageRect = _splashScreen.ImageLocation;
            splashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            splashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            splashImage.Height = splashImageRect.Height;
            splashImage.Width = splashImageRect.Width;

            await Task.Delay(1000);

            // 关掉自定义启动屏幕，跳转到程序主页面
            var rootFrame = new Frame();
            rootFrame.Navigate(typeof(MainPage), args);
            Window.Current.Content = rootFrame;
            Window.Current.Activate();
        }

        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            // 获取 app 启动屏幕的图片的最新位置，并按此位置调整自定义启动屏幕的图片的位置
            Rect splashImageRect = _splashScreen.ImageLocation;
            splashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            splashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            splashImage.Height = splashImageRect.Height;
            splashImage.Width = splashImageRect.Width;
        }

        void splashScreen_Dismissed(SplashScreen sender, object args)
        {

        }
    }
}

App.xaml.cs

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    // 显示自定义启动屏幕，参见 Feature/MySplashScreen.xaml.cs
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        XamlDemo.Feature.MySplashScreen mySplashScreen = new XamlDemo.Feature.MySplashScreen(args);
        Window.Current.Content = mySplashScreen;
    }

    // 确保当前窗口处于活动状态
    Window.Current.Activate();
}

2、演示如何检查当前呈现的应用程序是运行在本地还是运行在远程桌面或模拟器
Feature/CheckRunningSource.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Feature
{
    public sealed partial class CheckRunningSource : Page
    {
        public CheckRunningSource()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /*
             * 如果当前呈现给用户的应用程序运行在本地，则 Windows.System.RemoteDesktop.InteractiveSession.IsRemote 为 false
             * 如果当前呈现给用户的应用程序运行在远程桌面或运行在模拟器，则 Windows.System.RemoteDesktop.InteractiveSession.IsRemote 为 true
             */
            lblMsg.Text = "Windows.System.RemoteDesktop.InteractiveSession.IsRemote: " + Windows.System.RemoteDesktop.InteractiveSession.IsRemote;
        }
    }
}

3、演示如何通过 DisplayRequest 来保持屏幕的点亮状态
Feature/KeepDisplay.xaml

<Page
    x:Class="XamlDemo.Feature.KeepDisplay"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Feature"
    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="120 0 0 0">

            <MediaElement Name="mediaElement" AutoPlay="False" Source="http://media.w3.org/2010/05/sintel/trailer.mp4" PosterSource="/Assets/Logo.png" Width="480" Height="320" HorizontalAlignment="Left" VerticalAlignment="Top" />

            <Button Name="btnPlay" Content="play" Click="btnPlay_Click" Margin="0 10 0 0" />

            <Button Name="btnPause" Content="pause" Click="btnPause_Click" Margin="0 10 0 0" />
            
            <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0" />

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

Feature/KeepDisplay.xaml.cs

/*
 * 演示如何通过 DisplayRequest 来保持屏幕的点亮状态
 * 
 * 适用场景举例：
 * 用户在观看视频时，在视频播放中我们是希望屏幕保持点亮的，但是如果用户暂停了视频的播放，我们则是希望不保持屏幕的点亮
 */

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

namespace XamlDemo.Feature
{
    public sealed partial class KeepDisplay : Page
    {
        private DisplayRequest dispRequest = null;

        public KeepDisplay()
        {
            this.InitializeComponent();
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            mediaElement.Play();

            if (dispRequest == null)
            {
                // 用户观看视频，需要保持屏幕的点亮状态
                dispRequest = new DisplayRequest();
                dispRequest.RequestActive(); // 激活显示请求

                lblMsg.Text += "屏幕会保持点亮状态";
                lblMsg.Text += Environment.NewLine;
            }
        }

        private void btnPause_Click(object sender, RoutedEventArgs e)
        {
            mediaElement.Pause();

            if (dispRequest != null)
            {
                // 用户暂停了视频，则不需要保持屏幕的点亮状态
                dispRequest.RequestRelease(); // 停用显示请求
                dispRequest = null;

                lblMsg.Text += "屏幕不会保持点亮状态";
                lblMsg.Text += Environment.NewLine;
            }
        }
    }
}

4、演示 MessageDialog 的应用
Feature/MessageDialogDemo.xaml

<Page
    x:Class="XamlDemo.Feature.MessageDialogDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Feature"
    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="120 0 0 0">

            <TextBlock Name="lblMsg" FontSize="14.667" />
            
            <Button Name="btnShowMessageDialogSimple" Content="弹出一个简单的 MessageDialog" Click="btnShowMessageDialogSimple_Click_1" Margin="0 10 0 0" />

            <Button Name="btnShowMessageDialogCustomCommand" Content="弹出一个自定义命令按钮的 MessageDialog" Click="btnShowMessageDialogCustomCommand_Click_1" Margin="0 10 0 0" />

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

Feature/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 XamlDemo.Feature
{
    public sealed partial class MessageDialogDemo : Page
    {
        public MessageDialogDemo()
        {
            this.InitializeComponent();
        }

        // 弹出一个简单的 MessageDialog
        private async void btnShowMessageDialogSimple_Click_1(object sender, RoutedEventArgs e)
        {
            MessageDialog messageDialog = new MessageDialog("内容", "标题");

            await messageDialog.ShowAsync();
        }

        // 弹出一个自定义命令按钮的 MessageDialog
        private async void btnShowMessageDialogCustomCommand_Click_1(object sender, RoutedEventArgs e)
        {
            MessageDialog messageDialog = new MessageDialog("内容", "标题");

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

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

            messageDialog.Commands.Add(new UICommand("自定义命令按钮3", (command) =>
            {
                lblMsg.Text = string.Format("label:{0}, commandId:{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("label:{0}, commandId:{1}", chosenCommand.Label, chosenCommand.Id);
        }
    }
}

5、演示 PopupMenu 的应用
Feature/PopupMenuDemo.xaml

<Page
    x:Class="XamlDemo.Feature.PopupMenuDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Feature"
    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="120 0 0 0">

            <TextBlock Name="lblMsg" FontSize="14.667" />
            
            <TextBlock Name="lblDemo" FontSize="26.667" Margin="0 10 0 0">
                右键我或press-and-hold我，以弹出 PopupMenu
            </TextBlock>
            
        </StackPanel>
    </Grid>
</Page>

Feature/PopupMenuDemo.xaml.cs

/*
 * PopupMenu - 上下文菜单
 *     Commands - 命令按钮集合，返回 IList<IUICommand> 类型的数据
 *     ShowAsync(), ShowForSelectionAsync() - 在指定的位置显示上下文菜单，并返回用户激发的命令
 *     
 * IUICommand - 命令
 *     Label - 显示的文字
 *     Id - 参数
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using XamlDemo.Common;

namespace XamlDemo.Feature
{
    public sealed partial class PopupMenuDemo : Page
    {
        public PopupMenuDemo()
        {
            this.InitializeComponent();

            lblDemo.RightTapped += lblDemo_RightTapped;
        }

        async void lblDemo_RightTapped(object sender, RightTappedRoutedEventArgs e)
        {
            PopupMenu menu = new PopupMenu();

            menu.Commands.Add(new UICommand("item1", (command) =>
            {
                lblMsg.Text = string.Format("label:{0}, commandId:{1}", command.Label, command.Id);
            }, "param1"));

            menu.Commands.Add(new UICommand("item2", (command) =>
            {
                lblMsg.Text = string.Format("label:{0}, commandId:{1}", command.Label, command.Id);
            }, "param2"));

            // 分隔符
            menu.Commands.Add(new UICommandSeparator());

            menu.Commands.Add(new UICommand("item3", (command) =>
            {
                lblMsg.Text = string.Format("label:{0}, commandId:{1}", command.Label, command.Id);
            }, "param3"));


            // 在指定的位置显示上下文菜单，并返回用户激发的命令
            IUICommand chosenCommand = await menu.ShowForSelectionAsync(Helper.GetElementRect((FrameworkElement)sender), Placement.Below);
            if (chosenCommand == null) // 用户没有在上下文菜单中激发任何命令
            {
                lblMsg.Text = "用户没有选择任何命令";
            }
            else
            {
                lblMsg.Text += Environment.NewLine;
                lblMsg.Text += string.Format("label:{0}, commandId:{1}", chosenCommand.Label, chosenCommand.Id);
            }
        }
    }
}

OK
[源码下载]