4. Meet panuon again UI. Title bar of silver form

The central idea ： Realize the color setting of the form title bar

The target framework ：net6.0-windows

One 、 standard Windows

The standard window consists of two overlapping rectangles . The outer rectangle is   Non workspace , Often referred to as   Part layout . It is drawn and managed by the window manager of the operating system . Its dimensions are determined by the standard operating system settings . Non client frameworks provide standard window functionality and behavior . This includes the title button ( To minimize the 、 Maximize and close ) 、 Window border 、 Resize and move behavior 、 Application icons and titles and system menus . The inner rectangle is   work area . It contains the content of the application , And drawn and managed by the application . of WPF Details of windows in the application , see also  WPF Windows summary .

The following figure shows the various parts of the standard window .

Two 、 Scheme selection analysis

WPF There is no way to modify the relevant properties of the form title bar through the native control properties without modifying the style , However, you can modify the title bar of the native form control through other third-party frameworks or other properties .

2.1 Custom form title bar

WindowStyle="None"

This attribute can be hidden WPF The form's own title bar , Then we can customize a title bar inside the form .

However, the form will also lose all its own form control , Such as ： Maximize 、 To minimize the 、 Form zoom , And the form can't be dragged . Yes, of course ResizeMode=“CanResizeWithGrip” Form properties realize form scaling （ In fact, the latest version of the framework does not need this property to achieve form scaling ）.

At this point, the entire form can be displayed through the layout control (Grid、stackpanel etc. ) It's laid out . The literature 3.1 The big guy used WindowChrome Custom form style is good , But simply cover the client area of the window to the non client area , The interaction in the native window is still , But the style has been blocked .

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        FontWeight="ExtraLight" ResizeMode="CanResize" WindowStartupLocation="CenterScreen"
        WindowStyle="None" AllowsTransparency="True" Background="{x:Null}">
    <Window.Resources>
        <Style x:Key="btn_nap" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="0.7"/>
                </Trigger>
                <!--<Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Background" Value="#EEF0F5"/>
                </Trigger>-->
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="35" x:Name="windowChrome" CornerRadius="0" GlassFrameThickness="0"/>
    </WindowChrome.WindowChrome>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Background="#3C6AB1">
            <TextBlock x:Name="lblTitle" Text=" test " Foreground="White" FontSize="14" Margin="10 0 0 0" VerticalAlignment="Center"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button WindowChrome.IsHitTestVisibleInChrome="True" Name="button_MiniSize" Content="─" Style="{StaticResource btn_nap}" HorizontalAlignment="Right" Foreground="White" Margin="0 0 5 0" Height="30" Width="30"/>
                <Button WindowChrome.IsHitTestVisibleInChrome="True" Name="button_MaxSize" Content="*" Style="{StaticResource btn_nap}" HorizontalAlignment="Right" Foreground="White" Margin="0 0 5 0" Height="30" Width="30"/>
                <Button WindowChrome.IsHitTestVisibleInChrome="True" x:Name="btn_Close" Content="*" Style="{StaticResource btn_nap}" HorizontalAlignment="Right" Foreground="White" Margin="0 0 5 0" Height="30" Width="30"/>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1" Background="LightBlue">
            
        </Grid>
    </Grid>
</Window>

Third party controls are easy to implement ,

2.2 Fluent.Ribbon

NuGet Can be installed , And then in App Introducing style

<Application x:Class="WpfFluentRibbon.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfFluentRibbon"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
    </Application.Resources>
</Application>

Modify the  Window, Change to Fluent:RibbonWindow, At the same time, the background also inherits from Windows Change to inheritance Fluent:RibbonWindow

<Fluent:RibbonWindow x:Class="WpfFluentRibbon.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFluentRibbon"
        xmlns:Fluent="urn:fluent-ribbon"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
                     Background="Red">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <Grid Grid.Row="1">
            <TextBlock>Fluent.Ribbon</TextBlock>
        </Grid>
    </Grid>
</Fluent:RibbonWindow>

Here it is  RibbonWindow Nodes are set directly Background Properties of , Set a property that will be used in both workspaces and non workspaces

We put the workspace layout control Grid Of Background Change the color , You can set the color of the title bar .

<Grid Background="GreenYellow">

2.3 Panuon.UI.Silver

Empathy ,NuGet Installation ,App Add related resources to

<Application x:Class="WpfPanuonUISilver.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfPanuonUISilver"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary  Source="pack://application:,,,/Panuon.UI.Silver;component/Control.xaml"/>
    </Application.Resources>
</Application>

Add... At the front of the main interface Pu Namespace and modify it Windows node , At the same time through pu:WindowXCaption.Background Property to change the background color of the form label bar .

<pu:WindowX x:Class="WpfPanuonUISilver.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfPanuonUISilver"
        xmlns:pu="clr-namespace:Panuon.UI.Silver;assembly=Panuon.UI.Silver"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        pu:WindowXCaption.Background="Red">
    <Grid>

    </Grid>
</pu:WindowX>

At the same time, the background needs to remove the inherited Windows

3、 ... and 、 Citations

3.1 WPF Use WindowChrome Custom form styles _Danny_hi The blog of -CSDN Blog _windowchrome wpf

3.2 WindowChrome class (System.Windows.Shell) | Microsoft Docs 

3.3 WPF Use WindowChrome, While customizing the window title bar, the original window style is retained to the greatest extent （ similar UWP/Chrome）_walter lv The blog of -CSDN Blog _windowchrome