分类目录

链接

2012年 1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

近期文章

热门标签

新人福利,免费薅羊毛

现在位置:    首页 > .NET > 正文
WPF实战系列-图形透明度与混色特效
.NET 暂无评论 阅读(4,458)

 提示框(有趣小Demo)

做了一个有趣的小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事件。

源代码下载

============ 欢迎各位老板打赏~ ===========

本文版权归Bruce's Blog所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:WPF实战系列-图形透明度与混色特效 | Bruce's Blog

发表评论

留言无头像?