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

来源：互联网发布：剑灵怎么优化不卡编辑：程序博客网时间：2024/05/17 03:30

提示框（有趣小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事件。

源代码下载

来自：http://www.cnblogs.com/zwzw/archive/2012/01/13/hao.html

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

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