Contrôle d'aperçu WPF scrollviewer

Question

dans mon application WPF J'utilise Scrollviewer pour afficher un diagramme. Le diagramme peut être assez volumineux et complexe et vous ne pouvez généralement voir qu'une partie intelligente d'un diagramme dans le contrôle Scrollviewer.

Pour faciliter la navigation dans le diagramme, je vais créer un contrôle qui devrait contenir toute l'image du diagramme. Si vous cliquez sur un endroit spécifique dans ce contrôle, le Scrollviewer devrait faire défiler le diagramme jusqu'à cet endroit.

Something like that

Quelle est la meilleure façon de faire cela? Merci beaucoup et désolé pour mon terrible anglais.

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> 

code-behind:

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