背水一戰 Windows 10 (5) - UI: 標題欄
作者：webabcd
介紹
背水一戰 Windows 10 之 UI
- 標題欄
示例
TitleBarDemo.xaml
<Page x:Class="Windows10.UI.TitleBarDemo" 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="btnTitle" Content="改變標題" Click="btnTitle_Click" Margin="0 10 0 0" /> <Button Name="btnColor" Content="改變顏色" Click="btnColor_Click" Margin="0 10 0 0" /> <Button Name="btnBack" Content="顯示/隱藏返回按鈕" Click="btnBack_Click" Margin="0 10 0 0" /> <Button Name="btnHidden" Content="顯示/隱藏標題欄" Click="btnHidden_Click" Margin="0 10 0 0" /> <Button Name="btnFullScreen" Content="全屏/取消全屏" Click="btnFullScreen_Click" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
TitleBarDemo.xaml.cs
/* * 演示 TitleBar 相關知識點 * * 通過 ApplicationView.GetForCurrentView().TitleBar 獲取當前的 ApplicationViewTitleBar * 通過 CoreApplication.GetCurrentView().TitleBar 獲取當前的 CoreApplicationViewTitleBar * * 注：手工測量 TitleBar 高度為 32 像素 */ using System; using Windows.ApplicationModel.Core; using Windows.UI; using Windows.UI.Core; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.UI { public sealed partial class TitleBarDemo : Page { public TitleBarDemo() { this.InitializeComponent(); this.Loaded += TitleBarDemo_Loaded; } private void TitleBarDemo_Loaded(object sender, RoutedEventArgs e) { } // 改變 Title private void btnTitle_Click(object sender, RoutedEventArgs e) { // 改變左上角 Title 的顯示內容 ApplicationView.GetForCurrentView().Title = $"My Title Bar({new Random().Next(1000, 10000).ToString()})"; } // 改變 TitleBar 上的相關顏色 private void btnColor_Click(object sender, RoutedEventArgs e) { // 獲取當前的 ApplicationViewTitleBar ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar; if (titleBar.BackgroundColor != Colors.Orange) { // 背景色 titleBar.BackgroundColor = Colors.Orange; // 前景色 titleBar.ForegroundColor = Colors.White; // 窗口為非活動狀態時的背景色（活動狀態就是焦點在窗口上，非活動狀態就是焦點不在窗口上） titleBar.InactiveBackgroundColor = Colors.Yellow; // 窗口為非活動狀態時的前景色 titleBar.InactiveForegroundColor = Colors.Gray; // TitleBar 上的按鈕的背景色（按鈕包括：最小化按鈕，最大化按鈕，關閉按鈕，返回按鈕） titleBar.ButtonBackgroundColor = Colors.Orange; // TitleBar 上的按鈕的鼠標經過的背景色 titleBar.ButtonHoverBackgroundColor = Colors.Blue; // TitleBar 上的按鈕的鼠標按下的背景色 titleBar.ButtonPressedBackgroundColor = Colors.Green; // TitleBar 上的按鈕的非活動狀態的背景色 titleBar.ButtonInactiveBackgroundColor = Colors.Yellow; // TitleBar 上的按鈕的前景色 titleBar.ButtonForegroundColor = Colors.White; // TitleBar 上的按鈕的鼠標經過的前景色 titleBar.ButtonHoverForegroundColor = Colors.Red; // TitleBar 上的按鈕的鼠標按下的前景色 titleBar.ButtonPressedForegroundColor = Colors.Purple; // TitleBar 上的按鈕的非活動狀態的前景色 titleBar.ButtonInactiveForegroundColor = Colors.Gray; } else { titleBar.BackgroundColor = null; titleBar.ForegroundColor = null; titleBar.InactiveBackgroundColor = null; titleBar.InactiveForegroundColor = null; titleBar.ButtonBackgroundColor = null; titleBar.ButtonHoverBackgroundColor = null; titleBar.ButtonPressedBackgroundColor = null; titleBar.ButtonInactiveBackgroundColor = null; titleBar.ButtonForegroundColor = null; titleBar.ButtonHoverForegroundColor = null; titleBar.ButtonPressedForegroundColor = null; titleBar.ButtonInactiveForegroundColor = null; } } // 顯示或隱藏 TitleBar 左上角的返回按鈕 private void btnBack_Click(object sender, RoutedEventArgs e) { // 當前 TitleBar 左上角的返回按鈕是隱藏狀態 if (SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility == AppViewBackButtonVisibility.Collapsed) { // 顯示 TitleBar 左上角的返回按鈕 SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible; // 監聽 TitleBar 左上角的返回按鈕的點擊事件 SystemNavigationManager.GetForCurrentView().BackRequested += TitleBarDemo_BackRequested; } else { SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed; SystemNavigationManager.GetForCurrentView().BackRequested -= TitleBarDemo_BackRequested; } } // 處理 TitleBar 左上角的返回按鈕的點擊事件 private void TitleBarDemo_BackRequested(object sender, BackRequestedEventArgs e) { if (MainPage.Current.Container.CanGoBack) MainPage.Current.Container.GoBack(); } // 顯示或隱藏 TitleBar private void btnHidden_Click(object sender, RoutedEventArgs e) { // 切換 TitleBar 的顯示/隱藏狀態 // 注：TitleBar 隱藏時，仍會顯示最小化按鈕、最大化按鈕、關閉按鈕 CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar ^= true; /* * 如果需要自定義 TitleBar 的話，就隱藏它，然后自定義一個自己的即可 * 要注意 TitleBar 的 Height, SystemOverlayLeftInset, SystemOverlayRightInset * 要注意如果收到 CoreApplicationViewTitleBar.LayoutMetricsChanged 事件，則 Height, SystemOverlayLeftInset, SystemOverlayRightInset 的值可能發生了變化 * 要注意窗口大小發生變化時的處理 */ CoreApplicationViewTitleBar titleBar = CoreApplication.GetCurrentView().TitleBar; // Height - TitleBar 的高度 // SystemOverlayLeftInset - TitleBar 浮層左側的間隔，在這個間隔部分不要放置自定義內容 // SystemOverlayRightInset - TitleBar 浮層右側的間隔，在這個間隔部分不要放置自定義內容（右側間隔部分是用於放置最小化按鈕，最大化按鈕，關閉按鈕的。經過測試這個間隔明顯多出來一些，也許是預留給其他按鈕的） lblMsg.Text = $"titleBarHeight: {titleBar.Height}, titleBarLeftInset: {titleBar.SystemOverlayLeftInset}, titleBarRightInset: {titleBar.SystemOverlayRightInset}"; } // 進入全屏模式，退出全屏模式 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 = "嘗試進入全屏模式失敗"; } } // 注意，進入全屏模式后，TitleBar 會消失，鼠標移動到頂部，則 TitleBar 會再次出現（當然這個行為的具體表現取決於 FullScreenSystemOverlayMode，參見 FullScreen.xaml） CoreApplicationViewTitleBar titleBar = CoreApplication.GetCurrentView().TitleBar; // TitleBar 是否是可見狀態 bool titleBarIsVisible = titleBar.IsVisible; // TitleBar 的可見性發生變化時觸發的事件 titleBar.IsVisibleChanged += delegate { }; } } }
OK
[源碼下載]