走进WPF系列学习之三 如何应用WPF控制图形透明度与混色特效

提示框（有趣小Demo）

昨天跟大家探讨了“如何使用WPF绘制2D图形界面”的话题，觉得还蛮有意思的，有种意犹未尽的感觉，所以昨天下班回家之后有捣腾了一下，做了一个有趣的小Demo，下面首先给大家Share一下我昨天晚上的成果:

做出来的最后运行效果如上图所示，由于只能用图片显示，其实但当你按住鼠标左键，然后可以在屏幕上拖动该提示框（我觉得效果还可了，哈哈），我会在后面提供源码的下载，大家可以下载下来，在本地运行着看一哈子，体验一下。用WPF来做这个提示框其实很简单，很多复杂的东西Microsoft都给我们做好了，我们只要会用就可以了，以后在慢慢搞清楚其中的实现原理就OK啦。其实我觉得学新技术就是这样子的，先学会怎么用，然后在运用的过程中逐步体会其中的实现原理，然后融汇贯通，最后真正为我所用。

具体实现如下：

<Window x:Class="Demo_Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Dialogue Window" Height="350" Width="525"
        MouseLeftButtonDown="Window_MouseLeftButtonDown"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent">
    <Grid>
        <Canvas Width="200" Height="200">
            <Path Stroke="DarkGray" StrokeThickness="2">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1">
                        <GradientStop Color="White" Offset="0"></GradientStop>
                        <GradientStop Color="White" Offset="0.45"></GradientStop>
                        <GradientStop Color="White" Offset="0.9"></GradientStop>
                        <GradientStop Color="White" Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="40,20" IsClosed="True">
                            <LineSegment Point="160,20"></LineSegment>
                            <ArcSegment Point="180,40" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                            <LineSegment Point="180,80"></LineSegment> 
                            <ArcSegment Point="160,100" Size="20,20" SweepDirection="Clockwise"></ArcSegment> 
                            <LineSegment Point="90,100"></LineSegment> 
                            <LineSegment Point="90,150"></LineSegment> 
                            <LineSegment Point="60,100"></LineSegment> 
                            <LineSegment Point="40,100"></LineSegment> 
                            <ArcSegment Point="20,80" Size="20,20" SweepDirection="Clockwise"></ArcSegment> 
                            <LineSegment Point="20,40"></LineSegment> 
                            <ArcSegment Point="40,20" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Label Width="200" Height="120" FontSize="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">Hello，大家好</Label> 
            <Button Canvas.Left="155" Canvas.Top="30" Click="closeButtonRectangle_Click">
                <Button.Template>
                    <ControlTemplate>
                        <Canvas>
                            <Rectangle Width="15" Height="15" Stroke="Black" RadiusX="3" RadiusY="3">
                                <Rectangle.Fill>
                                    <SolidColorBrush x:Name="myAnimatedBrush" Color="Red" /> 
                                </Rectangle.Fill> 
                            </Rectangle> 
                            <Line X1="3" Y1="3" X2="12" Y2="12" Stroke="White" StrokeThickness="2"></Line> 
                            <Line X1="12" Y1="3" X2="3" Y2="12" Stroke="White" StrokeThickness="2"></Line>
                        </Canvas>
                    </ControlTemplate>
                </Button.Template> 
            </Button>
        </Canvas>
    </Grid>
</Window>

大家可以看到这就是实现提示框的全部XAML，很简单吧，简单解释一下上面的东东：

首先在一张画布（<Canvas>.........</Canvas>）中绘制一个面板（<Path>....</Path>）、一个按钮（<Button>.....</Button>）和一个标签（<Label>.........</Label>）。Button在图片中呈现出来的就是那个红色的"X"，Label的作用是用来显示文字的，而Path的功能是描画出提示框的边框形状。很简单。。。。。

后台的C#代码：

using System.Windows;
using System.Windows.Input;

namespace Demo_Example
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void closeButtonRectangle_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }
    }
}

也很简单就两个时间：一个closeButtonRectangle_Click和Window_MouseLeftButtonDown

closeButtonRectangle_Click是关闭按钮的事件

Window_MouseLeftButtonDown看名字就知道了，要注意这个时间的申明，它是在XAML代码申明的：MouseLeftButtonDown="Window_MouseLeftButtonDown"。

源代码下载

图像的透明度和混色特效

第一：透明度

图像的透明度和混色特效是依次递进的关系，也就是说要想实现混色特效就要先搞定透明度。那么我们就先来看看WPF的透明度到底是何方神圣吧。往往最高的武功都是一招致命的，所以要实现透明度一招足矣：

