2. 程式人生 > >WPF中自定義標題欄時窗體最大化處理之WindowChrome

WPF中自定義標題欄時窗體最大化處理之WindowChrome

阿新 • • 發佈：2018-11-11

注意：

  • 本文方法基礎是WindowChrome，而WindowChrome在.NET Framework 4.5之後才整合釋出的。見：WindowChrome Class
  • 在.NET Framework 4.0中使用WindowChrome，需要安裝Ribbon來支援WindowChrome
  • 目前官方文件的內容較為陳舊（但仍有參考價值），其中提到了SystemParameters2，這個應該是Ribbon裡的東西，4.5想用可以安裝Xceed.Wpf.AvalonDock庫，這裡面有現成的Microsoft.Windows.Shell.SystemParameters2
    實現——當然，自己不怕麻煩，可以自己實現來獲取要用的系統變數。（一般用不著，4.5中SystemParameters添加了許多系統變數的實現）

實現步驟

第一步：基本實現【保留系統基礎操作按鈕】

  • 新增Window的Style定義，並設定WindowChrome.WindowChrome屬性；
  • 設定WindowChrome標題欄：
    • CaptionHeight——主要用於拖動有效區；
    • GlassFrameThickness——影響標題欄系統按鈕顯示，0表示不使用系統按鈕【後面介紹】，-1表示用的系統預設值，如下示例則表示標題欄高度30；
    • 自定義窗體Title

注意：控制元件模板中的定義：

  • 1、最外層Border背景無顏色，否則會覆蓋標題欄，看不到系統按鈕。
  • 2、內部佈局定義，使用Grid隔出30的標題欄高度，也可以直接對ContentPresenter設定Margin【主要是為了讓頂部顯示出標題欄】。
    <Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CaptionHeight="30" GlassFrameThickness="0,30,0,0"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
                        <AdornerDecorator  >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <ContentPresenter Grid.Row="1"/>
                                <TextBlock Text="{TemplateBinding Title}" HorizontalAlignment="Left" VerticalAlignment="Center" />
                            </Grid>
                        </AdornerDecorator>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

存在的問題: 最大化邊框問題 —— 會有部分溢位。

根據觀察，這個溢位寬度應該是8，此值的來源：（SystemParameters.MaximizedPrimaryScreenWidth - SystemParameters.WorkArea.Width）/2 ，高度也可以這樣計算。

第二步：優化邊界處理

  • 方法1：模板新增最大化觸發器，設定最大化時，內部佈局Margin設為8
  • 方法2：模板新增最大化觸發器，設定最大化時，限制佈局最大化的寬高最大值

不管使用哪種方法，最大化時，系統的標題欄高度都發生了變化，故，需要重新設定模板中定義的標題欄高度。

    <ControlTemplate TargetType="{x:Type Window}">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
            <AdornerDecorator  >
                <Grid Name="win_content">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" x:Name="row_title"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentPresenter Grid.Row="1"/>
                    <TextBlock Text="{TemplateBinding Title}" HorizontalAlignment="Left" VerticalAlignment="Center" />
                </Grid>
            </AdornerDecorator>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="WindowState" Value="Maximized">
                <Setter Property="Margin" TargetName="win_content" Value="8"/>
                <!--二選一-->
                <Setter Property="MaxWidth" TargetName="win_content" Value="{Binding Source={x:Static SystemParameters.WorkArea},Path=Width}" />
                <Setter Property="MaxHeight" TargetName="win_content" Value="{Binding Source={x:Static SystemParameters.WorkArea},Path=Height}"/>
        
                <Setter Property="Height" TargetName="row_title" Value="22" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

至此，都是系統標題欄和我們自定義內容組合使用，但這樣總有些邊邊角角要修正，下面就完全自定義標題欄

第三步：完全自定義標題欄【即，不使用系統的操作按鈕】

  • 初步操作類似第一步，其中將GlassFrameThickness設定為0
  • 在內容定義部分新增自定義的標題欄，新增操作按鈕，並設定按鈕屬性WindowChrome.IsHitTestVisibleInChrome="True"

