首页 > 代码库 > WPF 放大镜

WPF 放大镜

2024-07-24 02:36:34   224人阅读

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 = http://www.mamicode.com/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 = http://www.mamicode.com/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

WPF 放大镜


联系
我们