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:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Magnifying Glass" Width="595" Height="612"
    >
  <Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVis" />
  </Window.Resources>
  <Grid VerticalAlignment="Center" Margin="10">
    <Grid Name="mainGrid" >
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

<StackPanel Grid.ColumnSpan="3" Orientation="Horizontal" Margin="0,0,0,20">
        <TextBlock Margin="5">Target size:</TextBlock>
        <TextBox Name="txtTargetSize" Text="50" TextChanged="ZoomChanged" />
      </StackPanel>
      <Slider Name="sliderTargetSize" Margin="263.5,-0.313333333333333,0.5,0"
                        Value="{Binding ElementName=txtTargetSize,Path=Text}"
                        Minimum="2" Maximum="400" Grid.Column="1" Height="22" VerticalAlignment="Top" />
      <CheckBox Name="checkEnableMagnifier" IsChecked="True"
                HorizontalAlignment="Left" Margin="181,6.84333333333333,0,0" Grid.Column="1" Height="13.6866666666667" VerticalAlignment="Top" Width="69">
        Magnifier
      </CheckBox>
      <Button Grid.Row="4" Grid.Column="1" Click="ExitClick" Content="E_xit" MinWidth="75" MinHeight="23" HorizontalAlignment="Left" Margin="277,1.00000000000006,0,-1.00000000000006" Width="75" />
      <Image Grid.Row="2" Grid.Column="1" Name="imageDemo" Source="C:/Documents and Settings/Administrator/桌面/lake.jpg" Grid.ColumnSpan="4" Height="400" Width="660" PreviewMouseMove="OnMoveOverMainUI" />
    </Grid>
    <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
      <Canvas Name="magnifierCanvas" IsHitTestVisible="False"
              Visibility="{Binding ElementName=checkEnableMagnifier,Path=IsChecked,Converter={StaticResource BoolToVis}}">
        <Line StrokeThickness="30" X1="200" Y1="200" X2="300" Y2="300">
          <Line.Stroke>
            <LinearGradientBrush StartPoint="0.78786,1" EndPoint="1,0.78786">
              <GradientStop Offset="0" Color="DarkGreen" />
              <GradientStop Offset="0.9" Color="LightGreen" />
              <GradientStop Offset="1" Color="Green" />
            </LinearGradientBrush>
          </Line.Stroke>
        </Line>
        <Ellipse Width="250" Height="250" Fill="White" />
        <Ellipse Width="250" Height="250" Name="magnifierEllipse" StrokeThickness="3">
          <Ellipse.Fill>
            <VisualBrush ViewboxUnits="Absolute" Viewbox="0,0,50,50"
                         ViewportUnits="RelativeToBoundingBox" Viewport="0,0,1,1"/>
          </Ellipse.Fill>
          <Ellipse.Stroke>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="#AAA" />
              <GradientStop Offset="1" Color="#111" />
            </LinearGradientBrush>
          </Ellipse.Stroke>
        </Ellipse>
        <Ellipse Canvas.Left="2" Canvas.Top="2" StrokeThickness="4" Width="246" Height="246">
          <Ellipse.Stroke>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="#555" />
              <GradientStop Offset="1" Color="#EEE" />
            </LinearGradientBrush>
          </Ellipse.Stroke>
        </Ellipse>
      </Canvas>
    </Canvas>
  </Grid>
</Window>

C#代码： 
// Window1.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Input;

namespace MagnifyingGlass
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

public partial class Window1 : Window
    {
        VisualBrush vb;
        public Window1()
        {
            InitializeComponent();
            vb = (VisualBrush) magnifierEllipse.Fill;
            vb.Visual = imageDemo;
        }

private void ExitClick(object sender, RoutedEventArgs e)
        {
            Close();
        }

private void ZoomChanged(object sender, EventArgs e)
        {
            if (magnifierEllipse != null)
            {
                Rect viewBox = vb.Viewbox;
                double val;
                if (!double.TryParse(txtTargetSize.Text, out val)) return;
                viewBox.Width = val;
                viewBox.Height = val;
                vb.Viewbox = viewBox;
            }
        }

private void OnMoveOverMainUI(object sender, MouseEventArgs e)
        {
            Point pos = e.MouseDevice.GetPosition(mainGrid);
            if(imageDemo.IsHitTestVisible)
            {
                Rect viewBox = vb.Viewbox;
                double xoffset = viewBox.Width / 2.0;
                double yoffset = viewBox.Height / 2.0;
                viewBox.X = pos.X - xoffset;
                viewBox.Y = pos.Y - yoffset;
                vb.Viewbox = viewBox;
                Canvas.SetLeft(magnifierCanvas, pos.X - magnifierEllipse.Width / 2);
                Canvas.SetTop(magnifierCanvas, pos.Y - magnifierEllipse.Height / 2);
            }
        }
    }
}

还想对镜头做点其他效果处理？那就再看看这里：WPF中利用RadialGradient模拟放大镜效果，改进它，你就可以得到你需要的更炫效果。