WPF 滚动查看器概览控件答案

【问题标题】：WPF scrollviewer overview controlWPF 滚动查看器概览控件
【发布时间】：2017-10-19 15:44:01
【问题描述】：

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

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

Something like that

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

【问题讨论】：

最简单的方法是购买或找到可接受的免费版本。您想要的称为“缩放内容控件”。您最喜欢的搜索引擎上会收录几个选项。

标签： wpf navigation scrollviewer

【解决方案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);
}

【讨论】：

不幸的是没有“修复”图表图片 - 图表将动态生成并且是可变的。但也许有办法获得“完整”的 Scrollviewer-picture 并将其绑定到 Image 控件？
只要根据变化的图片改变Image控件的Source属性即可。 Image 控件应该是固定的。对吗？
是的，你是对的。您可以使用绑定或仅在代码隐藏中设置FullImage.Source=xxx; ThumbnailImage.Source=xxx;。