How can I make my scrollviewer WPF work with scaling?

Question

I have some kind of fundamental misunderstanding of how I should approach this problem.

I have a Canvas inside a ScrollViewer. I would like to be able to scale and zoom in on this canvas and configure ScrollViewer accordingly.

Here is the 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> 

And codebehind:

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

Unless I specify the lines marked with “BLAH”, the scrollbars do not change at all ... which is not surprising, since nothing actually resizes the contents of the Canvas. However, if I add BLAH lines, the canvas shrinks / grows, but it also scales at the same time, which means that it does not look right compared to its contents.

I guess I am taking a fundamentally wrong approach, but I don’t understand how to solve it. Is this the right way, with a minor problem, or am I taking a completely wrong tact here?

Answer 1

I found the answer to this page where this text was key:

So what is the difference between LayoutTransform and RenderTransform? In this case, the names of the two properties are significant. Any transformation assigned to LayoutTransform is applied when the layout is executed. RenderTransform is applied after layout when rendering.

In my case, it is just a matter of using the correct LayoutTransform, not the RenderTransform, and all this is good.

Answer 2

ScrollViewer only places the scrollbar when the scrollbar overflows from the maximum height of the ScrollViewer.

Correct the height and width of the ScrollViewer.