你的位置:首页 > ASP.net教程

[ASP.net教程]【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 被盗,故换坑到此。