WPF scrollviewer概述控件

Question

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

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

Something like that

最简单的方法是什么？ 非常感谢和抱歉我可怕的英语。

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);
}