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.

image

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.

 

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 TexBlock 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. Chose 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 appear 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 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.

 

 

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

 

 

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 it’s 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 below screenshot. Select all the rectangles and delete those. They are not require 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 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.

 

 

image

 

 

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.

 

 

image

 

 

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.

 

 

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 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:

 

 

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 it’s 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 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. 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 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:

 

 

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 default one as you do with normal ScrollViewer. So, 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 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…


7 comments

  1. Hi... i found it very helpful but i wanted to ask if thare is a way to display not just one horizontal row, but tow rows - one beneath the other. the reason i'm asking this is because i'm trying to create an image gallery which has 4 by 5 images..hope i made my self clear.. thank's.. Victoria.

    ReplyDelete
  2. Very nice Kunal..
    Exactly what i am looking for.

    Do you have a link for the source code.

    ReplyDelete
  3. Do you really need the Source Code after this step-by-step tutorial?

    ReplyDelete
  4. HI Same think i require for Vertical root,
    Do you have a link for the source code.

    ReplyDelete
    Replies
    1. Hi Surajit,

      This is the same way you have to develop but instead of horizontal, you have to use vertical alignment. What don't you try it on your own? This is exactly the same process and just a few tricks.

      Let me know, if you face any issues. I will try to help you.

      Regards,
      Kunal

      Delete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top