.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Scrollable Stack Panel in Silverlight using Blend

Posted By:Diptimaya Patra       Posted Date: March 24, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Scrollable Stack Panel in Silverlight using Blend . In this article how to create 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. You can also download the sample code used in the above example

Enjoy Coding.
 Subscribe to Articles

     

Further Readings:

Responses
Author: buka         Company URL: http://www.dotnetspark.com
Posted Date: July 23, 2011

Hi Dipti

Great post, just a question from a newbie using WPF - probably work either way if I were to use Silverlight- but lets say I've started a new WPF project and added a listbox or scrollViewer. I've used the sample data supplied with exp. blend and added a datasource to the listbox/scroller.

Q. How do I change from vertical to horizontal scrolling?
Does the datasource always contain the data in a vertical scroll?

Using expression blend 4

Thanks
Buka

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend