昨天跟大家探讨了“如何使用WPF绘制2D图形界面”的话题,觉得还蛮有意思的,有种意犹未尽的感觉,所以昨天下班回家之后有捣腾了一下,做了一个有趣的小Demo,下面首先给大家Share一下我昨天晚上的成果:
![](https://i-blog.csdnimg.cn/blog_migrate/7aee5ba371b7634840d58d41660c057d.png)
做出来的最后运行效果如上图所示,由于只能用图片显示,其实但当你按住鼠标左键,然后可以在屏幕上拖动该提示框(我觉得效果还可了,哈哈),我会在后面提供源码的下载,大家可以下载下来,在本地运行着看一哈子,体验一下。用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>
效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/81658964931a1b9b5c97541e5274da1d.png)
当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>
效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/1aed1f3f31e525b6b9b5dcbb538cad87.png)
效果很明显吧,不用多解释了。
第二:混色特效
混色就是集中颜色混在一起所呈现出来的颜色,例如:
![](https://i-blog.csdnimg.cn/blog_migrate/c23fc6400afeab730982b21e2c6853a8.png)
看起来可能不怎么明显,可能我的颜色搭配不好,大家可以自己动手试一下子来感受一下。看到上面的这幅图大家有没有什么想法,对的,我们能不能控制图像它们的现实顺序呢,例如现在时红色的矩形在最上面,我们可不可以让他显示在最下面呢?答案肯定是可以的,很简单,我们有两种方法来实现它。
第一种,用鼠标右键点击该图像,进行选择
第二种,就是手动的修改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>
这样矩形就被放到最下面了:
![](https://i-blog.csdnimg.cn/blog_migrate/2d1345e7c7030d3370346309a61641e5.png)
第三:设置渐变色
我们通过WPF可以很简单的完成图片颜色的渐变,只需要设置属性就可以了,例如:
![](https://i-blog.csdnimg.cn/blog_migrate/026af8133f24c35d9229f0e54063bb75.png)
效果还可以,当然你可以尽量的发挥自己的想法设计各种很炫的颜色。要实现上面的效果图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