Wie kann ich meinen WPF Scrollviewer zum Zoomen verwenden?

Question

Ich habe ein grundlegendes Missverständnis darüber, wie ich dieses Problem angehen sollte.

Ich habe ein Canvas in einem ScrollViewer. Ich möchte in der Lage sein, in diesem Canvas hinein- und herauszuzoomen und den ScrollViewer entsprechend anzupassen.

Hier ist der Code:

XAML:

<Window x:Class="scrollerProblem.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"> 
    <ScrollViewer Name="scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
     <Canvas Background="AntiqueWhite" Name="content" MouseLeftButtonDown="content_MouseLeftButtonDown" MouseRightButtonDown="content_MouseRightButtonDown"> 
      <Rectangle Width="100" Height="100" Canvas.Top="50" Canvas.Left="50" Fill="PaleGoldenrod"></Rectangle> 
     </Canvas> 
    </ScrollViewer> 
</Window> 

und Code-Behind:

using System.Windows; 
using System.Windows.Input; 
using System.Windows.Media; 

namespace scrollerProblem 
{ 
    /// <summary> 
    /// Interaction logic for Window1.xaml 
    /// </summary> 
    public partial class Window1 : Window 
    { 
     float Zoom = 1; 

     public Window1() 
     { 
      InitializeComponent(); 
      content.Width = 700; 
      content.Height = 700; 
     } 

     private void content_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
     { 
      content.Width *= 2; // BLAH 
      content.Height *= 2; // BLAH 
      Zoom *= 2; 
      TransformGroup gridTransforms = new TransformGroup(); 
      gridTransforms.Children.Add(new ScaleTransform(Zoom, Zoom)); 
      gridTransforms.Children.Add(new TranslateTransform(0, 0)); 
      content.RenderTransform = gridTransforms; 
     } 

     private void content_MouseRightButtonDown(object sender, MouseButtonEventArgs e) 
     { 
      content.Width /= 2; // BLAH 
      content.Height /= 2; // BLAH 
      Zoom /= 2; 
      TransformGroup gridTransforms = new TransformGroup(); 
      gridTransforms.Children.Add(new ScaleTransform(Zoom, Zoom)); 
      gridTransforms.Children.Add(new TranslateTransform(0, 0)); 
      content.RenderTransform = gridTransforms; 
     } 
    } 
} 

Wenn ich die Zeilen mit dem "blah" markiert auslassen die Bildlaufleisten passen sich nicht an all ... das ist nicht zu überraschend, da nichts tatsächlich die Größe des Inhalts Canvas ändert. Wenn ich jedoch die BLAH-Linien hinzufüge, schrumpft die Leinwand, wächst aber auch gleichzeitig, was bedeutet, dass sie im Vergleich zu ihrem Inhalt nicht richtig aussieht.

Ich schätze, ich nehme eine fundamental falsche Herangehensweise, aber ich bin nicht klar, wie man es löst. Ist das der richtige Weg, mit nur einem kleinen Problem, oder nehme ich hier den völlig falschen Takt?

Answer 1

fand ich die Antwort auf this page, wo dieser Text war der Schlüssel:

Also, was ist der Unterschied zwischen Layout und Render? Die beiden Eigenschaftsnamen zeigen in diesem Fall viel. Jede Transformation, die LayoutTransform zugewiesen ist, wird angewendet, wenn das Layout ausgeführt wird. RenderTransform wird nach dem Layout angewendet, wenn das Rendering ausgeführt wird.

In meinem Fall war es nur eine Frage der Verwendung der richtigen LayoutTransform anstelle der RenderTransform, und alles ist gut.

Answer 2

ScrollViewer platziert die Bildlaufleiste nur, wenn die Bildlaufleiste von der maximalen Höhe des ScrollViewers überläuft.

Korrigieren Sie die Höhe und Breite des ScrollViewers.