前一阵在用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 被盗,故换坑到此。
原标题:【WPF】OpacityMask作用于Button的一点体会
关键词:wpf