Silverlight Canvas on Scrollviewer not triggering

Question

Why does this work so well in wpf

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Canvas x:Name="MyDesigner">
</Canvas>
</ScrollViewer>

Now when I do the same thing in silverlight and load an control "that can be dragged" the scrollbars are not triggered, when I drag out of view, nothing happens... but in wpf it automatically shows them...

score 7 · Answer 1 · answered Jun 27 '09 at 09:15

As a quick check against the normal 'gotcha' have you explicitly set the canvas height / width properties?

If I knock up some xaml for test purposes and run it:

 <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
     <Canvas x:Name="test" Background="Beige">
         <TextBlock Canvas.Left="2000" Canvas.Top="200" Text="test"/>
     </Canvas> 
 </ScrollViewer>

Will not show a scroll bar, even though I have explicitly created content in the canvas 2000 to the left, the canvas width not being set means the scroll viewer has no range to bind to so to speak. The canvas without a width is considered is just infinitely wide from what I can see. Whilst this is not the same as dragging the concept of putting a piece of content outside of the current view is there.

As soon as you add a width, it defines a finite area to scroll on and the scroll bar shows up.

So basically there is no point other way round this except for keeping a fixed canvas size? — Fredrick, Jun 28 '09 at 05:05
You could get round it in another way but putting a non-linked scroll bar there and relating the value in the scroll to a translate tranformation applied as part of the transform group on the canvas. (A transform group allowing multiple transforms.) That way you can scroll, without an explicit canvas size, and the limit of the scroll is then set by the values you used for the bar / transformation. — Andrew, Jun 28 '09 at 10:14

score 1 · Accepted Answer · edited Jun 07 '12 at 08:18

Here is the solution I found. The canvas can grow dynamically, but you will need to explicitly set the height to a new value. So, if you have 20 textblocks with a height of 21, you need to set the canvas height as: Canvas.Height = 22.0 * 100; for the scrollviewer to pick up the new height.

MainPage.xaml

<Canvas Canvas.Left="5" Canvas.Top="25"  >
    <ScrollViewer Width="300" Height="700"  x:Name="CanSummaryScroller">
        <Canvas x:Name="canSummaryCells"  >
        </Canvas>
    </ScrollViewer>  
</Canvas>

MainPage.xaml.cs

boxDevSumList is a List of TextBoxes

for (int i = 0; i < 100; i++)
{
    boxDevSumList.Add(new Cell());
    (boxDevSumList.ElementAt(i)).Width = 271;
    (boxDevSumList.ElementAt(i)).Height = 21;
    (boxDevSumList.ElementAt(i)).SetValue(FontFamilyProperty, new FontFamily("Calibri"));
    (boxDevSumList.ElementAt(i)).FontSize = 12;
    (boxDevSumList.ElementAt(i)).Text = "this is a test";
    if (i.Equals(1) || i.Equals(3) || i.Equals(5) || i.Equals(7) || i.Equals(9))
        (boxDevSumList.ElementAt(i)).Background = lgBrush;
    (boxDevSumList.ElementAt(i)).Opacity = .9;
    canSummaryCells.Children.Add(boxDevSumList.ElementAt(i));
    boxDevSumList.ElementAt(i).SetValue(Canvas.TopProperty, (double)(i * 21) + 45);
    boxDevSumList.ElementAt(i).SetValue(Canvas.LeftProperty, 4.0);
    canSummaryCells.Height = 22.0 * 100;
}

Silverlight Canvas on Scrollviewer not triggering

2 Answers2

Linked