關於新版移植及Skin及自製按鈕效果

基本上Windows視窗程式也是可以玩一些花招的，一般有錢的會去買skin，替您的按鈕或元件換上比較好看的特效，在C++ Builder這邊有兩個比較知名的Skin

http://www.alphaskins.com/

https://www.devexpress.com/Products/VCL/

也就是有錢的話，您可以買上面的元件來使用，幫助您的畫面更好看，

我們再買一些額外的附件的時候，一般最好選擇大廠有人在更新維護的，不然當您的畫面做好了，過陣子您C++ Builder版本升級，結果該元件不支援新版，這時候您的程式會被Skin綁死，導致不能更新新版

這邊也順便提到為什麼要用新版，其實C++ Builder已經很完善了，有一個版本就可以用來工作賺錢了，其實這樣也沒錯，

但是其實新版都有一些新的東西，例如XE7有TThreadPool可以用，也就是有內建執行緒池，XE10突然間Compiler支援了多執行緒編譯執行檔，原來的64bit編譯時間快了很多，這些都是新版持續更新的，

那要是您被某種已經不更新的Skin綁死(就是您用那種skin或vcl元件做好了，但卻因此不能升級新版)，想想不能升級到XE10，您編譯一個執行檔要好久，很糟糕的，工作效率因此降低

因此這邊提到一些插件和Skin要慎選，最好是有人在持續維護的，不然會影響換新版

當然我們也沒有閒錢一直買新軟件，做移植其實也很浪費時間的，我認為還是要一段時間更新一次版本，避免與時代脫節，其實當您有做過移植這段的工作時，您會發現其實XE7後面版本幾乎移植一次後再移植是很快的，痛只要一次爾已，大部分都是C++11，他比較嚴謹，所以要改很多地方，但是當您已經相容C++11，後面其實都是小改小改，還OK的

當然有些人很不喜歡平台改來改去，那您想想BCB5跟BCB6再過10年您保證他還是可以Work在新的OS下嗎，移植是必須的

當然選版本移植也很重要，總之要持續關注拉，像我剛剛提到XE10支援多執行緒編譯執行檔，那有人會問是不是就移植到這板後面就不用移植了?

您有在認真寫Code的話，您會發現XE10 CodeGuard還是只支援傳統的Borland C++編譯器，其實CodeGuard很好用，不能沒有她，因此就我目前而言，再等一版新版的可以用新的編譯器又有類似CodeGuard可以幫我們抓錯誤的版本，我會打算再移植一次

那未來呢?總之自己決定要怎樣處理，不是我在推銷新版(其實我也用迷版(在家自己玩，正版對於一般收入的人是買不起的，何況要持續升級))，如果您真的有認真在做程式的話，其實要多關注新版帶來的好處

就像是您有用過Word2016嗎，她右邊多了頁面索引(可能2013就有了)，那您還要用2007版嗎，新版本其實有些版本對工作效率的提升有很大幫助的

那這樣說其實更新到XE10就夠了嗎，其實不是的，

這邊都是廢話，進入正題

上面是一些概念及Skin介紹，主要是要介紹Skin拉

有錢的人就用買的吧，那您想想我們比較窮的，不想花錢買Skin的要怎辦(其實Skin也有提供一些功能，例如可以在標題列加按鈕，我並沒有說他只是用來作UI漂亮用的)，其實有一些自製效果可以經由模組化的方式，來讓您做出有一些效果的按鈕，有用過網頁您就會看到當您滑鼠移到一些點選的地方，該地方會變色，移開時會恢復，那按下時可能又有另一種顏色，這C++ Builder也可以做得到

作法大概講一下，例如移動到按鈕上會變色，移開會恢復，按下會變色，

這我們可以利用TTimer和TPanel來實作，大概意思是利用程式碼將OnMouseMove，OnMouseDown等事件，寫在模組裡面，用模組設計他的事件處理