如果不設定WindowChrome.IsHitTestVisibleInChrome，則由於我們之前設定CaptionHeight，則這個區域內，按鈕將失效。
但是，也不能將整個標題欄佈局設定這個屬性，那樣會完全覆蓋系統標題欄的操作，如拖動效果，即CaptionHeight設定的那個區域。

    <!--樣式定義-->
    <Style x:Key="WindowStyle2" TargetType="{x:Type Window}">
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome UseAeroCaptionButtons="False" GlassFrameThickness="0" CaptionHeight="30"  />
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"  >
                        <AdornerDecorator >
                            <ContentPresenter x:Name="win_content" />
                        </AdornerDecorator>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="WindowState" Value="Maximized">
                            <Setter Property="Margin" TargetName="win_content" Value="8"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--定義標題欄-->
    <Grid Background="Red" >
        <Grid Height="30" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="Blue">
            <StackPanel Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True" HorizontalAlignment="Right" >
                <Button Name="btn_Min" Content="—" ></Button>
                <Button Name="btn_Max" Content="☐" ></Button>
                <Button Name="btn_Close" Content="✕" ></Button>
            </StackPanel>
        </Grid>
    </Grid>
    //標題欄按鈕功能實現
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.btn_Min.Click += Btn_Min_Click;
            this.btn_Max.Click += Btn_Max_Click;
            this.btn_Close.Click += Btn_Close_Click;
        }

        private void Btn_Close_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private void Btn_Max_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Maximized == this.WindowState ? WindowState.Normal : WindowState.Maximized;
        }

        private void Btn_Min_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Minimized;
        }
    }

關聯瞭解：
如果你平時也使用Visual Studio Code【VSCode】，文中的第一步和第三步，在vscode的設定中有對應效果：

  • 第一步 —— 將vscode使用者設定中Title Bar Style值設為native；
  • 第三步 —— 將vscode使用者設定中Title Bar Style值設為custom。

相關下載

點選檢視完整原始碼

解：奇葩史

落後要捱打，個人以前一直侷限於老舊方式實現窗體處理，沒有跟進WPF技術改進，在此，非常感謝@vbfool的提醒。【之前說週末搞出來，自己這幾周浪了，沒研究。今天趁著別人雙11買買買，咱就擼擼程式碼】

相關推薦

WPF中自定義標題欄時窗體最大化處理之WindowChrome

注意： 本文方法基礎是WindowChrome，而WindowChrome在.NET Framework 4.5之後才整合釋出的。見：WindowChrome Class 在.NET Framework 4.0中使用WindowChrome，需要安裝Ribbon來支援WindowCh

android中如何自定義標題欄

          首先，修改標題欄的寬度和背景，在strings.xml中新增： <item name="android:background">@drawable/title_bg</item> </style> &l

android 修改窗體標題的字型式樣和背景圖(自定義標題欄)

今天google了一下，關於android自定義窗體標題欄的問題， 解決方法大概如下：     自定義一個layout，然後通過requestWindowFeature和getWindow().setFeatureInt方法呼叫，     但是存在填充不滿的問題，而且比較麻煩

QT自定義標題欄之拖動窗體

