xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- 缩略图 -->
<Image
x:Name="OriginalImage"
Grid.Column="0"
Margin="5"
MouseMove="OriginalImage_OnMouseMove" Source="/Resource/Images/BearAndFox5.jpg" />
<!-- 取图区域 -->
<Rectangle
x:Name="TargetRectangle"
Grid.Column="0"
Width="30" Height="30"
IsHitTestVisible="False" RenderTransformOrigin=".5 .5" Stroke="DodgerBlue" StrokeThickness="1">
<!-- 取图区域跟随鼠标 -->
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TargetRectangleTransform" X="30" Y="30" />
</Rectangle.RenderTransform>
<!-- 鼠标移出源图后隐藏 -->
<Rectangle.Resources>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=OriginalImage, Path=IsMouseOver}" Value="False">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Resources>
</Rectangle>
<!-- 视图输出, 这里使用 Viewbox 表示从源图取范围值 -->
<Rectangle
Grid.Column="1"
Margin="5"
Stroke="DodgerBlue" StrokeThickness="1">
<Rectangle.Fill>
<VisualBrush
x:Name="ViewAreaVisualBrush"
Stretch="Uniform" Viewbox="0 0 .5 .5" Viewport="0 0 1 1"
Visual="{Binding ElementName=OriginalImage}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
cs
// 设置取图的 rect 位置与鼠标同步, 使用向量计算
var mousePostion = e.GetPosition(image);
var mouseVector = new Vector(mousePostion.X, mousePostion.Y);
var centerVector = new Vector(image.ActualWidth / 2, image.ActualHeight / 2);
var targetvector = mouseVector - centerVector;
this.TargetRectangleTransform.X = targetvector.X;
this.TargetRectangleTransform.Y = targetvector.Y;
// 显示右侧大图, 这里按 0 - 1 的比例计算
var x = (mousePostion.X - this.TargetRectangle.ActualWidth / 2) / image.ActualWidth;
var y = (mousePostion.Y - this.TargetRectangle.ActualHeight / 2) / image.ActualHeight;
var width = this.TargetRectangle.ActualWidth / image.ActualWidth;
var height = this.TargetRectangle.ActualHeight / image.ActualHeight;
this.ViewAreaVisualBrush.Viewbox = new Rect(x, y, width, height);