WPF 放大镜

WPF 放大镜

WPF 放大镜是以VisualBrush实现的,单击左键放下放大镜,接下来可以对页面的控件进行操作,单击放大镜可以再次获取放大镜,放大镜效果如下:

参考资源:http://www.cnblogs.com/zhihai/archive/2012/02/03/2337161.html

下面是后台全部代码:

public partial class MainWindow : Window

{

#region 添加放大镜

Grid myGrid = new Grid();

Canvas canvasOne = new Canvas();

Canvas canvasTwo = new Canvas() { Name = "myCanvas" };

Path pathTwo = null;

int i = 0;

#endregion

public MainWindow()

{

InitializeComponent();

initVisualBrush();

this.grid1.PreviewMouseMove += new MouseEventHandler(grid1_PreviewMouseMove);

this.MouseDown += new MouseButtonEventHandler(EnergyOverview_MouseDown);

VisualBrush vb = (VisualBrush)pathTwo.Fill;

//指定加载时显示的放大区域

vb.Visual = grid2;

}

#region 放大镜相关操作

//初始化放大镜

private void initVisualBrush()

{

#region 放大镜区域-Grid

//线

Line line = new Line()

{

X1 = 150,

Y1 = 140,

X2 = 300,

Y2 = 250,

StrokeThickness = 30,

Stroke = new LinearGradientBrush()  //使用线性渐变绘制区域

{

StartPoint = new Point(0, 0),   //开始位置

EndPoint = new Point(0, 1),     //结束位置

GradientStops = new GradientStopCollection()    //渐变的颜色

{

new GradientStop(Colors.White,1),

new GradientStop(Colors.Black,0)

}

}

};

//路径-1

Path pathOne = new Path()

{

Fill = new SolidColorBrush(Colors.White),

Width = 200,

Height = 200,

Data = new GeometryGroup()

{

Children = new GeometryCollection()

{

new EllipseGeometry(new Point(100,100),100,100),     //从中心开始,画一个圆,半径是100

new EllipseGeometry(new Point(100,100),1,1)          //从中心开始,画一个小圆,半径是1

}

}

};

//路径-2

pathTwo = new Path()

{

Name = "myPath",

Width = 200,

Height = 200,

Fill = new VisualBrush()

{

Viewbox = new Rect(0, 0, 120, 120),

ViewboxUnits = BrushMappingMode.Absolute,

Viewport = new Rect(0, 0, 1, 1),

ViewportUnits = BrushMappingMode.RelativeToBoundingBox

},

Data = new GeometryGroup()

{

Children = new GeometryCollection()

{

new EllipseGeometry(new Point(100,100),100,100),    //从中心开始,画一个圆,半径是100

new EllipseGeometry(new Point(100,100),1,1)         //从中心开始,画一个小圆,半径是1

}

}

};

//圆-1

Ellipse ellipseOne = new Ellipse()

{

Width = 200,

Height = 200,

StrokeThickness = 10,

Stroke = new LinearGradientBrush()

{

StartPoint = new Point(0, 0),

EndPoint = new Point(0, 1),

GradientStops = new GradientStopCollection()

{

new GradientStop(Colors.Black,0),

new GradientStop(Colors.White,1)

}

}

};

//圆-2

Ellipse ellipseTwo = new Ellipse()

{

Width = 200,

Height = 200,

StrokeThickness = 10,

Stroke = new LinearGradientBrush()

{

StartPoint = new Point(0, 0),

EndPoint = new Point(0, 1),

GradientStops = new GradientStopCollection()

{

new GradientStop(Colors.Black,1),

new GradientStop(Colors.White,0)

}

}

};

myGrid.Children.Add(canvasOne);

canvasOne.Children.Add(canvasTwo);

canvasTwo.Children.Add(line);

canvasTwo.Children.Add(pathOne);

canvasTwo.Children.Add(pathTwo);

canvasTwo.Children.Add(ellipseOne);

canvasTwo.Children.Add(ellipseTwo);

#endregion

//myGd.Children.Add(dataGrid2);

//将放大镜加入页面

grid1.Children.Add(myGrid);

}

//获取或者放下放大镜

void EnergyOverview_MouseDown(object sender, MouseEventArgs e)

{

if (i == 0)

this.grid1.PreviewMouseMove -= new MouseEventHandler(grid1_PreviewMouseMove);

else

this.grid1.PreviewMouseMove += new MouseEventHandler(grid1_PreviewMouseMove);

i = (i + 1) % 2;

}

//放大镜移动

void grid1_PreviewMouseMove(object sender, MouseEventArgs e)

{

VisualBrush vb = (VisualBrush)pathTwo.Fill;

Point point = e.MouseDevice.GetPosition(grid2);

Rect rc = vb.Viewbox;

rc.X = point.X - rc.Width / 2;

rc.Y = point.Y - rc.Height / 2;

vb.Viewbox = rc;

Canvas.SetLeft(canvasTwo, point.X - pathTwo.Width / 2);

Canvas.SetTop(canvasTwo, point.Y - pathTwo.Height / 2);

}

#endregion

}

下面是前台页面:

