效果圖片：

原理：
設置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模擬放大鏡效果 ，改進它，你就可以得到你需要的更炫效果。

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/johnsuna/archive/2007/12/10/1927807.aspx

轉載于:https://www.cnblogs.com/javak/archive/2010/10/18/1853974.html

總結

以上是生活随笔為你收集整理的WPF 放大镜(Magnifying Glass)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。