您的位置:首页 > 其它

WPF 放大镜

2014-09-24 09:55 190 查看
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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: