How to draw scrollbars on WPF Canvas How to draw scrollbars on WPF Canvas wpf wpf

How to draw scrollbars on WPF Canvas


You could put the canvas inside of a scrollviewer. I tried this quick test and it allowed me to scroll through the contents of the canvas.

<ScrollViewer Height="100" Width="200">    <Canvas Height="400" Width="400">            //Content here    </Canvas></ScrollViewer>

edit: Here is an example where the scroll-bars show up only when needed, and it changes dynamically as the canvas size changes.

    <Button Content="Change Canvas Size" Click="ChangeCanvasSize_Click"/><ScrollViewer Height="100" Width="200" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">    <Canvas x:Name="TestCanvas">            <TextBlock Text="Test Test"/>    </Canvas> </ScrollViewer>

Changing canvas size with button click:

    private void ChangeCanvasSize_Click(object sender, RoutedEventArgs e)    {        TestCanvas.Width = 600;        TestCanvas.Height = 600;    }

In this example, I start out with no scroll-bars and when I click the button to expand the canvas, scroll-bars appear.


Ok after working with it for sometime I figured out a way. Create a XAML like this

<ScrollViewer> <Grid x:Name="drawingGrid" SizeChanged="drawingGrid_SizeChanged"><Canvas Name="drawingCanvas"> /<Canvas></Grid></ScrollViewer>

On windowLoad function set the canvas height/width equal to grid height/width. Update the canvas ht/wd:

  1. when grid size changes, due to mininmize/maximize.
  2. dragging an element beyond the boundaries of canvas or creating a new element too close the edge of canvas

    double dHeight = 220;if (drawingCanvas.Height < CurrentPosition.Y + dHeight){    // increase canvas height    drawingCanvas.Height += (2 * dHeight);}

Hope this is of some help. Please share if anyone has any better idea or suggestions to improve this.


By combining Mario-sannum's answer and your question then I've made a solution that should work fine in most cases..

<ScrollViewer><Grid x:Name="drawingGrid" SizeChanged="drawingGrid_SizeChanged"><Canvas Name="c"><TextBlock x:Name="draw_Text" Text="Test Test"/></<Canvas></Grid></ScrollViewer>void drawingGrid_SizeChanged(object sender, SizeChangedEventArgs e){      try { c.Height = draw_Text.ActualHeight; } catch { }      try { c.Width = draw_Text.ActualWidth; } catch { }}

That should resize the Canvas so the scrollviewer can scroll...