Scrollable Stack Panel in Silverlight 3 using Blend 3

Introduction

In this article we will see how we can make a Stack Panel Scrollable. That means when there are many Children of a Stack Panel how can we see it while scrolling.

Creating Silverlight Project

Fire up Blend 3 and create a Silverlight Application. Name it as ScrollableStackPanelInSL3.



Here is the basic idea what we will do: we will add a Scroll Viewer to the Application and add a Stack Panel and we will see how changing some properties will give us a Scrollable Stack Panel.

Go ahead and draw a Scroll Viewer. You can find it in the Asset Library.



After adding and giving it a width and height you will find that the default Scroll Bar is Vertical.



For our requirement we will make it as Horizontal. Just change the below properties and you are done with Scroll Viewer.



You can see from the above figure; that I have Disabled the Vertical Scroll Bar and made Auto for the Horizontal Scroll Bar.

Now add a Stack Panel into the Scroll Viewer name it as MyStackPanel.



Now I have changed some properties like Horizontal Alignment to Left and the most important property I have changed is the Width property. I have made it Auto.



Now add a Button to the Application and name it as btnAddItem.



In the Button's Click event Handler we will add the following code:

private void btnAddItem_Click(object sender, RoutedEventArgs e)
{
MyStackPanel.Children.Add(AddItems());
}
private Button AddItems()
{
Button btn = new Button();
btn.Width = 150;
btn.Height = 100;
btn.Content = "Button";
return btn;
}

In the above code I am adding a Button. Now if you will run your application and add some items to the Stack Panel; you will see when it reaches out of the view the Scroll Viewer's Horizontal Scroll is activated. And if you will scroll right you will find the items you added.



That's it we have successfully achieved Scrolling for a Stack Panel.

Enjoy Coding.