XAML: create a ScrollViewer showing scrollbars when the ScaleTransform of the child becomes large

Question

I am doing a kind of “preview” for some documents in a Silverlight 3 application. I have a Canvas (for showing the document) inside the ScrollViewer, and I have zoom in / out buttons that control the X and Y Scale properties for the ScaleTransform property for the property Canvas.RenderTransform. I want the scrollbars of the ScrollViewer to display when I “zoom in” so that the canvas no longer appears in the ScrollViewer area, but it seems that they only appear depending on the width / height of the canvas itself, regardless of whether it scales it or not.

Can anyone help?

Answer 1

Yes, the problem is that there is no LayoutTransform in Silverlight. There are some workarounds in this issue listed here .

The idea here is to create an intermediate canvas that will be resized and as a result will resize the scrollable area. For example, if I have the following XAML:

 <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="200" /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <ScrollViewer Grid.Row="0" x:Name="sc" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Width="200" Height="200" > <Canvas x:Name="sizer" Width="200" Height="200"> <Rectangle x:Name="gradientRect" Width="200" Height="200"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="1"/> </Rectangle.RenderTransform> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Red" Offset="0.1"/> <GradientStop Color="Yellow" Offset="0.5"/> <GradientStop Color="Red" Offset="0.9"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas> </ScrollViewer> <Button Grid.Row="1" Content="Multiply by Two" Click="ScaleRect" Width="100" Height="25"></Button> </Grid> 

You will notice that I put <Canvas x:Name="sizer"/> between <ScrollViewer/> and <Rectangle/> and the ScaleRect click ScaleRect in <Button/> .

Sub ScaleRect simply scales the rectangle by 2. This value is then used to change the sizer Width and Height , thereby updating the scrollbars of the ScrollViewer. Here's the sub for ScaleRect :

 Private Sub ScaleRect(ByVal sender As Object, ByVal e As RoutedEventArgs) Dim zoom As Double = 2.0 Dim scaleX = gradientRect.RenderTransform.GetValue(ScaleTransform.ScaleXProperty) Dim scaleY = gradientRect.RenderTransform.GetValue(ScaleTransform.ScaleYProperty) gradientRect.RenderTransform.SetValue(ScaleTransform.ScaleXProperty, scaleX * zoom) gradientRect.RenderTransform.SetValue(ScaleTransform.ScaleYProperty, scaleY * zoom) sizer.Height *= zoom sizer.Width *= zoom End Sub