WPF換膚之一 建立圓角窗體

原文:

wpf換膚之一：建立圓角窗體

我們都期望自己的軟體能夠有一套看上去很吸引人眼球的外衣，使得別人看上去既專業又有美感。這個系列就帶領著大家一步一步的講解如何設計出一套自己的wpf的窗體**，如果文中有任何錯誤或者不足，還請指出。

wpf是微軟大戰略中的乙個重心所在，學習wpf可謂是一舉多得：首先，學習wpf可以讓你了解silverlight的80%；其次，xaml語言可以讓你快速的入手wcf和wf；更甚者，就是wpf給予dx渲染核心，拋棄了傳統winform以gdi+為主的渲染方式，使得介面更新更流暢，徹底解決了閃爍問題，同時也使得**和介面顯示分離，這和以前winform方式完全不同。

那麼，本節開始就以最簡單的方式來介紹如何建立乙個圓角的窗體。

簡單介紹xaml

首先，讓我來說一下xaml，因為只有了解了它，我們才能夠更加深入的來介紹如何建立圓角窗體。

所謂的xaml就是一坨類似xml的可擴充套件應用程式的標記語言，它能夠詳細的描述使用者介面元素，比如說textbox，button等等的資訊，以便做到精確的設定或者定位。具體的大家還是參考一些其他的資料吧，反正記住xaml和html類似，都是描述介面元素的特定語言而已。

在winform中，我們自繪圓角窗體的時候，都是先把窗體置為formborderstyle為none的狀態，即無窗體模式；然後我們會結合後台**先繪製出窗體的區域，然後通過win32函式裡面的createroundrectrgn()方法進行切割；最後通過wndproc(ref message m)處理窗體介面訊息即可。

建立圓角窗體

在wpf中，建立圓角窗體相當簡單，根本不需要那麼多的步驟，下面看我的操作：

首先，我們需要設定wpf的窗體樣式為none，這個和winform設計差不多，就是設定windowstyle為none即可，這樣當我們執行f5就可以看到乙個無邊框的窗體。

其次，我們需要設定allowtransparency為true，background為transparent，opacitymask為white，這樣設定才能保證當我們設定為圓角的時候，四個角能夠透明顯示，這樣當我們f5執行的時候，將看不到任何窗體，因為已經透明了。

最後，怎麼新增圓角呢，這個很簡單，直接利用border元素即可，加入如下**：

<

window 
x:class
xmlns
=""xmlns:x
=""title
="testwindow"
height
="391"
width
="418"
windowstyle
="none"
allowstransparency
="true"
background
="transparent"
opacitymask
="white"
resizemode
="noresize"
previewmousemove
="resetcursor"
windowstartuplocation
="centerscreen"
>
<
grid 
background
="transparent"
>
<
border 
borderthickness
="5"
borderbrush
="darkgreen"
cornerradius
="10,10,10,10"
mousemove
="displayresizecursor"
previewmousedown
="resize"
name
="top"
>
<
grid
>
<
listbox 
margin
="16,51,18,62"
name
="uniquemessages"
/>
<
label 
height
="28"
horizontalalignment
="left"
margin
="16,17,0,0"
name
="label1"
verticalalignment
="top"
width
="120"
>label
label
>
grid
>
border
>
grid
>
window
>

效果如下：

可以看到，整個窗體居然是透明的，圓角部分顯示的很完美。控制項放在了透明的窗體上，這樣也就預示我們成功了一半。

接下來，我們設定border的background，用以遮蔽窗體中無需透明的部分。

**如下：

<

window 
x:class
xmlns
=""xmlns:x
=""title
="testwindow"
height
="391"
width
="418"
windowstyle
="none"
allowstransparency
="true"
background
="transparent"
opacitymask
="white"
resizemode
="noresize"
previewmousemove
="resetcursor"
windowstartuplocation
="centerscreen"
>
<
grid 
background
="transparent"
>
<
border 
borderthickness
="5"
borderbrush
="darkgreen"
cornerradius
="10,10,10,10"
mousemove
="displayresizecursor"
previewmousedown
="resize"
name
="top"
>
<
border.background
>
<
lineargradientbrush 
endpoint
="0.5,1"
startpoint
="0.5,0"
>
<
gradientstop 
color
="#eee"
/>
lineargradientbrush
>
border.background
>
<
grid
>
<
listbox 
margin
="16,51,18,62"
name
="uniquemessages"
/>
<
label 
height
="28"
horizontalalignment
="left"
margin
="16,17,0,0"
name
="label1"
verticalalignment
="top"
width
="120"
>label
label
>
grid
>
border
>
grid
>
window
>

這樣當我們再執行的時候，就可以看到效果了： 

好了，這個窗體雖然完成了，但是如何進行拖拽而改變其大小呢？下節將繼續講解。

WPF換膚之一 建立圓角窗體

wpf換膚之一 建立圓角窗體 我們都期望自己的軟體能夠有一套看上去很吸引人眼球的外衣，使得別人看上去既專業又有美感。這個系列就帶領著大家一步一步的講解如何設計出一套自己的wpf的窗體 如果文中有任何錯誤或者不足，還請指出。wpf是微軟大戰略中的乙個重心所在，學習wpf可謂是一舉多得 首先，學習wpf...

WPF換膚之一 建立圓角窗體

我們都期望自己的軟體能夠有一套看上去很吸引人眼球的外衣，使得別人看上去既專業又有美感。這個系列就帶領著大家一步一步的講解如何設計出一套自己的wpf的窗體 如果文中有任何錯誤或者不足，還請指出。wpf是微軟大戰略中的乙個重心所在，學習wpf可謂是一舉多得 首先，學習wpf可以讓你了解silverlig...

WPF換膚之五 建立漂亮的窗體

原文 wpf換膚之五 建立漂亮的窗體 換膚效果 經過了前面四章的講解，我們終於知道了如何拖拉窗體使之改變大小，也知道了如何處理滑鼠事件，同時，也知道了如何利用更好的編寫方式來編寫乙個方便實用和維護的換膚程式。下面請看換膚效果 首先宣告，窗體樣式和按鈕樣式均來自於codeproject，本人美工太差 ...