前一陣在用WPF寫一個硬件測試程序，想把界面做的漂亮一點(毛玻璃效果)，在網上找了半天，結果發現了個OpacityMask這個屬性，隨之便研究了一下。發現了點意想不到的效果。使用此屬性可以達到做網頁時按鈕hover改變背景圖片的功能，而且使用的只是一張圖片，不是兩張圖片。具體效果請看下圖:
程序中使用到的按鈕圖片:
1. 
2. 
程序很簡單，就是5個按鈕。程序結構圖如下:
================ 開發環境 ================
系統: Win7 sp1 32位
IDE: Microsoft Visual Studio 2015 Enterprise
工程: .Net Framework 4.6
=========================================
程序中涉及到了幾個技術要點:
1. 按鈕樣式的綁定
2. 按鈕自定義樣式
3. 按鈕自定義樣式的觸發條件設置
4. 參考文章:
<<不透明遮罩概述>> https://msdn.microsoft.com/zh-cn/library/ms743320.aspx
具體程序如下所示:
1 <Window.Resources> 2 <SolidColorBrush x:Key="BackgroundColorAndText" Color="#2D2D30"/> 3 <Style x:Key="NormalButton" TargetType="Button"> 4 <Setter Property="Width" Value="64"/> 5 <Setter Property="Height" Value="64"/> 6 <Setter Property="Margin" Value="5"/> 7 <Setter Property="SnapsToDevicePixels" Value="True"/> 8 <Setter Property="Background" Value="{StaticResource BackgroundColorAndText}"/> 9 </Style> 10 <Style x:Key="NormalTextBlock" TargetType="TextBlock"> 11 <Setter Property="VerticalAlignment" Value="Center"/> 12 <Setter Property="HorizontalAlignment" Value="Center"/> 13 <Setter Property="Foreground" Value="{StaticResource BackgroundColorAndText}"/> 14 </Style> 15 </Window.Resources> 16 <WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 17 <StackPanel> 18 <Button Style="{StaticResource NormalButton}"> 19 <Image Stretch="None" Source="Assets/Images/a.png"/> 20 </Button> 21 <TextBlock Style="{StaticResource NormalTextBlock}">貼圖按鈕</TextBlock> 22 </StackPanel> 23 <StackPanel> 24 <Button Style="{StaticResource NormalButton}"> 25 <Button.OpacityMask> 26 <ImageBrush Stretch="None" ImageSource="Assets/Images/a.png"/> 27 </Button.OpacityMask> 28 </Button> 29 <TextBlock Style="{StaticResource NormalTextBlock}">蒙板遮罩</TextBlock> 30 </StackPanel> 31 <StackPanel> 32 <Button Style="{StaticResource NormalButton}"> 33 <Button.OpacityMask> 34 <ImageBrush Stretch="None" ImageSource="Assets/Images/a.png"/> 35 </Button.OpacityMask> 36 <Image Stretch="None" Source="Assets/Images/a.png"/> 37 </Button> 38 <TextBlock Style="{StaticResource NormalTextBlock}">貼圖蒙板遮罩</TextBlock> 39 </StackPanel> 40 <StackPanel> 41 <Button Style="{StaticResource NormalButton}"> 42 <Button.Template> 43 <ControlTemplate TargetType="Button"> 44 <Border x:Name="ButtonBorder" CornerRadius="3"> 45 <Image x:Name="Button4Image" Stretch="None" Source="Assets/Images/b.png"/> 46 </Border> 47 <ControlTemplate.Triggers> 48 <Trigger Property="IsMouseOver" Value="True"> 49 <Setter TargetName="ButtonBorder" Property="Background" Value="#1468A0"/> 50 </Trigger> 51 <Trigger Property="IsMouseOver" Value="True"> 52 <Setter Property="OpacityMask"> 53 <Setter.Value> 54 <ImageBrush Stretch="None" ImageSource="Assets/Images/b.png"/> 55 </Setter.Value> 56 </Setter> 57 </Trigger> 58 <Trigger Property="IsMouseOver" Value="True"> 59 <Setter TargetName="Button4Image" Property="Source" Value="{x:Null}"/> 60 </Trigger> 61 </ControlTemplate.Triggers> 62 </ControlTemplate> 63 </Button.Template> 64 </Button> 65 <TextBlock Style="{StaticResource NormalTextBlock}">Hover變色</TextBlock> 66 </StackPanel> 67 <StackPanel> 68 <Button Style="{StaticResource NormalButton}"> 69 <Button.Template> 70 <ControlTemplate TargetType="Button"> 71 <Border x:Name="ButtonBorder" CornerRadius="3" Background="{StaticResource BackgroundColorAndText}"> 72 <Image x:Name="Button4Image" Stretch="None" Source="Assets/Images/a.png"/> 73 </Border> 74 <ControlTemplate.Triggers> 75 <Trigger Property="IsMouseOver" Value="True"> 76 <Setter Property="OpacityMask"> 77 <Setter.Value> 78 <ImageBrush Stretch="None" ImageSource="Assets/Images/a.png"/> 79 </Setter.Value> 80 </Setter> 81 </Trigger> 82 <Trigger Property="IsMouseOver" Value="True"> 83 <Setter TargetName="Button4Image" Property="Source" Value="{x:Null}"/> 84 </Trigger> 85 </ControlTemplate.Triggers> 86 </ControlTemplate> 87 </Button.Template> 88 </Button> 89 <TextBlock Style="{StaticResource NormalTextBlock}">Hover變色</TextBlock> 90 </StackPanel> 91 </WrapPanel>
5個按鈕中第三個按鈕[貼圖蒙板遮罩]這個按鈕是圖片1和OpacityMask效果疊加產生的，具體能應用到的地方還未知，也許你能發現呢?
原博客: http://blog.csdn.net/xchicken 被盜，故換坑到此。