ToB企服应用市场:ToB评测及商务社交产业平台

标题: 四、WinUI3下TitleBar的自定义 [打印本页]
作者: 羊蹓狼    时间: 2022-10-17 03:00
标题: 四、WinUI3下TitleBar的自定义
WinUI3下TitleBar的自定义

对于Windows软件开发者来说重写标题栏样式是一个很重要的事情，在WPF阶段很多人写出来性能很差的窗口，而且为了适配Win11系统的Snaplayout后性能就更差了，这篇是写WinUI3下提供的重写TitleBar的方式；
1、修改文本
  1. public MainWindow()
  2. {
  3.     this.InitializeComponent();
  4.     Title = "Duwenlong learn App Title";
  5. }
复制代码
可以修改默认标题栏显示文本；但是无法自定义其他内容；所有操作都请在InitializeComponent方法后执行，不然会报错；
  1. public MainWindow()
  2. {
  3.     this.InitializeComponent();
  5.     // Hide default title bar.
  6.     ExtendsContentIntoTitleBar = true;
  7. }
复制代码
修改后我们有完整的区域用看显示内容，只是目前还比较丑而且标题栏部分不支持拖动；
2、完全自定义

通过调用 Window.SetTitleBar 方法并传入定义拖动区域的 UIElement 来指定拖动区域。
1、标题栏内容和拖动区域

代码如下：
  1. <Window
  2.     x:
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:TitleBarCustomizationDemo"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Grid>
  10.         <Grid.RowDefinitions>
  11.             <RowDefinition Height="Auto"/>
  12.             <RowDefinition Height="*"/>
  13.         </Grid.RowDefinitions>
  14.         <Grid x:Name="AppTitleBar">
  15.             <TextBlock x:Name="AppTitleTextBlock" Text="Duwenlong learn Now App Title"
  16.                TextWrapping="NoWrap"
  17.                
  18.                VerticalAlignment="Center"
  19.                Margin="28,6,0,6"/>
  20.         </Grid>
  21.     </Grid>
  22. </Window>
复制代码
  1. public MainWindow()
  2. {
  3.     this.InitializeComponent();
  4.     ExtendsContentIntoTitleBar = true;
  5.     SetTitleBar(AppTitleBar);
  6. }
复制代码
2、交互式内容

我们可以放置一些不影响用户的交互式按钮
使用XAML的嵌套语法尝试放置一些内容，我放置了一个textblock，用于在标题栏显示一个消息；
  1. <Window
  2.     x:
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:TitleBarCustomizationDemo"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Grid>
  10.         <Grid.RowDefinitions>
  11.             <RowDefinition Height="Auto"/>
  12.             <RowDefinition Height="*"/>
  13.         </Grid.RowDefinitions>
  14.         <Grid x:Name="AppTitleBar">
  15.             <TextBlock x:Name="AppTitleTextBlock" Text="Duwenlong learn Now App Title"
  16.                TextWrapping="NoWrap"
  17.                
  18.                VerticalAlignment="Center"
  19.                Margin="28,6,0,6"/>
  20.         </Grid>
  21.     </Grid>
  22. </Window>           
复制代码
4、系统标题按钮的颜色和透明度

将应用内容扩展到标题栏区域时，可以使标题按钮的背景透明，我默认设置了WindowCaptionBackground为透明色
  1. <Window
  2.     x:
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:TitleBarCustomizationDemo"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Grid>
  10.         <Grid.RowDefinitions>
  11.             <RowDefinition Height="Auto"/>
  12.             <RowDefinition Height="*"/>
  13.         </Grid.RowDefinitions>
  14.         <Grid x:Name="AppTitleBar">
  15.             <TextBlock x:Name="AppTitleTextBlock" Text="Duwenlong learn Now App Title"
  16.                TextWrapping="NoWrap"
  17.                
  18.                VerticalAlignment="Center"
  19.                Margin="28,6,0,6"/>
  20.         </Grid>
  21.     </Grid>
  22. </Window>               Transparent            LightGreen            Red            Pink              
复制代码
5、当窗口处于非活动状态时，调暗标题栏
  1. <Window
  2.     x:
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:TitleBarCustomizationDemo"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Grid>
  10.         <Grid.RowDefinitions>
  11.             <RowDefinition Height="Auto"/>
  12.             <RowDefinition Height="*"/>
  13.         </Grid.RowDefinitions>
  14.         <Grid x:Name="AppTitleBar">
  15.             <TextBlock x:Name="AppTitleTextBlock" Text="Duwenlong learn Now App Title"
  16.                TextWrapping="NoWrap"
  17.                
  18.                VerticalAlignment="Center"
  19.                Margin="28,6,0,6"/>
  20.         </Grid>
  21.     </Grid>
  22. </Window>                          Green            LightGreen            Red            Pink            
复制代码
  1. using Microsoft.UI.Xaml;
  2. using Microsoft.UI.Xaml.Controls;
  3. using Microsoft.UI.Xaml.Controls.Primitives;
  4. using Microsoft.UI.Xaml.Data;
  5. using Microsoft.UI.Xaml.Input;
  6. using Microsoft.UI.Xaml.Media;
  7. using Microsoft.UI.Xaml.Navigation;
  8. using System;
  9. using System.Collections.Generic;
  10. using System.IO;
  11. using System.Linq;
  12. using System.Runtime.InteropServices.WindowsRuntime;
  13. using Windows.Foundation;
  14. using Windows.Foundation.Collections;
  16. // To learn more about WinUI, the WinUI project structure,
  17. // and more about our project templates, see: http://aka.ms/winui-project-info.
  19. namespace TitleBarCustomizationDemo
  20. {
  21.     /// <summary>
  22.     /// An empty window that can be used on its own or navigated to within a Frame.
  23.     /// </summary>
  24.     public sealed partial class MainWindow : Window
  25.     {
  26.         public MainWindow()
  27.         {
  28.             this.InitializeComponent();
  29.             ExtendsContentIntoTitleBar = true;
  30.             SetTitleBar(AppTitleBar);
  31.             Activated += MainWindow_Activated;
  32.         }
  34.         private void MainWindow_Activated(object sender, WindowActivatedEventArgs args)
  35.         {
  36.             if (args.WindowActivationState == WindowActivationState.Deactivated)
  37.             {
  38.                 AppTitleTextBlock.Foreground =
  39.                     (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
  40.             }
  41.             else
  42.             {
  43.                 AppTitleTextBlock.Foreground =
  44.                     (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
  45.             }
  46.         }
  47.     }
  48. }
复制代码
6、重置标题栏

可以在应用运行时调用 SetTitleBar 切换到新的标题栏元素。或者恢复为默认；
  1. <Window
  2.     x:
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:TitleBarCustomizationDemo"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Grid>
  10.         <Grid.RowDefinitions>
  11.             <RowDefinition Height="Auto"/>
  12.             <RowDefinition Height="*"/>
  13.         </Grid.RowDefinitions>
  14.         <Grid x:Name="AppTitleBar">
  15.             <TextBlock x:Name="AppTitleTextBlock" Text="Duwenlong learn Now App Title"
  16.                TextWrapping="NoWrap"
  17.                
  18.                VerticalAlignment="Center"
  19.                Margin="28,6,0,6"/>
  20.         </Grid>
  21.     </Grid>
  22. </Window>                    
复制代码
  1. private void Button_Click(object sender, RoutedEventArgs e)
  2. {
  3.     SetTitleBar(null);
  4.     ExtendsContentIntoTitleBar = false;
  5. }
复制代码
因为使用的是Win10机器，图床又挂了所以不贴图了，Win11下会很好看。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4