WPF滚动查看器概述控件

Question

在我的WPF应用程序中我使用滚动查看器来显示图表。 该图可能相当大且复杂，通常您只能在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); 
}