WPF 滚动查看器概述控件

Question

在我的WPF应用程序中，我使用Scrollviewer来显示图表。该关系图可能非常大且复杂，通常您只能在 Scrollviewer 控件中看到关系图的智能部分。

为了便于图表导航，我将创建一个控件，该控件应包含整个图表图片。如果单击此控件中的特定位置，滚动查看器应将图表滚动到此位置。

类似的东西

最简单的方法是什么？非常感谢，对不起我糟糕的英语。

Answer 1

XAML：

<Grid>
    <ScrollViewer x:Name="TheScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Image x:Name="FullImage" Source="Test.jpg" Stretch="None"></Image>
    </ScrollViewer>
    <Border BorderBrush="Red" BorderThickness="1" VerticalAlignment="Bottom" HorizontalAlignment="Right">
        <Image x:Name="ThumbnailImage" Height="100" Source="Test.jpg" MouseDown="ThumbnailImage_OnMouseDown"/>
    </Border>
</Grid>

代码隐藏：

private void ThumbnailImage_OnMouseDown(object sender, MouseButtonEventArgs e)
{
    var position = e.GetPosition(ThumnailImage);
    var horOffset = position.X / ThumnailImage.ActualWidth * FullImage.ActualWidth;
    var verOffset = position.Y / ThumnailImage.ActualHeight * FullImage.ActualHeight;
    TheScrollViewer.ScrollToHorizontalOffset(horOffset);
    TheScrollViewer.ScrollToVerticalOffset(verOffset);
}