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="WpfApplication1.MsgWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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>

    其中，BorderThickness用來表示Border的粗細程度，BorderBrush用來表示Border的顏色，CornerRadius表明四個角的彎曲度。

    效果如下：

 

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

    接下來，我們設置Border的Background，用以遮蔽窗體中無需透明的部分。

代碼如下：

<Window x:Class="WpfApplication1.MsgWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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>

    其中，LinearGradientBrush用來繪制border區域的背景，以便遮蔽透明窗體部分。

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

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