1，定義兩個成員變數     bool        m_pressed;     QPoint        m_movePos; 2，重寫mousePressed，mouseMove,mouseRelease void mousePressEvent(QMouseE

自定義標題欄右鍵菜單

mman size sub append pan prot base rri import 摘自：http://stackoverflow.com/questions/4615940/how-can-i-customize-the-system-menu-of-a-wind

Android 自定義標題欄

list nis pub com .text reat oid post line 前言： 　　自定義標題欄應該是Android標配了，也是我從網上摳下來的，做一下記錄，感謝各位前輩栽樹。 自定義標題欄： 　　首先： 1 package com.example.util

Zabbix中自定義Key執行時權限不夠

外網 work 可執行 dir 51cto 命令 zabbix用戶 測試 con 前言 平臺上有一應用程序需要調用百度的某個接口，需要連接外網，所以編寫了腳本來對百度外網的連通性進行測試。但在server端檢測時出現權限不夠的問題 一. Zabbix-agent 配置自

WPF中自定義MarkupExtension

enc ros AC ext object post ica 初始化 vid 　　在介紹這一篇文章之前，我們首先來回顧一下WPF中的一些基礎的概念，首先當然是XAML了，XAML全稱是Extensible Application Markup Language (可擴展應用

在WPF中自定義控件

pad action sync 這一 www 執行 平時 locks 並不是 一, 不一定需要自定義控件在使用WPF以前,動輒使用自定義控件幾乎成了慣性思維,比如需要一個帶圖片的按鈕,但在WPF中此類任務卻不需要如此大費周章,因為控件可以嵌套使用以及可以為控件外觀打造一套新

QT 自定義標題欄

1、去除舊的標題欄 //去除QDialog對話方塊有上角問號 Qt::WindowFlags flags=Qt::Dialog;flags |=Qt::WindowCloseButtonHint;flags |=Qt::FramelessWindowHint; set

qt自定義標題欄

寫一個qt介面程式，但是系統的標題欄太醜了，一看就像個demo，為了做的高階一點，必須去掉這個標題欄； 需要注意的幾個地方，首先要將系統的標題欄隱藏掉，然後新增自己的關閉最大化最小化按鈕，最後還要設定視窗的拖拽事件（因為去掉系統標題欄後不能拖拽） 1.隱藏系統標題欄

簡單的自定義標題欄（不使用Toolbar）

比較簡單的自定義標題欄，這裡直接封裝成一個類似控制元件的樣子，先上效果圖： 我們可以先寫一個BaseView來，用來做標題欄的基礎佈局： /** * 自定義View的基類 * @author */ public class BaseView extends FrameL

Qt高階——Qt自定義標題欄

Qt高階——Qt自定義標題欄 一、Qt自定義標題欄簡介 QWidget及其子類窗體元件的標題欄受作業系統的控制，即標題欄的介面風格與作業系統的主題風格相同，工程實踐中需要開發者自行定義，達到美化應用程式介面的目的。 二、Qt自定義標題欄實現 1、自定義標題欄的功能 自定義標題欄需要完成功能如下：（1

Android自定義標題欄

補充： 這位大佬的方法設定完成後是白色的背景，如果需要自定義背景可以在style中新增： <style name="CustomWindowTitleBackground"> <item name="android:backg

Flutter自定義標題欄之處理狀態列高度

App在很多情況下由於各種需求需要自定義標題欄，而在能夠構建Android和IOS應用的Flutter中，如果不在Scaffold中使用AppBar會發現預設是沉浸式。 猜想：我們使用自定義標題欄好像需要知道狀態列的高度，我看到網上很多人想要自定義標題欄，卻老是去找怎麼獲取狀態列的高度 解惑：其

ToolBar自定義標題欄

.style.xml <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Ligh

React Native自定義標題欄元件

大家好，今天講一下如何實現自定義標題欄元件，我們都知道RN有一個優點就是可以元件化，在需要使用該元件的地方直接引用並傳遞一些引數就可以了，這種方式確實提交了開發效率。 標題欄是大多數應用介面必不可少的

【Qt】Qt之自定義介面（新增自定義標題欄）【轉】

簡述 通過上節內容，我們實現了自定義窗體的移動，但是我們缺少一個標題欄來顯示窗體的圖示、標題，以及控制窗體最小化、最大化、關閉的按鈕。 自定義標題欄後，所有的控制元件我們都可以定製，比如：在標題欄中新增換膚、設定按鈕以及其他控制元件。 簡述 效果 自定義標題欄 實現 介面說明

Android封裝一個自定義標題欄

標題欄是Android開發最基礎的一個元件，但是應用也多種多樣，因為應對需求的多樣化，想要做一個萬能的標題欄基本是不可能，因此跟大家分享一下自己簡易封裝的標題欄，並不具備多大含金量，應對於以下一些樣式。 1： 2： 3： 4： 5：

Qt自定義標題欄詳細介紹(可拖動、放大縮小、關閉、標題欄具有漸變色)

前言 使用Qt自帶的標題欄可能沒有辦法適合我們的需求，例如標題欄的顏色，標題欄的寬度、高度，標題欄的放大、縮小、還原、關閉按鈕等都沒有辦法發生改變。因為預設的標題欄是和作業系統相關的、它會根據作業系統的變化而發生變化，在Window上不同風格的主題，在Qt程式