基於 WPF 的酷炫 GUI 視窗的簡易實現

雪中亮發表於2018-01-22
GUI

「部落格搬家」 原地址: CSDN 原發表時間: 2016-11-07

本文要實現基於 WPF 的酷炫 GUI 視窗，力圖實現一個真正可用且實用的 GUI 視窗。

本文要實現的效果如圖所示：

最終效果

效果總結如下：

  • 無標題欄，或自定義標題欄
  • 視窗的半透明效果
  • 視窗可自由拖拽
  • Enter 以及 Esc 等預設按鍵
  • 右鍵選單

1. 視窗的效果實現

1.1 視窗外觀相關

首先新建一個視窗，更改外觀，對視窗的屬性進行如下設定：

  • 外觀設定中 , 「AllowsTransparency」核取方塊勾選上，該視窗就可以透明化，同時「WindowStyle」會自動變更為「None」, 視窗的預設標題欄會消失，此時可以選擇自定義標題欄。

  • 視窗允許透明化後，在「Background」、「BorderBrush」等選項中，對窗體的背景及邊框顏色進行設定。可以設定為純色或各種漸變形態以及各種透明形態。

  • 使用「BorderThickness」項設定窗體的邊框寬度。

  • 「Opacity」設定整個介面的不透明度

設定介面如下圖所示：

視窗布局設定頁面

1.2 視窗大小位置相關

更改視窗的位置，對如下屬性進行設定：

  • WindowStartupLocation：修改視窗開啟時的位置
  • WindowState：修改視窗開啟時的大小狀態，可設定全屏視窗
  • Topmost：本視窗置頂
  • Width和Height：視窗開啟時的尺寸
  • MinWidth和MinHeight：視窗的最小尺寸

2. 方便對視窗操作的功能實現

為方便對視窗的操作，可進行如下設定：

  • 設定某個 button 的屬性，設定 IsCancel 和 IsDefault 屬性，可設定 Enter 和 Esc 鍵所觸發的按鈕。

  • 設定拖動視窗的任意位置均可拖拽視窗，可設定視窗的事件呼叫方法，設定 MouseLeftButtonDown 事件的呼叫方法。

MouseLeftButtonDown 事件呼叫方法設定

設定的方法如下：

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}
複製程式碼

點選關閉按鈕時結束整個應用程式，可設定關閉事件的回撥方法，也可設定按鈕點選事件的方法，如下：

private void btnExit_Click(object sender, RoutedEventArgs e)
{
    Environment.Exit(0);
}
複製程式碼

實現視窗的右鍵選單及其點選事件，需要設定視窗的「ContextMenu」屬性，或在 Xaml 檔案中，新增如下內容：

<Window.ContextMenu>
    <ContextMenu Name="ChangePassword">
        <MenuItem Header="修改登入密碼"
                  Click="MenuItemChangePassword_Click" />
        <MenuItem Header="關於"
                  Click="MenuItemAbout_Click" />
    </ContextMenu>
</Window.ContextMenu>
複製程式碼

相關文章