所以我完成了使用边框和图像的ZoomControl
<UserControl x:Class="ImageViewer.Controls.ZoomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ImageViewer.Controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Border x:Name="BorderImage">
<Image HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="RenderingImage" RenderTransformOrigin="0,0" Stretch="None" Source="{Binding}" RenderTransform="{Binding}"/>
</Border>
此控件嵌套在ScrollViewer中
<ScrollViewer x:Name="ScollViewerImage" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Controls:ZoomControl x:Name="RenderingImage" ViewModel="{Binding}" ClipToBounds="True"></Controls:ZoomControl>
</ScrollViewer>
所以我建立了缩放到鼠标位置的功能
private void DoZoom(double deltaZoom, Point mousePosition)
{
var scaleTransform = GetScaleTransform();
var translateTransform = GetTranslateTransform();
if (!(deltaZoom > 0) && (scaleTransform.ScaleX < .4 || scaleTransform.ScaleY < .4))
return;
var mousePositionAfterScaleX = mousePosition.X * deltaZoom;
var mousePositionAfterScaleY = mousePosition.Y * deltaZoom;
var newMousePositionX = mousePosition.X - mousePositionAfterScaleX;
var newMousePositionY = mousePosition.Y - mousePositionAfterScaleY;
var newTranslateX = newMousePositionX - mousePosition.X;
var newTranslateY = newMousePositionY - mousePosition.Y;
var translateX = newTranslateX + translateTransform.X;
var translateY = newTranslateY + translateTransform.Y;
scaleTransform.ScaleX += deltaZoom;
scaleTransform.ScaleY += deltaZoom;
_currentZoom = scaleTransform.ScaleX;
ChangeTranslateTransofrm(translateX - overflowWidth, translateY - overflowHeight);
UpdateScaleTransfromValue();
}
只要图像适合ScrollViewer大小，此效果就很好。但是，在图像大于ScrollVIewer控件之后（它将显示滚动条），并且每当我放大鼠标时，鼠标位置就不再位于同一点。我确信这与滚动条可见有关，但是我无法弄清楚数学原理使滚动条可见后将鼠标固定在同一位置。
因此，经过2天的尝试和错误，我已经找到了解决特定问题的解决方案。首先有两个主要问题。
第一个问题是通过在ScrollViewer中添加2个边框解决的，只要不显示滚动条，这些边框都会保留滚动条所需的空间。
<ScrollViewer x:Name="ScollViewerImage" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Width="{x:Static SystemParameters.VerticalScrollBarWidth}">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=ScollViewerImage}"
Value="Visible">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Grid.Row="1" Width="{x:Static SystemParameters.HorizontalScrollBarHeight}">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ComputedHorizontalScrollBarVisibility, ElementName=ScollViewerImage}"
Value="Visible">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Controls:ZoomControl Grid.Column="0" Grid.Row="0" x:Name="RenderingImage" ViewModel="{Binding}" ClipToBounds="True"></Controls:ZoomControl>
</Grid>
</ScrollViewer>
对于第二个问题，只要滚动完成，我都会保存偏移量。我还节省了缩放大小（ScrollableHeight和Scorllable Width）以及更改时的大小（Zoom in / Zoom out已经完成）。我将滚动条重新放置在所需位置。
private void SetScrollbarOffset(ScrollViewer scrollViewer, double verticalChange, double horizontalChange)
{
// after each move of the scrollbar we save the current offsets
_currentVerticalOffset = scrollViewer.VerticalOffset;
_currentHorizonalOffset = scrollViewer.HorizontalOffset;
// we check if there was a zoom in/out perfomed
if (_scrollableHeight != scrollViewer.ScrollableHeight)
{
// we save the current zoom in/out scrollable height
_scrollableHeight = scrollViewer.ScrollableHeight;
// we move the scrollbar to the position needed to persist the mouse under the same point in the image
scrollViewer.ScrollToVerticalOffset(_currentVerticalOffset - verticalChange);
}
if (_scrollableWidth != scrollViewer.ScrollableWidth)
{
_scrollableWidth = scrollViewer.ScrollableWidth;
scrollViewer.ScrollToHorizontalOffset(_currentHorizonalOffset - horizontalChange);
}
}
这是从SizeChangedEvent调用的最后一个方法
public void SizeChange(ScrollChangedEventArgs e)
{
var scrollViewer = (e.OriginalSource as ScrollViewer);
SetScrollbarOffset(scrollViewer, e.VerticalChange, e.HorizontalOffset);
}