Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw scrollbars on WPF Canvas

I am trying to create a canvas with scroll bars. Can anyone help me give some ideas on how to do this? I have already tried using grid of 1 row and 1 column but due to certain constraints I want to use canvas.

Thanks in advance!

like image 464
Scooby Avatar asked May 13 '10 17:05

Scooby


People also ask

How do you implement ScrollBar in canvas?

Specify the total width of the canvas then wrap it in a div. Set the div to overflow: scroll and give that the 500px width. You should then have scrollbars allowing you to scroll and see the hidden parts of the canvas. Repeat this for all of the canvases.

How do I show scrollbars?

Click Start > Settings. Under Windows Settings, scroll down, and then click Ease of Access > Display. Scroll down, and then set Automatically hide scroll bars in Windows to Off.

Does 100vw include ScrollBar?

Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.


1 Answers

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.

like image 88
Scooby Avatar answered Oct 11 '22 12:10

Scooby