例如滑鼠移進去，我們變更Panel顏色，按下時再變更Panel顏色，當離開Panel區域時，我們利用Timer來監控是否已經離開Panel範圍，假設離開了恢復按鈕顏色

這樣就設計成一個有效果的按鈕(當然您Onclick時可以做您要的動作)

只可以寫死控制顏色嗎?當然不是，您可以定義Move，Down，Leave實的顏色，用程式碼更改，他就可以設定各種顏色

那要是您要其他效果呢，例如Move時字體加底線，移開時恢復，是類似作法，這請自己想

我這邊提供三種模組

一個是Panel按鈕

一個是Panel Down按鈕

一個是Pic Panel按鈕

怎麼做的就不說了，請自行看我範例的代碼和我怎樣做設定的，這其實是我在前公司做出的模組，不過我怕有法律問題，有稍微改名字一下，請自行研究吧

其實很龜毛的是它就是Panel Button，那我取名就直觀取Panel_Button.cpp，這樣要自己用還要改名，真的很麻煩，丟上來網路我又沒錢賺，還要花功夫，很糟糕的

範例連結

https://drive.google.com/open?id=0B6u5oifJv3EKXzRwNEF1QzJFUzQ

自己研究吧，不難的

Windows程式畫面布局設計概念

這個布局部分有點多，所以可能的話會分幾次來講

基本上您會發現，相同應用的軟件，基本上畫面布局(Layout)都很像，佈局是指什麼，就是您在畫面上放置一些容器，讓框架內可以放置一些您的按鈕或者是輸入欄位，當然也可以是顯示圖片

大概長這樣

這是一個空白的Form

 如下，我加了一個Menu選單，一個狀態列，還有兩個Panel容器，其中Panel上面可以根據我的需要，放一些元件

其中用Panel或者是其他容器(例如ScrollBox，Notebook)，定出畫面的擺放，這叫做布局(Layout)

這裡就直接稱乎布局了

我們常常看到很多舊型的程式，都會有一些相似的布局

我們以C++ Builder為例(這是新版的)

最上方會有一個Menu，再來下面是一些快捷按鈕，左邊是屬性設計，右邊也是顯示一些資訊的地方，下方會有一個狀態列(其中他將狀態列換成自製的)，

基本上C++Builder他的視窗可以到處搬動，這已經是屬於進階部份了，不過基本樣式是固定的

因此就我剛剛提到的那些基本元素，我大概拉一個基本樣式

最上方有一個Menu，下面是一些快捷按鈕，例如按完可以做計算還是幹嘛，總之就是一些按鈕，再來是最下方的狀態列，而中間兩個則是自己設計的框架，我的框架式左右兩個Panel，右邊是放參數的，左邊是主要顯示Client視窗，

基本上您會在很多古早的應用程式，大約Windows XP那個年代，大概都長這個樣子

這是最最最基本的，也就是您完成一個應用程式，假設小到不行，您可以參考這總方式做基本畫面布局，

總之就是很古老的做法就是了，基本上您看到現在的一些應用程式很花俏，充滿了無數的設計，所以這簡單的畫面布局基本上也不算什麼秘密了，要做到像一些大型軟件那樣，其實是很多設計的，絕對不是就這樣弄一個Form，然後全部東西都弄在這裡，就結束了

大型軟件是指什麼，例如您打開近代的Word，C++ Builder，Visual Studio，他們會有一些框架，不同框架放不同的功能，其實您數一數可能也10~20種，您要在一個FHD的螢幕上，規劃10~20種框架，是不可能釘一釘Panel就處理完的，

因此這是一門學問也是一門藝術，但是基本上像這種大型軟件，框架可以到處釘，基本上這是模組化設計了(老實說我也不會)，這就不再我們討論範圍，這一般沒有10來個人同時寫一支程式不太可能完成，我這裡會介紹的比較偏向於一個人能獨自完成的應用程式

如上面您看到我弄的框架，基本上很死，框架都釘好了，基本上是無法做任何變化的，

