https://blog.csdn.net/oceanlucy/article/details/50033773
“安裝界面太丑了，不堪入目！”
“這界面應該屬於20年代初的舊產物……”
“難看！”
每每聽到設計師和產品經理這樣的吐槽時，心中難免會有一點失落。細看一下，咱們軟件的安裝包界面的確還是比較古老，仍然帶有xp系統自帶的界面邊框。於是趁着這次新版軟件發布之際，專門花了時間去研究界面設計。
目標要求：
1、 界面border去掉原本windows自帶的對話框格式，采取扁平化設計；
2、 簡化安裝流程，不要彈出那么多安裝向導頁，不要讓用戶一直點“下一步”，簡潔人性化；
3、 安裝界面可加載漂亮的背景圖片；
4、 優化安裝包安裝時間。
原型設計：
開發工具：
因為之前采用Inno setup設計，而且它擁有Pascal腳本引擎，功能算強大，故采用Inno setup。
主要流程：
由圖中可以清晰地看出，所有向導頁之間都是通過“下一步”或者“上一步”進行驅動更換的。
概要分析：
這里需要調用兩個美化插件動態庫：botva2.dll和InnoCallback.dll，用於界面的美化和功能完善。這里就不全部把代碼貼出來了，只針對其中的要點進行分析概括。
在開始之前，先了解一下inno setup基本的過程和函數。
//該過程在開始的時候改變向導或者向導頁，不要指望使用InitializeSetup函數實現改變向導頁的功能，因為InitializeSetup函數觸發時向導窗口並不存在。
procedure InitializeWizard();
//該函數在安裝程序初始化時調用，返回False 將中斷安裝，True則繼續安裝.
function InitializeSetup(): Boolean;
//該過程在安裝終止時被調用，注意及時在用戶沒有安裝任何文件之前退出也會被調用。
procedure DeinitializeSetup();
//該過程提供用戶完成預安裝和安裝之后的任務，更多的是提供了安裝過程中的狀態。參數CurStep=ssInstall是在程序實際安裝前，CurStep=ssPostInstall是實際安裝完成后，而CurStep=ssDone是在一次成功的安裝完成后、安裝程序終止前（即點擊finish按鈕后執行）。
procedure CurStepChanged(CurStep: TSetupStep);
//當用戶單擊下一步按鈕時調用。如果返回True，向導將移到下一頁；如果返回False，它仍保留在當前頁。
function NextButtonClick(CurPageID: Integer): Boolean;
//向導調用這個事件函數確定是否在所有頁或不在一個特殊頁 (用PageID 指定) 顯示。如果返回True，將跳過該頁；如果你返回False，該頁被顯示。注意: 這個事件函數不被wpWelcome、wpPreparing 和wpInstalling 頁調用，還有安裝程序已經確定要跳過的頁也不會調用 (例如，沒有包含組件安裝程序的wpSelectComponents)。
function ShouldSkipPage(PageID: Integer): Boolean;
//在新向導頁 (由CurPageID 指定) 顯示后調用。
procedure CurPageChanged(CurPageID: Integer);
1、 界面border去掉原本windows自帶的對話框格式，采取扁平化設計
//設置歡迎向導頁的尺寸大小：
WizardForm.Center
WizardForm.BorderStyle:=bsNone; //去掉對話框border
WizardForm.ClientWidth:=601;
WizardForm.ClientHeight:=341;
WizardForm.InnerNotebook.Hide;
WizardForm.OuterNotebook.Hide;
wizardform.Color:=TransparentColor;
WizardForm.Bevel.Hide;
WizardForm.NextButton.Width:=0;
WizardForm.BackButton.Width:=0;
WizardForm.CancelButton.Width:=0;
WizardForm.OnMouseDown:=@WizardFormMouseDown; //可拉動
2、 簡化安裝包安裝流程，不要用戶一直點“下一步”，簡潔人性化
這里只有兩個向導頁，一個是選擇安裝目錄和許可協議的界面，一個是正在安裝的界面。用戶只需點擊“開始安裝”即可安裝，並有進度條和百分比顯示，不用經常性地點擊“下一步”。
3、 安裝界面可加載漂亮的圖片和動畫效果
// 創建描述位圖
Bmp:= TBitmapImage.Create(WizardForm);
Bmp.Top:=ScaleX(0);
Bmp.Left:=ScaleX(0);
Bmp.Width:=WizardForm.ClientWidth;
Bmp.Height:=ScaleY(371);
Bmp.BackColor:= WizardForm.Color;
Bmp.Parent:= WizardForm;
Bmp.Bitmap.LoadFromFile(ExpandConstant('{tmp}\bg.bmp'));
Bmp.OnMouseDown := @WizardFormMouseDown; //可拉動
//動畫效果
AnimateWindow(StrToInt(ExpandConstant('{wizardhwnd}')), 400, AW_Center or AW_Activate);
SetWindowLong(StrToInt(ExpandConstant('{wizardhwnd}')),GWL_Exstyle, WS_Ex_Layered);
SetLayeredWindowAttributes(StrToInt(ExpandConstant('{wizardhwnd}')), 0, 240, LWA_Alpha);
4、 優化安裝包安裝時間。
把不用的安裝文件重新梳理了一遍，減少打包時的體積，不用多次調用讀寫注冊表。
難點分析：
1、 如何跳過向導頁？
//主要是程序調用“下一步”，然后在ShouldSkipPage函數中進行跳過。
function ShouldSkipPage(PageID: Integer): Boolean;
begin
if PageID=wpWelcome then
result := true;
if PageID=wpSelectDir then
result := true;
end;
2、 “下一步”如何調用？
WizardForm.NextButton.OnClick(WizardForm);
3、 如何用鼠標拉動對話框？
重載WizardFormMouseDown過程，然后調用SendMessage(WizardForm.Handle, WM_SYSCOMMAND, $F012, 0);
4、 如何自定義瀏覽文件夾按鈕？
記住，獲得的路徑要賦給WizardForm.DirEdit.Text，這是瀏覽文件夾向導頁wpSelectDir的路徑編輯框。
procedure DirOnClick(hBtn:HWND);
var
res: Boolean;
UserSelectDir,str: string;
begin
UserSelectDir := Edit.Text;
res := BrowseForFolder('瀏覽文件夾', UserSelectDir, True);
if res then
begin
str:=Copy(UserSelectDir,Length(UserSelectDir),1);//取最后一個字符
if '\'=str then
Edit.Text := UserSelectDir
else
Edit.Text := UserSelectDir;
end;
//瀏覽文件夾向導頁的文件夾路徑
WizardForm.DirEdit.Text := Edit.Text;
end;
5、 如何點擊按鈕顯示“許可協議”？
ShellExec('', ExpandConstant('{tmp}\license.txt'),'', '', SW_SHOW, ewNoWait, ErrorCode)。
6、 如何安裝程序完成后自動運行程序？
Exec(ExpandConstant('{app}\MySoftware.exe'), '', '', SW_SHOW, ewNoWait, RCode);
7、 如何刪除文件夾？
DelTree(ExpandConstant('{app}\文件夾名稱'), True, True, False);
8、 如何關閉向導頁？
WizardForm.Close;
9、 如何自定義完成向導頁的完成按鈕？
通過程序自行調用WizardForm.NextButton.OnClick(WizardForm);達到“下一步”的功能，然后通過函數ShouldSkipPage一直調到最后完成頁wpFinished，最后調用WizardForm.NextButton.OnClick(WizardForm);完成。
10、 如何在安裝頁面換背景圖片？
procedure CurPageChanged(CurPageID: Integer);
begin
if CurPageID = wpInstalling then
begin
Bmp:= TBitmapImage.Create(WizardForm);
Bmp.Top:=ScaleX(0);
Bmp.Left:=ScaleX(0);
Bmp.Width:=WizardForm.ClientWidth;
Bmp.Height:=ScaleY(371);
Bmp.BackColor:= WizardForm.Color;
Bmp.Parent:= WizardForm;
Bmp.Bitmap.LoadFromFile(ExpandConstant('{tmp}\bg2.bmp'));
Bmp.OnMouseDown := @WizardFormMouseDown;
WizardForm.OnMouseDown:=@WizardFormMouseDown;
end;
end;
11、 如何讀寫注冊表？
//讀取信息
RegQueryStringValue(HKLM, 'Software\***\***','Version',svValue)
//寫入信息
RegWriteStringValue(HKLM, 'Software\***\***','Version', '4.0');
12、 安裝前如何判斷是否有進程正在進行？
//安裝前判斷是否有進程正在運行
function IsModuleLoaded(modulename: String ): Boolean;
external 'IsModuleLoaded@files:psvince.dll stdcall setuponly';
IsModuleLoaded('Mysoftware.exe');
13、 如何使用botva2.dll插件創建自定義按鈕？
//調用動態庫函數
function BtnCreate(hParent :HWND; Left, Top, Width, Height :integer; FileName :PAnsiChar; ShadowWidth :integer; IsCheckBtn :boolean) :HWND;
external 'BtnCreate@files:botva2.dll stdcall';
FinishBtnH := BtnCreate(WizardForm.Handle,ProgressBar.Left+ProgressBar.Width-83, ProgressBar.Top+ProgressBar.Height+ScaleX(10), ScaleX(83), ScaleY(28),ExpandConstant('{tmp}\Finish.png'),1,False);
BtnSetEvent(FinishBtnH,BtnClickEventID,WrapBtnCallback(@FinishButtonClick,1));
BtnSetVisibility(FinishBtnH,False);
14、 百分比如何確定？
//百分比
function PBProc(h:hWnd;Msg,wParam,lParam:Longint):Longint;
var
pr,i1,i2 : Extended;
w : integer;
begin
Result:=CallWindowProc(PBOldProc,h,Msg,wParam,lParam);
if (Msg=$402) and (WizardForm.ProgressGauge.Position>WizardForm.ProgressGauge.Min) then
begin
i1:=WizardForm.ProgressGauge.Position-WizardForm.ProgressGauge.Min;
i2:=WizardForm.ProgressGauge.Max-WizardForm.ProgressGauge.Min;
pr:=i1*100/i2;
PrLabel.Caption:=IntToStr(Round(pr))+'%';
w:=Round(110*pr/100); //改變數值，達到百分比和進度條的同步
ProgressBar.Position := w;
end;
end;
錯誤解決：
對於某些電腦環境，安裝時只要點擊“退出”按鈕或者安裝完后總會遇到這個錯誤，彈出以下提示圖片：
解決辦法:
因為調用WizardForm.Close或者WizardForm.NextButton.OnClick(WizardForm)退出時沒有進行WizardForm的資源釋放，所以導致了該錯誤。只要在退出或者完成前加上WizardForm.Release即可解決。
————————————————
版權聲明：本文為CSDN博主「沉森心」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/oceanlucy/article/details/50033773