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模拟放大镜效果 ，改进它，你就可以得到你需要的更炫效果。