How to fix a missing Vertical Scrollbar on a Silverlight Page

When you create a Silverlight application using Expression Blend 4 or Visual Studio 2010, and run it, there are no scrollbars in the browser and you may not see your complete page.

Here is my website I am building and as you can see, I can't see the scrollbars on the page so basically I am unable to read the page contents.

To fix this, we need to add a ScrollViewer or Scrollbars to the page and one of the simplest way to do so is by changing the Application_Startup method in App.xaml.cs file.

The default Application_Startup method looks like following:

private void Application_Startup(object sender, StartupEventArgs e)

{

    this.RootVisual = new MainPage();

}

 

Now what we can do is, implement a ScrollViewer and place the MainPage within it. Here is the code to do so.

private void Application_Startup(object sender, StartupEventArgs e)

{

    ScrollViewer scroller = new ScrollViewer();

    scroller.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;

    scroller.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;

    scroller.Content = new MainPage();

    this.RootVisual = scroller;

}

 

Now if you run the application, you will notice both scrollbars are visible now.

Here is an article on ScrollViewer control.

ScrollViewer control in Silverlight 3