Click here to Skip to main content
Click here to Skip to main content

Customized Scrolling in Silverlight using Expression Blend

, 13 Nov 2010
Rate this:
Please Sign up or sign in to vote.
Customized Scrolling in Silverlight using Expression Blend

Introduction

In some cases, we need to customize the Scrolling functionality in Silverlight depending upon the requirement. The default look of ScrollViewer doesn’t give a proper UI effect. In such a case, you need to create the whole scroll behavior by modifying XAML and writing a bunch of C# code.

image

In this article, I will demonstrate how to create the above scrolling functionality simply without writing any lines of C# code. You have to use only Expression Blend to create the richness of the scrolling. Read more to learn about it.

Background

In various situations, depending upon the User Experience of your Silverlight application UI, you need to customize the scrolling functionality like the above image either horizontally or vertically. Few years back when I was working in Silverlight 2 Beta 1, I faced the same kind of situation and I implemented this writing my own logic in my main page. I declared some member variables to store the current position, view state, blah blah… which was really very difficult to implement.
Recently, I thought of doing the same UI functionality but it was to difficult to implement the same again. It requires thinking for the algorithm, it requires to write code in xaml.cs, it requires to test properly while developing and also it requires to do thorough testing before integrating in any application.

I searched over the internet and found some good topics there but all described the same logic here and there. I need to write some code to achieve this. Oh no!!! I don’t want it again. So, how to do this? Something struck my mind. Can I do this using the default Scroll Viewer? Can I do this by just modifying the template of the same? I was not a 100% sure but thought of giving it a try. Let’s see what I can do. At the end, I came up with my design and it was just using the Expression Blend and there was no code written in C#.

In this article, I am going to demonstrate the same for you, so that you can understand it step-by-step. Pretty lengthy article, but you can understand it easily if you follow all the steps properly. And yes, there are huge number of screenshots for you to understand it easily.

Part 1: Create the Basic UI

Before starting anything, we need to create the basic UI for our sample application. Let’s create a Silverlight application first. As discussed, we will do it using Expression Blend. Hence open your Expression Blend. Now create a New Project. You can choose between “Silverlight Application “ Website” and “Silverlight Application”. Give a name to your project and click “OK” to continue.

alt

This will create the Silverlight project for you. Open your MainPage.xaml file. Now from the tools panel, select the ListBox control.

image

Draw the ListBox in your MainPage.xaml UI. Draw a wider ListBox control for now. We will resize it later once we complete the template for our design.

image

From the “Objects and Timeline” panel, select the ListBox control. Now from the toolbox, add some TextBlocks inside the ListBox. Change the content of each TextBlock to a different text. It will be easy for better separating the items.

image

Once you are done, your default ListBox will look similar to this:

image

This is the default look of ListBox control in Silverlight. Now our aim will be to change the style of the ListBox to achieve our goal.

Part 2: Modify the ListBox Template

Let’s start with modifying the template. Go to your Objects and Timeline, right click on the ListBox –> Edit Template –> Edit a Copy…

image

In the next dialog, give a proper name for the style. Choose the location to store the style and hit OK.

image

This will create the template and open it inside the Objects and Timeline panel. You will see a ScrollViewer inside that. Select the ScrollViewer and go to the Properties panel. Under the layout, click the small arrow head to expand the panel properly. Under the expanded Layout section, find the property named HorizontalScrollBarVisibility and set it as “Visible”. Just below that, you can find another property named VerticalScrollBarVisibility. Set it as “Disabled” or “Hidden”.

image

Part 3: Modify the ScrollViewer Template

Now do the same step to edit the template of the ScrollViewer. Right click on it, then go to “Edit Template” –> “Edit a Copy…”

image

Enter a proper name for the style in the below dialog box that appears on your screen and click “OK”.

image

You will see the following template in your Objects and Timeline panel:

image

Delete the control named “VerticalScrollBar” as it is not required for our case. We are going to create a Horizontal Scroll functionality. So, it is safer to delete the same.

Now, select the Grid and expand your XAML code. You will find the below code. Remove the highlighted text, i.e., remove the Column and Row definitions for the Grid. We don’t need those.

image

Once you removed the Grid rows and columns, again come back to the design mode. Oh yeah, select the Rectangle and delete it too.

image

Part 4: Modify the HorizontalScrollBar Template

You will now have a cleaner template of the ScrollViewer like this:

image

Right click on the HorizontalScrollBar and select “Edit Template” –> “Edit a Copy…” for it too. Give a proper name for the style and hit “OK”.

image

This will open the ScrollBar template (as shown below) in your Objects and Timeline panel. Select and delete the Grid called “VerticalRoot”. We don’t need it because we are creating a Horizontal Scroll experience.

image

Expand the “HorizontalRoot” Grid. Inside the Grid, you will find a number of Rectangles and Repeat Buttons. Select all the Rectangle controls and press delete. This will remove the rectangles from the template. As shown below, select the “HorizontalLargeDecrease”, “HorizontalThumb” and “HorizontalLargeIncrease” repeat buttons and press Delete to remove them too.

image

You will now have a clean template for the HorizontalScrollBar. In the right panel, the UI will not look good now. You can see that the Scroll buttons (arrow heads) are not properly positioned. It’s time for us to modify them.

Part 5: Modify the Scroll Arrow Template

image

Click on the “HorizontalSmallDecrease” button and set its left margin to “-30” from the properties panel (as shown in the below figure):

image

Similarly, set the right margin of the “HorizontalSmallIncrease” button to “-30”, shown below:

image

Now you can see a better UI for it. See it in action here:

image

Let us modify the Scroll Arrows. We will resize them to a bigger one and we will also add a hover color to them. To do this, first start with the HorizontalSmallDecrease repeat button. Right click on it, as shown below and go to “Edit Template” –> “Edit Current”.

image

In the Horizontal Decrement Template, you will see various Rectangles as shown in the below screenshot. Select all the rectangles and delete those. They are not required in our case.

image

Now from the left side panel, go to the States tab and click on the “MouseOver” state from the CommonStates. This will start recording the MouseOver state. Click on the path control and change its Fill color to Red. This will ensure that when you mouse over on the arrow head, it will change its default color to Red.

image

Come out to the parent template and do the same for the HorizontalSmallIncrease button too. Both the buttons should behave the same or else they will look odd.

image

Once you complete editing both the repeat button styles, select both of them and change their dimension. In our example, we are using Width = 16 and Height = Auto.

image

Now click the small arrow head to return the template scope to the original UI page. Click I multiple times to go to the main UI where we have the ListBox.

Part 6: Modify the ItemsPanel Template

Our UI is ready, hey, in our case the ListItems are vertically positioned but we created a horizontal scroll. To make it consistent, we need to change the item panel design. It actually uses StackPanel. We need to just set its orientation to horizontal.

To do this, right click on the ListBox and go to “Edit Additional Templates” –> “Edit Layout of Items (ItemsPanel)” –> “Create Empty”. Have a look into the below figure for more details:

image

This will popup the same dialog where you will give a proper name for the Item Panel Template. Click “OK” to continue.

image

This will show you the template contents inside the Objects and Timeline panel. Click the StackPanel and change its Orientation to Horizontal. You can find it in the properties panel.

image

Now again come back to the main UI and see the current visual in the design view. Oh, this is close to our expected design. Only thing is that this ListBox has some blank space at the bottom position. Let’s modify it. Hey, is it too hard? I guess no. You can easily do it. Smile

image

Ok, let me show that to you too. Click the ListBox and in the design view resize the ListBox UI to a smaller one as shown below:

image

Be sure that, only some items are visible there. Else your scroll will not work. Now it’s time to write some code for it. Confused smile Confused!!! No, don’t worry, we will not write any code for the scrolling as we used the default scroll viewer and modified its template as per our requirement.

Demo

Let us run the application now. You will see the below ListBox inside the browser having the customized scrolling functionality:

image

Here you will see only 4 items in the view as we resized it like that way. Now, mouse over on the items. You will see the item hover and item selection. They are the default behavior. If you want, we can change them too.

image

Now, hover over the scroll arrow. You will see it filled with red color. Click on the right scroll arrow. You will see the scroll in action.

image

Oh, the items are scrolling from right to left. This behavior is the default one as you do with normal ScrollViewer. So, there is no need to explain more about it.

image

image

image

Scroll left and right to see it live. As for now, our design for it is ready.

End Note

I hope, this will give you better visibility to customize your scrolling functionality as per your UI requirement. Here, we did it for horizontal scrolling. If you need, you can implement the vertical scrolling too in a similar way.

If you have a better approach to do this, I am open to any suggestion. I appreciate your feedback always. Thanks for reading the article. Cheers!

History

  • 13th November, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberSavalia Manoj M24-Jul-13 2:43 
GeneralMy Vote of 5 PinmemberRaviRanjankr23-Nov-10 18:52 
GeneralRe: My Vote of 5 PinmentorKunalChowdhury24-Nov-10 2:17 
QuestionThanks again! PinmemberAnantharaman_N15-Nov-10 21:06 
AnswerRe: Thanks again! PinmentorKunalChowdhury15-Nov-10 21:42 
GeneralMy vote of 5 PinmvpAbhijit Jana14-Nov-10 1:51 
GeneralRe: My vote of 5 PinmentorKunalChowdhury14-Nov-10 4:07 
GeneralMy vote of 5 PinmentorBrij14-Nov-10 0:20 
GeneralRe: My vote of 5 PinmentorKunalChowdhury14-Nov-10 4:06 
GeneralMy vote of 5 PinmvpAbhishek Sur13-Nov-10 22:27 
GeneralRe: My vote of 5 PinmentorKunalChowdhury14-Nov-10 4:05 
GeneralAwesome! Pinmembermbcrump13-Nov-10 2:14 
GeneralRe: Awesome! PinmentorKunalChowdhury13-Nov-10 2:19 
GeneralRe: Awesome! Pinmembermbcrump13-Nov-10 2:31 
GeneralRe: Awesome! PinmentorKunalChowdhury13-Nov-10 2:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 13 Nov 2010
Article Copyright 2010 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid