重新想象 Windows 8 Store Apps (69) - 其它: 自定義啟動屏幕, 程序的運行位置, 保持屏幕的點亮狀態, MessageDialog, PopupMenu

本文轉載自查看原文 2013-11-07 08:04 2983 Windows Store Apps

作者：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
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。