如何讓WPF控制項產生陰影效果

在WPF中可以利用BitmapEffect(點陣圖效果), 使控制項呈現一些影像特效;如: Blur(模糊效果), Shadow(陰影效果), Bevel(斜面), Emboss(凹凸)和色彩光暈等....

在這篇文章中, 我們先來介紹會使控制像看起來比較有立體感的陰影效果.

由於BitmapEffect 是 Visual 物件上的屬性, 因此, 我們可將BitmapEffect套用至任何視覺物件(例如 Button,Image, DrawingVisual 或 UIElement)上. 例如我們可以利用DropShadowBitmapEffect 物件建立 WPF 物件的各種下拉式陰影效果.

它提供下列屬性來讓你自訂陰影效果:

• Color - 設定陰影的顏色
• Opacity - 設定陰影的透明度, 設定範圍為0 至1, 預設值是1
• ShadowDepth - 控制陰影的寬,有效值的範圍為 0 至 300。預設值為 5
• Direction - 控制陰影的方向。請將這個屬性的方向值設定為介於 0 與 360 之間的度數. 0表示陰影會顯示在物件的正右方, 隨著Direction的增加, 陰影會逆時針方向移動
• Softness - 控制陰影的柔和度或模糊,值 0.0 表示沒有模糊，而值 1.0 則表示全部模糊

下面的範例中, 我們將圖1透過DropShadowBitmapEffect 的效果, 產生出如圖片2的陰影效果:

XAML檔如下所示:

<Image Source="tulips.jpg"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Margin="80, 50, 80, 50"
       Name="image1"
       Stretch="Fill" >
    <Image.BitmapEffect>
          <DropShadowBitmapEffect ShadowDepth="20"
                                  Direction="300"
                                  Color="Black"
                                  Opacity="0.5"
                                  Softness="0.25" />                                   
    </Image.BitmapEffect>
</Image>

[圖1]沒有陰影效果



[圖2]加上陰影效果



需要注意的地方:

WPF 點陣圖效果是在軟體模式中呈現. 而且是由UI執行緒執行, 而不是呈現的執行緒, 因此使用點陣圖效果會對效能有很大的影響(效能和元素的數量成正比), 所以最好在少量而且是靜態的內容才使用這些效果. 尤其在大型視覺物件上使用點陣圖效果, 或者以點陣圖效果的屬性建立動畫時, 效能會降低最多.

參考文章 :
MSDN - 點陣圖效果概觀
MSDN - 建立含陰影的文字