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.

1.gif

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.

2.gif

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

3.gif

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

4.gif

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.

5.gif

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.

6.gif

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

7.gif

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.

8.gif

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

Enjoy Coding.

Up Next
    Ebook Download
    View all
    Learn
    View all