【WPF】OpacityMask作用于Button的一点体会

　　　　前一阵在用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 被盗，故换坑到此。

转载于:https://www.cnblogs.com/JamesWill/p/4737315.html