WPF之VistualBrush应用（制作放大镜）

概述                我们可以通过WPF的VistualBrush获取画面中某个区域内容来当做某个元素内容的来源。根据这个原理我们就可以做出一些奇特的效果，比如放大镜的制作。                 我先举个简单的利用VistualBrush的例子（文字的镜像效果）。这样更方便了解VistualBrush的原理。                                 1

我们可以通过WPF的VistualBrush获取画面中某个区域内容来当做某个元素内容的来源。根据这个原理我们就可以做出一些奇特的效果，比如放大镜的制作。

我先举个简单的利用VistualBrush的例子（文字的镜像效果）。这样更方便了解VistualBrush的原理。

1.先拖一个TextBox控件 命名为textBox1。再拖一个Rectangle矩形控件（当然也可以拖拽Lable控件,给Label.Background 填充内容）。

2.可以看到Rectangle呈现的内容就是TextBox的内容，而且是以倒影的形式显示出来。 所以接下来要做的就是给Rectangle填充TextBox的内容

<Rectangle name="rectangle1" stroke="Black"                       strokeThickness="1" HorizontalAlignment="left">            <Rectangle.Fill>                <VisualBrush Visual="{Binding Elementname=textBox1}">                    <!--获取视图来源-->                </VisualBrush>            </Rectangle.Fill></Rectangle>

这样就完成了Rectangle的填充。 但还没有上面的镜像效果

3.接下来我们将在VisualBrush 标签里用到relativetransform。就是将内容进行相对的转化

<VisualBrush Visual="{Binding Elementname=textBox1}">      <VisualBrush.relativetransform>          <transformGroup>             <Scaletransform ScaleX="1" ScaleY="-1"/>             <Translatetransform Y="1"/>          </transformGroup>      </VisualBrush.relativetransform> </VisualBrush> 

这样就出现了一张图片的效果。 因此就更容易明白VistualBrush获取画面中某个区域内容来当做某个元素内容的来源的意思了。

同样的原理，接下来就开始利用VisualBrush制作具有放大功能的放大镜

我们要实现的是用放大镜在某个区域里实现放大的效果

因为上述有个简单的小例子，那么接下来直接帖代码来分析

<GrID name="outsIDeGrID" Visibility="Visible">        <GrID name="insIDeGrID" HorizontalAlignment="left"               VerticalAlignment="Bottom" PrevIEwMouseMove="insIDeGrID_PrevIEwMouseMove">              <!--将TextBox放入insIDeGrID中,我们要实现的功能也是放大这个GrID里面的所有内容-->              <TextBox HorizontalAlignment="left" name="textBox1"                        VerticalAlignment="top" Text="WPF制作放大镜" />        </GrID>        <Canvas HorizontalAlignment="left" VerticalAlignment="top">            <Canvas name="magnifIErCanvas" IsHitTestVisible="False">                <Ellipse WIDth="100" Height="100" Fill="lightBlue" />                <!--为了看得清楚椭圆控件我再添加了一个一样大小的Ellipse重叠再一起,将其背景颜色设置为lightBlue                    当然你也可以不要这个Ellipse 可以删除-->                <!--magnifIErEllipse就是我们要填充的控件  就像上一个的Rectangle控件-->                <Ellipse WIDth="100" Height="100" name="magnifIErEllipse">                    <Ellipse.Fill>                        <!--VIEwBox 观景窗的范围 这里是30*30的矩形                              VIEwBox值越大表示固定大小的Ellipse里面可以看到更多的insIDeGrID里面的内容                            所以放大倍数就会越小  反之放大倍数越大。                                 relativeToBoundingBox相对于边境的单位。                             VIEwport是观察孔 可以按比例来缩放视图 这里是1:1-->                        <VisualBrush VIEwBoxUnits="absolute" VIEwBox="0,30,30"                         VIEwportUnits="relativeToBoundingBox" VIEwport="0,1,1"/>                    </Ellipse.Fill>                </Ellipse>            </Canvas>        </Canvas></GrID>

前台已经设置好了。我们似乎还没看到视图的来源， 那么如何让充当放大镜的Ellipse 随鼠标的移动而现实不同的内容呢？ 接下来我们看下后台是如何处理的。我们通过一个滑鼠事件来达到目的

        VisualBrush vb;        public MainWindow()        {            InitializeComponent();            vb = (VisualBrush)magnifIErEllipse.Fill;             vb.Visual = insIDeGrID;   //获取视图的来源为insIDeGrID中的所有内容        }        private voID insIDeGrID_PrevIEwMouseMove(object sender,MouseEventArgs e)        {            Point pos = e.MouseDevice.Getposition(outsIDeGrID);  //相对于outsIDeGrID 获取鼠标的坐标            Rect vIEwBox = vb.VIEwBox;    //这里的VIEwBox和前台的一样   这里就是获取前台VIEwBox的值             double xoffset = vIEwBox.WIDth / 2.0;  //因为鼠标要让它在矩形(放大镜)的中间  那么我们就要让矩形的左上角重新移动位置            double yoffset = vIEwBox.Height / 2.0; //这里先获取矩形左上角要移动的x,y坐标大小            vIEwBox.X = pos.X - xoffset;           //将鼠标的坐标减去要减少的坐标来重新定位vIEwBox的坐标            vIEwBox.Y = pos.Y - yoffset;            //vIEwBox.WIDth = 10;           //设置vIEwBox的大小  等同于这里可以设置放大的倍数（原因前台代码有解释）            //vIEwBox.Height = 10;            vb.VIEwBox = vIEwBox;          //将重新定位的vIEwBox值 赋值给magnifIErEllipse的VIEwBox 并为下一个滑鼠事件更新新值            Canvas.Setleft(magnifIErCanvas,pos.X - magnifIErEllipse.WIDth / 2);  //同理重新定位Canvas magnifIErCanvas的坐标            Canvas.Settop(magnifIErCanvas,pos.Y - magnifIErEllipse.Height / 2);        }

这里要注意2点：

1.前台的Canvas应该在insIDeGrID的下面 ，如果在其上面显示insIDeGrID会覆盖Canvas. 这和显示的顺序有关系。

2.滑鼠事件中获取鼠标坐标的语句是Point pos = e.MouseDevice.Getposition(outsIDeGrID); 是相对于outsIDeGrID 。 所以Canvas应该处于outsIDeGrID 的子节点中而不能成为insIDeGrID的子节点被它包含。

总结：

通过放大镜功能就能看出。其实放大镜并不是把经过的视图真正的放大，而是通过VisualBrush 获取内容作为另一个控件的视图来源，经过设置从而达到显示放大的效果。

总结

以上是内存溢出为你收集整理的WPF之VistualBrush应用（制作放大镜）全部内容，希望文章能够帮你解决WPF之VistualBrush应用（制作放大镜）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。