<Window x:Class="Magnifier.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid Name="grid1">

<Grid Name="grid2">

<Button Content="放大镜测试1" Height="30" Width="100" />

<Button Content="放大镜测试2" Height="30" Width="100" Margin="43,144,360,137" />

</Grid>

</Grid>

</Window>

源码位置:http://download.csdn.net/detail/luozuolincool/7966467

时间: 2024-10-22 11:22:15

WPF 放大镜的相关文章

WPF设置VistualBrush的Visual属性制作图片放大镜效果

原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片: 原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// Window1.xaml<Window x:Class="MagnifyingGlass.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns

《深入浅出WPF》笔记——绘画与动画

<深入浅出WPF>笔记——绘画与动画 本篇将记录一下如何在WPF中绘画和设计动画,这方面一直都不是VS的强项,然而它有一套利器Blend:这方面也不是我的优势,幸好我有博客园,能记录一下学习的过程.在本记录中,为了更好的理解绘画与动画,多数的例子还是在VS里面敲出来的.好了,不废话了,现在开始. 一.WPF绘画 1.1基本图形 在WPF中可以绘制矢量图,不会随窗口或图型的放大或缩小出现锯齿或变形,除此之外,XAML绘制出来的图有个好处就是便于修改,当图不符合要求的时间,通常改某些属性就可以完成

9 WPF之深入浅出话事件

转:http://blog.csdn.net/fwj380891124/article/details/8139260 就像属性系统在WPF中得到了升级.进化为依赖属性一样,事件系统在WPF也得到了升级.进化成为了路由事件(Routed Event),并在其基础上衍生出命令传递机制.这些机制在很大程度上减少了对程序员的束缚,让程序的设计和实现更加的灵活,模块之间的耦合度也进一步降低,这一章我们一起来领略一下新消息机制的风采. 8.1 近观WPF的树形结构 路由一词的意思大概是这样:起点和终点间有

查看WPF 应用程序XAML结构DOM树

当我们看到一些设计新颖的网站时,可以借助浏览器自带的Inspector 工具或插件方便的浏览网站布局结构及逻辑.如果是WPF 应用程序能否看到控件的架构方式呢?本篇将介绍两款工具Snoop 和WPF Inspector 可用来窥探WPF 应用程序内部结构. (一)Snoop接下来打开WPF应用程序,点击"刷新"按键即可看到Snoop 已经捕获到如下图示. 点击"Snoop"(望远镜)按键,进入Snoop 捕获界面.与IE8 中的Developer Tools 效果相

WPF路由事件学习转(二)

在传统的.net中已经有了事件机制了,为什么在WPF中要加入路由事件来取代事件呢,最直观的原因就是典型的WPF应用程序使用很多元素关联和组合起来,从而有了两个概念,LogicalTree 和 VisualTree,那么它们分别是什么呢,举个例子: 这就是LogicalTree,一个Grid里面镶嵌了其他控件或布局组件,这相当于一棵树中的叶子.而VisualTree呢?它就是一个树中的叶子里面的结构,用放大镜看一下,其实叶子里面的结构也是一颗树结构,这就是VisualTree了,例如 好了,既然W

WPF 依赖属性概念

理解依赖属性 在 WPF 中变成相比较于 传统 Windows Forms 变成发生了较大的改变. 属性现在以一组服务的形式提供给开发人员. 这组服务就叫做属性系统. 由 WPF 属性系统所支持的属性成为依赖属性. 依赖属性的概念 WPF 在依赖属性中提供了标准属性无法提供的功能, 特性如下: 决定属性值: 依赖属性的属性值可以在运行时有其他元素或者是其他信息所决定, 决定的过程具有一个优先次序. 自动验证或变更通知: 依赖属性哟一个自定的回调方法, 当属性值变更时被执行, 这个回调能验证新的值

wpf附加属性理解

WPF附加属性 http://www.cnblogs.com/tianyou/archive/2012/12/27/2835670.html WPF属性(二)附加属性 http://blog.csdn.net/iamsupercola/article/details/7069848 附加属性是说一个属性本来不属于某个对象,但由于某种需求而被后来附加上,也就是把对象放入一个特定环境后对象才具有的属性就称为附加属性,附加属性的作用就是将属性与数据类型解耦,让数据类型的设计更加灵活. 这个解释的比较清

WPF窗体の投影效果

有时候我们需要给WPF窗体加上一个毛边(投影效果) 我们可以在窗体下加上如下代码 <Window.Effect> <DropShadowEffect BlurRadius="24" Color="#FF858484" Direction="90" ShadowDepth="3"/> </Window.Effect> 然后需要给窗体设置一个border BorderThickness=&quo

WPF笔记整理 - Bitmap和BitmapImage

项目中有图片处理的逻辑,因此要用到Bitmap.而WPF加载的一般都是BitmapImage.这里就需要将BitmapImage转成Bitmap 1. 图片的路径要用这样的,假设图片在project下的Images目录,文件名XXImage.png. pack://application:,,,/xxx;component/Images/XXImage.png 2. 代码: Bitmap bmp = null; var image = new BitmapImage(new Uri(this.X