how to scroll a ScrollViewer at design time in Blend to manually design content for it that goes beyond the visible view

A customer just asked the question how to scroll a ScrollViewer at design time in Blend to manually design content for it that goes beyond the visible viewport size.

The immediate short answer to this question is that Blend cannot change the scroll position of a ScrollViewer at design time. However, there is a fairly comfortable and powerful way to create and visually edit the content of a ScrollViewer anyways. This is how it works in short words. A detailed step-by-step description follows:

You create the scroll viewer on a screen. Next, you create a user control for the content and size it to the desired content size. You can now edit this user control using all the visual tools in Blend. Next, just drop the user control into the scroll viewer. Whenever you want to edit the content, edit the user control and your scroll viewer will update automatically.

Step-by-step:

1) Create a new Silverlight project and add a scroll viewer to the screen. This example is a SketchFlow project, but it works just the same in any Blend project.

 

2) Create a new UserControl. Select Project>Add New Item from the menu bar:

3) In the Add New Item dialog, make sure that UserControl is selected and type in a suitable name, in this case “ScrollViewContent”:

4) Resize the user control. To do so, make sure that the control itself is selected in the object tree…:

5) …and then resize using either the adorners or the property inspector. In this case, we just want to make our scroll view content very very tall, and we don’t care much about the width, but you probably would want to match the width of your scroll viewer.

On note about resizing user controls: Do not use the triangle-shaped adorner, as this one is to set the design-time width and height, rather than the real width and height. The design time width and height adorner is for you to play with different resolutions for a user control at design time, so that you can try out of your layout works properly at different resolutions, but in this case we want to change the “real thing”:

6) Next we create some content for the user control. In this case, we’ll just make a gradient background, but you can draw anything you like into the user control. To create the gradient, first select the LayoutRoot panel in the user control:

 

7) Next create the gradient:

Now build the project by pressing Ctrl-Shift-B or choosing Project>Build.

9) Switch back to the first screen with the scroll viewer and look at the asset panel. There you now find your new user control “ScrollViewContent”. Select it and drag it onto the scroll viewer:

10) This is what you get in your scroll viewer:

You see the upper portion of your big content user control. If you run the app, you can scroll the content as desired.

 

Once you have created the user control and placed it in the ScrollViewer, you can modify the content very quickly: Just switch back to your ScrollViewContent control and edit as desired, for example:

Then, just switch back to the scroll viewer page, and you immediately see your updated content embedded in the scroll viewer: