背水一戰 Windows 10 (3) - UI: 視窗全屏, 視窗尺寸

背水一戰 Windows 10 之 UI: 視窗全屏, 視窗尺寸

作者：webabcd

介紹
背水一戰 Windows 10 之 UI

視窗全屏
視窗尺寸

示例
1、視窗全屏
UI/FullScreen.xaml

<Page
    x:Class="Windows10.UI.FullScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.UI"
    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="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

            <Button Name="btnFullScreen" Content="全屏/取消全屏" Click="btnFullScreen_Click" Margin="0 10 0 0" />

            <Button Name="btnShowStandardSystemOverlays" Content="在全屏狀態下，顯示系統 UI，比如標題欄和任務欄" Click="btnShowStandardSystemOverlays_Click" Margin="0 10 0 0" />

            <CheckBox Name="chkFullScreenSystemOverlayMode" Content="全屏狀態下的，系統邊緣手勢的響應模式 unchecked:FullScreenSystemOverlayMode.Standard, checked:FullScreenSystemOverlayMode.Minimal" Click="chkFullScreenSystemOverlayMode_Click" Margin="0,10,0,0" />

            <CheckBox Name="chkPreferredLaunchWindowingMode" Content="視窗的啟動模式 unchecked:ApplicationViewWindowingMode.Auto, unchecked:ApplicationViewWindowingMode.FullScreen" Click="chkPreferredLaunchWindowingMode_Click" Margin="0,10,0,0" />
            
        </StackPanel>
    </Grid>
</Page>

UI/FullScreen.xaml.cs

/*
 * 演示“視窗全屏”相關知識點
 *
 * ApplicationView - 用於操作視窗以及獲取視窗信息
 *     GetForCurrentView() - 返回 ApplicationView 實例
 */

using Windows.System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;

namespace Windows10.UI
{
    public sealed partial class FullScreen : Page
    {
        private MainPage _rootPage;

        public FullScreen()
        {
            this.InitializeComponent();

            this.Loaded += FullScreen_Loaded;
        }

        private void FullScreen_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * ApplicationView.PreferredLaunchWindowingMode - 視窗的啟動模式
             *     Auto - 系統自動決定
             *     PreferredLaunchViewSize - 由 ApplicationView.PreferredLaunchViewSize 決定（參見：UI/ScreenSize.xaml）
             *     FullScreen - 全屏啟動
             *
             * ApplicationView.GetForCurrentView().FullScreenSystemOverlayMode - 全屏狀態下的，系統邊緣手勢的響應模式
             *     Standard - 標準方式。比如滑鼠移動到頂端顯示標題欄，移動到底端顯示任務欄
             *     Minimal - 最小方式。比如滑鼠移動到頂端顯示一個小的臨時 UI，移動到底端顯示一個小的臨時 UI，點擊這個臨時 UI 時再顯示標題欄或任務欄
             */

            // unchecked:FullScreenSystemOverlayMode.Standard, checked:FullScreenSystemOverlayMode.Minimal
            chkFullScreenSystemOverlayMode.IsChecked = ApplicationView.GetForCurrentView().FullScreenSystemOverlayMode == FullScreenSystemOverlayMode.Minimal;

            // unchecked:ApplicationViewWindowingMode.Auto, unchecked:ApplicationViewWindowingMode.FullScreen
            chkPreferredLaunchWindowingMode.IsChecked = ApplicationView.PreferredLaunchWindowingMode == ApplicationViewWindowingMode.FullScreen;
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            _rootPage = MainPage.Current;
            _rootPage.KeyDown += _rootPage_KeyDown;
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            _rootPage.KeyDown -= _rootPage_KeyDown;
        }

        private void _rootPage_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            // 判斷是否按下了 escape 鍵
            if (e.Key == VirtualKey.Escape)
            {
                var view = ApplicationView.GetForCurrentView();
                if (view.IsFullScreenMode)
                {
                    // 退出全屏狀態
                    view.ExitFullScreenMode();
                }
            }
        }

        private void btnFullScreen_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView view = ApplicationView.GetForCurrentView();
            // 判斷當前是否是全屏模式
            if (view.IsFullScreenMode)
            {
                // 退出全屏模式
                view.ExitFullScreenMode();
                lblMsg.Text = "退出全屏模式";
            }
            else
            {
                // 嘗試進入全屏模式
                bool isSuccess = view.TryEnterFullScreenMode();
                if (isSuccess)
                {
                    lblMsg.Text = "進入全屏模式";
                }
                else
                {
                    lblMsg.Text = "嘗試進入全屏模式失敗";
                }
            }
        }

        private void btnShowStandardSystemOverlays_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView view = ApplicationView.GetForCurrentView();
            // 在全屏狀態下，是否顯示系統 UI，比如標題欄和任務欄
            view.ShowStandardSystemOverlays();
        }

        private void chkFullScreenSystemOverlayMode_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView view = ApplicationView.GetForCurrentView(); 
            view.FullScreenSystemOverlayMode = chkFullScreenSystemOverlayMode.IsChecked.Value ? FullScreenSystemOverlayMode.Minimal : FullScreenSystemOverlayMode.Standard;
        }

        private void chkPreferredLaunchWindowingMode_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView.PreferredLaunchWindowingMode = chkPreferredLaunchWindowingMode.IsChecked.Value ? ApplicationViewWindowingMode.FullScreen : ApplicationViewWindowingMode.Auto;
        }
    }
}

2、視窗尺寸
UI/ScreenSize.xaml

<Page
    x:Class="Windows10.UI.ScreenSize"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.UI"
    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="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

            <Button Name="btnChangeSize" Content="嘗試改變視窗大小" Click="btnChangeSize_Click" Margin="0 10 0 0" />

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

UI/ScreenSize.xaml.cs

/*
 * 演示“視窗尺寸”相關知識點
 *
 * ApplicationView - 用於操作視窗以及獲取視窗信息
 *     GetForCurrentView() - 返回 ApplicationView 實例
 */

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

namespace Windows10.UI
{
    public sealed partial class ScreenSize : Page
    {
        public ScreenSize()
        {
            this.InitializeComponent();

            this.Loaded += ScreenSize_Loaded;
        }

        private void ScreenSize_Loaded(object sender, RoutedEventArgs e)
        {
            // Window.Current.Bounds - 當前視窗的大小（單位是有效像素，沒有特別說明就都是有效像素）
            //     註：視窗大小不包括標題欄，標題欄屬於系統級 UI
            lblMsg.Text = string.Format("window size: {0} * {1}", Window.Current.Bounds.Width, Window.Current.Bounds.Height);

            ApplicationView applicationView = ApplicationView.GetForCurrentView();

            // SetPreferredMinSize(Size minSize) - 指定視窗允許的最小尺寸
            //     最小 width 和最小 height 都不能為零，我這裡測試的是最小 width 為 192，最小 height 為 48
            applicationView.SetPreferredMinSize(new Size(200, 200));

            // PreferredLaunchViewSize - 視窗啟動時的初始尺寸
            // 若要使 PreferredLaunchViewSize 設置有效，需要將 ApplicationView.PreferredLaunchWindowingMode 設置為 ApplicationViewWindowingMode.PreferredLaunchViewSize
            ApplicationView.PreferredLaunchViewSize = new Size(800, 480);
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;
            
            /*
             * ApplicationView.PreferredLaunchWindowingMode - 視窗的啟動模式
             *     Auto - 系統自動調整
             *     PreferredLaunchViewSize - 由 ApplicationView.PreferredLaunchViewSize 決定
             *     FullScreen - 全屏啟動
             */
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 視窗尺寸發生變化時觸發的事件
            Window.Current.SizeChanged += Current_SizeChanged;
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            Window.Current.SizeChanged -= Current_SizeChanged;
        }

        private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            lblMsg.Text = string.Format("window size: {0} * {1}", e.Size.Width, e.Size.Height);
        }

        private void btnChangeSize_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView applicationView = ApplicationView.GetForCurrentView();
            
            Size size = new Size(600, 600);

            // TryResizeView(Size value) - 嘗試將視窗尺寸設置為指定的大小
            bool success = applicationView.TryResizeView(size);
            if (success)
            {
                lblMsg.Text = "嘗試修改視窗尺寸成功";
            }
            else
            {
                lblMsg.Text = "嘗試修改視窗尺寸失敗";
            }

            // 註：怎麼修改視窗的顯示位置呢？暫時不知道
        }
    }
}

OK
[源碼下載]