四、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下会很好看。

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