使用属性：Opacity的值来控制。Opacity的取值的范围是0—1(可以超过1，但是超过1的效果跟1是一样的)，为了大家能够直观了解，我还用效果说话吧

当Opacity=”1“时： 

    <Grid>
        <Ellipse Height="100" HorizontalAlignment="Left" Margin="116,87,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="200" Fill="Red" Opacity="1" />
    </Grid>

效果如图：

 当Opacity=”0.1“时：

    <Grid>
        <Ellipse Height="100" HorizontalAlignment="Left" Margin="116,87,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="200" Fill="Red" Opacity="0.1" />
    </Grid>

效果如图：

效果很明显吧，不用多解释了。

第二：混色特效

混色就是集中颜色混在一起所呈现出来的颜色，例如：

看起来可能不怎么明显，可能我的颜色搭配不好，大家可以自己动手试一下子来感受一下。看到上面的这幅图大家有没有什么想法，对的，我们能不能控制图像它们的现实顺序呢，例如现在时红色的矩形在最上面，我们可不可以让他显示在最下面呢？答案肯定是可以的，很简单，我们有两种方法来实现它。

第一种，用鼠标右键点击该图像，进行选择

第二种，就是手动的修改XAML代码的顺序例如：

    <Grid>
        <Rectangle Height="100" HorizontalAlignment="Left" Margin="12,70,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="200" Opacity="0.6" Fill="Red" />
        <Ellipse Height="84" HorizontalAlignment="Left" Margin="36,55,0,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" Width="145" Fill="Yellow" Opacity="0.4" />
        <Ellipse Height="99" HorizontalAlignment="Left" Margin="35,94,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="146" Fill="Blue" Opacity="0.9" />
    </Grid>

这样矩形就被放到最下面了：

第三：设置渐变色

我们通过WPF可以很简单的完成图片颜色的渐变，只需要设置属性就可以了，例如：

效果还可以，当然你可以尽量的发挥自己的想法设计各种很炫的颜色。要实现上面的效果图XAML代码：

        <Rectangle Height="100" HorizontalAlignment="Left" Margin="257,102,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="200">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

如果不想写XAML也可以直接在属性框中进行相应的设计，效果是一样的。

第四：对整个窗体的透明度设置

如果大家看懂了我上面所说的东东，那么窗体的设置也很简单，但是有几个需要注意的地方：

如果直接设置Windows窗体的Opacity属性的话，运行得到的效果你是我们想要的，大家可以试一试，要想得更好的效果，我们可以通过另外的设置来完成，代码： 

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        MouseLeftButtonDown="Window_MouseLeftButtonDown"
        MouseDoubleClick="Window_MouseDoubleClick"
        MouseDown="Window_MouseDown"
        MouseMove="Window_MouseMove"
        Title="MainWindow" Height="350" Width="525" Opacity="0.3" AllowsTransparency="True"  WindowStyle="None">

 解释一下上面的几个属性，MouseDoubleClick="Window_MouseDoubleClick"当鼠标双击时关闭窗体。MouseLeftButtonDown="Window_MouseLeftButtonDown"是用来控制鼠标拖动窗体的，而MouseDown="Window_MouseDown" 和 MouseMove="Window_MouseMove" 是我在后写代码来控制鼠标拖动窗体的实现，虽然效果没有前者好，但是这是我自己动脑筋思考的结果，也是学习的过程，如果大家想看后者的效果，就要先把"MouseLeftButtonDown="Window_MouseLeftButtonDown“”去掉，给大家分享一下代码：

        private double oldX, oldY;
        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            oldX = e.GetPosition(this).X;
            oldY = e.GetPosition(this).Y;
        }

        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                double x = e.GetPosition(this).X;
                double y = e.GetPosition(this).Y;
                double dx = x - oldX;
                double dy = y - oldY;

                this.Left += dx;
                this.Top += dy; 

                oldX = x;
                oldY = y;
            }
        }

代码很短，思路就是：当鼠标点击时获取坐标，并赋值给oldx、oldy，然后当鼠标移动时就累加相应的距离并赋值给Left和Top属性，然后重新给oldx、oldy赋值，而且只要鼠标移动就触发Window_MouseMove事件。

源代码下载

 

今天是过年之前最后一天在公司上班了，明天就回老家过年咯，所以本系列文章今年暂时写到今天为止，明年开年来了之后我会继续这一系列文章，希望大家见谅。最后真心祝福大家：

工作顺利，新年快乐，万事如意！