【Win10 應用開發】自定義應用標題欄

Win 10 app對窗口標題欄的自定義包括兩個層面：一是只定義標題中各部分的顏色，如標題欄上文本的顏色、三個系統按鈕（最大化，最小化，關閉）的背景顏色等；另一層是把窗口的可視區域直接擴展到標題欄上，當然三個系統按鈕是保留的。也可以用某個UI元素來作為標題欄來呈現。

先看最簡單的一層，即設置標題欄各部分的顏色。

ApplicationView類表示當前應用程序視圖相關操作，它公開了一個TitleBar屬性，訪問該屬性可以獲取到一個ApplicationViewTitleBar實例，通過該ApplicationViewTitleBar實例的公共屬性，可以設置各部分的顏色。

其實這些屬性，你看它的名字就知道干嗎用的，這里老周只是簡單划分一下。

BackgroundColor ForegroundColor	標題欄的背景色和前景色。背景色是標題欄的顏色，前景色是標題欄上顯示的標題文本的顏色。
InactiveBackgroundColor InactiveForegroundColor	當窗口處於非活動狀態時，標題欄的背景色與前景色。和上一行中的屬性相對，上一行中的屬性是窗口在活動狀態時的顏色。
ButtonBackgroundColor ButtonForegroundColor	當窗口處於活動狀態時，右邊的三個按鈕的背景色和前景色。
ButtonInactiveBackgroundColor ButtonInactiveForegroundColor	當窗口處於非活動狀態時，標題欄右邊的三個按鈕的顏色。
ButtonHoverBackgroundColor ButtonHoverForegroundColor	當鼠標移到按鈕上時的顏色。
ButtonPressedBackgroundColor ButtonPressedForegroundColor	當按鈕被按下時的顏色。

 

上表中的各屬性的含義，老周就不說了，弄個表格出來已經很厚道了，你懂的，老周最討厭把某個類的成員列表格的；老周也很討厭抄襲MSDN的書。

接下來，就有一個問題了。其實設置這些顏色的代碼不難寫，重點是這些自定義代碼該放到哪里。因為是自定義當前視圖的外觀的代碼，注意這些設置只能是當前視圖下的，如果你新建了新視圖，還要重新設置外觀。比較合理的位置是放到應用程序級別的代碼中。當然，如果你能保證某個頁面是應用程序的主頁面，也可以寫到頁面的代碼里。

App類有兩個地方可以寫，一個是App的構造函數內，經測試，此處發生異常。所以，也只有一處可用了，就是OnLaunch方法。

下面給個例子，很是TNND簡單，代碼放在OnLaunch方法中。

            ApplicationView view = ApplicationView.GetForCurrentView();
            ApplicationViewTitleBar bar = view.TitleBar;
            bar.BackgroundColor = Colors.Green;
            bar.ForegroundColor = Colors.Yellow;
            bar.ButtonBackgroundColor = Colors.DarkGoldenrod;
            bar.ButtonForegroundColor = Colors.DarkBlue;
            bar.ButtonHoverBackgroundColor = Colors.LightYellow;
            bar.ButtonHoverForegroundColor = Colors.Pink;
            bar.ButtonPressedBackgroundColor = Colors.Orange;
            bar.ButtonPressedForegroundColor = Colors.Purple;

 是吧，很簡單，找到對應的屬性，拼命地賦值就行了。你沒有賦值的屬性就采用系統默認的顏色。

然后看看結果。

有一點，你可以注意到：當鼠標移到關閉按鈕上時，它的背景始終是紅色，無論你怎么改都一樣。

 

好了，上面的例子完結，下面我們看看如何將應用程序的可視區域伸展到標題欄中。

同樣，在App類的OnLaunch方法中加入以下代碼：

            ApplicationView view = ApplicationView.GetForCurrentView();
            var bar = view.TitleBar;
            bar.ButtonBackgroundColor = Colors.Blue;
            bar.ButtonForegroundColor = Colors.White;
            bar.ButtonHoverBackgroundColor = Colors.SkyBlue;

            CoreApplicationView coreappview = CoreApplication.GetCurrentView();
            coreappview.TitleBar.ExtendViewIntoTitleBar = true;

通過CoreApplication.GetCurrentView靜態方法，可以得到表示當前視圖的CoreApplicationView實例，再通過以下語句，把ExtendViewIntoTitleBar設置為true，表示允許窗口的可視部分擴展到標題欄上。

            coreappview.TitleBar.ExtendViewIntoTitleBar = true;

 

得到效果如下圖所示：

 

大概有些時候，僅僅擴充到標題欄還不夠，可能希望自定義一下標題欄。上面的代碼已經允許可視區域擴展到標題欄，接下來我們只需要定義一下自定義標題欄的內容，然后通過Window類就可以自定義為標題欄了。

現在，我們設計一些主頁面的UI。

    <Grid Background="#FFD3CA94">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Name="tbar" Background="#FF916A88" Orientation="Horizontal">
            <Button Background="Blue">
                <SymbolIcon Symbol="Back"/>
            </Button>
            <Button Background="Green">
                <SymbolIcon Symbol="Forward"/>
            </Button>
            <TextBlock Margin="16,0,0,0" VerticalAlignment="Center" Text="我的應用" Foreground="White" />
        </StackPanel>

        <TextBlock Text="My App" FontSize="100" Grid.Row="1"/>
    </Grid>

然后在頁面的代碼中，將StackPanel元素作為標題欄。

        public MainPage()
        {
            this.InitializeComponent();

            Window.Current.SetTitleBar(this.tbar);
        }

調用SetTitleBar方法可以將某個UI元素設置為標題欄的內容。

 

得到的結果如下：

 

 

好，扯完了，肚子餓了，開飯。

示例源碼下載