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

我们可以通过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,0,30,30"
ViewportUnits="RelativeToBoundingBox" Viewport="0,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 获取内容作为另一个控件的视图来源，经过设置从而达到显示放大的效果。