基於WPF的酷炫GUI視窗的實現全過程
阿新 • • 發佈:2020-08-14
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」
「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);
}
}