基於WPF的酷炫GUI窗口的實現全過程

---

title: 基於WPF的酷炫GUI窗口的實現全過程
date: 2020-08-14
permalink: /build/wpfgui
sidebarDepth: 2
tags:

• wpf
• gui
• 軟件
• C#
  categories:
• 開發

---

本文要實現基於 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 事件的調用方法。

設置的方法如下：

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> 

3.增加啟動畫面

想給程序增加一個啟動加載畫面，這也不難。
首先在工程中加入一張啟動界面要顯示的圖片（例如：界面.jpg），在工程中選中圖片右鍵--》屬性，如下圖：

將生成操作一欄設置成 SplashSrceen即可。

如果想要更多的設置，可以在app.xaml.cs中重寫OnStartUp函數。

代碼片段如下：

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        SplashScreen s = new SplashScreen("界面1,jpg");
        //顯示初始屏幕 自動關閉設置false
        s.Show(false);
        //在3秒后關閉
        s.Close(new TimeSpan(0, 0, 3));
        base.OnStartup(e);
    }
}