Customized Scrolling in Silverlight using Expression Blend

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

In this article, I will demonstrate you 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 situation, 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 to do the same UI functionality but it was to difficult to implement the same again. It requires to think 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 net and found some good topic 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 stroke 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 100% sure but thought to give 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 nos. 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 the Expression Blend. Hence open your Expression Blend. Now create a New Project. You can chose between “Silverlight Application “ Website” and “Silverlight Application”. Give a name to your project and click “OK” to continue.

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

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.

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 TexBlock to a different text. It will be easy for better separating the items.

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

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…

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

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”.

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…”

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

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

Delete the control named “VerticalScrollBar” as it is not require 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.

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

Part 4: Modify the HorizontalScrollBar Template

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

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”.

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.

Expand the “HorizontalRoot” Grid. Inside the Grid, you will find a no. 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.

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

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

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

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

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”.

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

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 it’s Fill color to Red. This will ensure that, when you mouse over on the arrow head, it will change it’s default color to Red.

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

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

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 horizontal scroll. To make it consistent, we need to change the item panel design. It actually uses StackPanel. We need to just set it’s 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:

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

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

Now again come back to the main UI and see the current visual in the design view. Oh, this is near to our expected design. Only this is the 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.

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:

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!!! No, don’t worry, we will not write any code for the scrolling as we used the default scroll viewer and modified it’s 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:

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.

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.

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

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 for horizontal scrolling. If you need, similar way you can implement the vertical scrolling too.

If you have any more better approach to do this, welcome for any suggestion. Appreciate your feedback always. Thanks for reading the article. Cheers…