我們這裡談到的設計，牽涉到UX(User experience design )，也就是使用者體驗，

說他簡單，也很簡單，其實一個重要意義就是您的畫面如何設計，可以讓使用者操作起來最舒服，最方便

但是說他難，也很難，我們一支程式通常是從無到有，一般您在公司裡接案子，客戶不會一次就將所有要做的功能都跟您說，因此您的介面會一直增加新的東西

您會發現做一做，需求一直進來，您就加入很多東西，最後都塞到同一個地方，例如剛剛的圖，只有6個欄位，那要您的欄位一直加一直加，加到了20多個，通常來說，欄位太多要設定，如果您沒做分類處理，或者做一些分業，使用者會用起來很不舒服

假設您一支程式有一個功能，有18個參數可以控制，您以一個程式設計師來說最簡單的就是將欄位照順序分在一起

這裡就不做命名了，總之就是不同參數的欄位，這一般有接過案子才能體會，我也不知如何表達，總之您就把他想成您有18個欄位可以控制就是了

基本上您沒做分類，要懂怎麼操作您的軟體看了就不想學了，

所以我們先做基本分類，好啦，就假設我這個程式可以用來設定動物身上的顏色，

假設相關的顏色欄位，狗有6個，貓有4個，鳥有8個，

我們做一個索引如圖

這樣做簡單歸類，操作員就知道假設他要設定狗相關顏色參數，就改納六個欄位就好了，依此類推，我們程式設計目的做一支好用的程式給使用者，而不是只是為了完成功能賺錢而添加新的功能，這在一些比較落後的公司都不注重這個，往往就要啥參數就加啥，然後放一大堆，基本上要是我是使用者，我看到就不想用了，更別說對您的軟體有興趣，

當然講這樣好像太淺了，很像我是白癡一樣，所以我就再衍伸出去

通常我們程式是可以縮放的，要是您把參數欄位放在Panel上面，您會發現縮小時，欄位被遮住了，如圖

雖然看起來很弱智，但是假設是初學者對元件不熟，一定做到後來就會發生這個錯誤，基本上我們就使用ScrollBox，他會有ScrollBar可以拖曳，就不會擋到您的欄位了

這樣其實還不夠，通常使用者再看欄位時，可能一次10個以上就會抱怨了，所以除了分類，我們還要做分頁，最簡單的Solution就是PageControl，當然有很多替代的，也可以自己設計，這裡就不講自己設計的部分(因為要寫Code)，其實自己設計的話會比較漂亮，所以我們將PageControl做三頁，將這些欄位分別放入PageControl的TabSheet裡面

您只要切換頁籤就可以設定不同的動物顏色，但是您會發現問題又來了，畫面縮小時又會欄位了

基本上就是

PageControl本身不會有ScrollBar，因此我們需要在它上面分別放上ScrollBox，再在ScrollBox上面放元件，這樣當縮小時就又會出現ScrollBar了

基本上您會發現ScrollBox很好用，他會幫您自動產生ScrollBar但是必須是元件跑到ScrollBox外面才會出現，

原則上如果您沒做畫面設計的話您大多時間會做我上面在做的事情，就是畫面布局，及參數分類管理，原則上可用的元件還是要熟拉，假設您沒有要深入，會到這裡就可以了

偷偷給您看經過畫面設計會有啥不一樣，我大概弄給您看，大概就是將PageControl改成自己用程式碼設定呼叫頁面顯示，往後教程我會弄一個範例給您下載研究，您會發現其實軟體是有很多技巧的，而不是就只是拉拉元件，兜兜功能，寫寫核心演算法就沒了

這裡只是先秀給您看一張圖

自製的PageControl，其中滑鼠放上去按鈕(其實他是Panel做的)他會變色，

這技術其實可以常常在網頁上看到，是一個模組化技巧(由於關鍵，就晚點再秀了(0 .0明年看有沒有機會)，只要您會模組化，這種東西可以千變萬化)

先到這了