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

简介: 原文:重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu[源码下载] 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序...
原文: 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu

[源码下载]


重新想象 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
[源码下载]

目录
相关文章
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
12月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
249 0
|
7月前
|
人工智能 小程序 搜索推荐
【一步步开发AI运动APP】十二、自定义扩展新运动项目2
本文介绍如何基于uni-app运动识别插件实现“双手并举”自定义扩展运动,涵盖动作拆解、姿态检测规则构建及运动分析器代码实现,助力开发者打造个性化AI运动APP。
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
538 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
人工智能 小程序 API
【一步步开发AI运动APP】九、自定义姿态动作识别检测——之关键点追踪
本文介绍了【一步步开发AI运动APP】系列中的关键点追踪技术。此前分享的系列博文助力开发者打造了多种AI健身场景的小程序,而新系列将聚焦性能更优的AI运动APP开发。文章重点讲解了“关键点位变化追踪”能力,适用于动态运动(如跳跃)分析,弥补了静态姿态检测的不足。通过`pose-calc`插件,开发者可设置关键点(如鼻子)、追踪方向(X或Y轴)及变化幅度。示例代码展示了如何在`uni-app`框架中使用`createPointTracker`实现关键点追踪,并结合人体识别结果完成动态分析。具体实现可参考文档与Demo示例。
|
11月前
《仿盒马》app开发技术分享-- 自定义标题栏&商品详情初探(9)
上一节我们实现了顶部toolbar的地址选择,会员码展示,首页的静态页面就先告一段落,这节我们来实现商品列表item的点击传值、自定义标题栏。
132 0
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
532 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
开发框架 缓存 搜索推荐
PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
嗨,大家好,我是小华同学。PiliPala 是一个基于 Flutter 开发的 BiliBili 第三方客户端,提供流畅、个性化的使用体验。核心功能包括视频浏览与推荐、用户互动、丰富的播放设置、多维度搜索和个性化主题等。相比官方客户端,PiliPala 功能更丰富、性能更优、界面更美观。
1091 14
|
人工智能 小程序 API
【一步步开发AI运动APP】八、自定义姿态动作识别检测——之姿态相似度比较
本文介绍了如何通过姿态相似度比较技术简化AI运动应用开发。相比手动配置规则,插件`pose-calc`提供的姿态相似度比较器可快速评估两组人体关键点的整体与局部相似度,降低开发者工作量。文章还展示了在`uni-app`框架下调用姿态比较器的示例代码,并提供了桌面辅助工具以帮助提取标准动作样本,助力开发者打造性能更优、体验更好的AI运动APP。
|
移动开发 小程序 测试技术
自定义多级联动选择器指南(uni-app)
在本文中,探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持,可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
1704 1
自定义多级联动选择器指南(uni-app)