In this Article I want to make the design and color of the scroll bar . So, let’s talk on that . I use Expression blend for this . Pl read about expression blend in MSDN or for search in Google how to installed and use this.
Download Download source code for Scrollbar style in Silverlight Expression Blend 4
There is no doubt of using Scrollbar in anywhere in web application. We see this also in browsers for e.g. internet explorer, Mozilla containing the scroll bar. Even in this web page dot net funda if you look carefully then you also see the scroll bar on the right hand of your web page. Using this your page can easily up and down . I think there is no exaggerate to say about of this. Everyone know about of this . In this Article I want to make the design and color of the scroll bar . So, let’s talk on that . I use Expression blend for this . Pl read about expression blend in MSDN or for search in Google how to installed and use this.
1. Ok, now we need to open the Expression Blend 4 (or latest Version) then Click to open a new projects. It is very simple to create a new project. Just try I skip the Image how to create a new projects. Keep the name of the Project Scrollbar. After successfully open a project you will See same Pic -1 .
2. Now in our art board we first draw a scroll bar . How ? Fine just go to the assets, you will find this on the window tab , click on the assets. Write the scrollbar in search box . Select the scrollbar & drag & drop in the art board. Look at the Image Pic -2 .
3. So, we get the Scrollbar in our design art board . Now need to customized it Before doing anything I’m going to look the below Image how it should be and what we are going to make . So look the pic -3 in below.
Once you make your Style then you can able to see that the style will apply to all Scrollbar wherever it will get this. In the below pic -4 see on mouse over how the color is changed I use gray type color but you can use it any other whatever you like. Before that I explained you to know about the Scrollbar parts
4. So , let’s built it in Our Expression Blend 4 . Up to Step 2 you can able to open project & draw a Scroll bar in Expression Blend art board . Before going in deep you should know the parts of the Scrollbar . See the above pic -4 . No 1 indicating Small Increase button, No 2 indicating Big increase button, No 3 indicating movement thumb , No 4 indicating Big decrease button , No 5 indicating small decrease button.
5. Just go in the Object & Timeline tab & select the Scrollbar & then right click on it just go to Edit Template & then go to Edit Current . See the Pic – 5. When you click Edit Current this means that you are entering the Edit mode (styles) of the Scrollbar . Then a window will display , so just do the same as it has done in pic – 6 . Change the name from generic.xaml to styles.xaml.
6.Ok, up to now this is fine . Now we are in the edit mode of the Scrollbar . Here you will see that two items are involved in Scrollbar one is horizontal root and other is vertical root . we shall first customized the vertical root . Look the Pic – 3 our data grid horizontal scroll bar is not like the vertical scroll bar because we do not work in horizontal root . I also made this lock so that no changes will be done in this mistakenly. So , have a look in pic – 7 . you will get a clear idea.
7. It is the time to doing work in the vertical root. Let’s do it . Open the Tree node of the vertical root and see the all members inside it. As I described the five buttons in Pic – 4 . All are mentioned in here . We will customized them. Ok , first do the vertical thumb. Make the only height of the thumb fixed . Right click on it -> go to Edit Template -> go to Edit Current . When you will be under Edit mode of the Vertical Thumb Template then select the background gradient and change the radius X and radiusY in properties tab under appearance category . See the both Pic – 8 . Make the background color whatever you wish. I did it green.
8. Now we make path . How ? Ok , First draw a stack panel and under this we shall create the path. You can use pen or pencil to create this. Press P to select pen. Press Y to select pencil. I use Pencil . So in here we shall draw the horizontal line and make this background black as same as it is in the Pic – 8. Copy and paste the path four times as same in the pic – 8. I insert all paths in the Stackpanel and make the height of the stack panel fixed . I also did the path height & width fixed . So that they will never changed. After doing it successfully we shall step in forward . Before that check all the members of the Vertical thumb and select them and also make their default colors No brush.
9. Click the Scoop up Button to come out from the Edit mode of the vertical Thumb. We have come back in our Scroll bar Edit mode. Now Select the rectangle as I show in Below pic – 9 and change the RadiusX and Radius Y of it .
10. Go further . Select the Vertical Small Decrease and go to -> Edit Template -> Edit Current then select and delete the Background, Background MouseOver , BackGround Presseed , Background Gradient . Because we don’t need it at this moment . Draw a Border and make the corner radius of it 5,5,0,0. Ok , fine up to now this is fine . Go to state tab and then make some additional transition of it . See the below Pic – 10 for clear idea.
11. If you can able to do upto this now do work for transition . Select the Border as shown in pic – 10 ,and then as I described in pic – 10 like that make a new transition and give the name MouseOver make the trasition time 1 sec. You can able to see that a red light is blowing when you click on States transition . This means recording is going on what changes will be done . (For better result make off the recording). See the Pic – 11.
12. When you Complete Step 11 after just change the border color . I use gradient color and also choose the color gray type . You can choose other also . In Pic -11 the gradient color is showing . Now We shall go to the another transition state and that will be MouseOver to Normal . As I described above how to create a new state just follow the pic – 10 . Now in MouseOver to Normal state we will do work . Here we give the transition time 0 sec. And when you reach the normal state then make the border Opacity to 0 %. So that in normal condition the gray color or the Border would not be visible . There is also one state which is pressed click this also and make the opacity 100 %.
13. Our taugh task is complete . Now Come out from the Edit mode of the vertical decrement button by clicking the scoop up button . So , it is the time to do same thing for the Vertical small Increase button . Here we shall do the same as we did from step – 10 to Step -12 . I ‘m not going to repeat the same . yes , one thing need to do that is make the corner radius of the Border 0,0,5,5. and the rest design will be same as we did in step 11, 12. Don’t forget to make opacity 100% in Pressed state also as we did in step 12. Have a look in the Pic – 13 .
14. See, after complete the step 13 if you don’t find the Black Path as you can able to see in the Pic -13. So do the same like Pic -14. Clik the path -> select Order -> select Bring to front .
15. Ok , Now Save your application and run You will able to see your Scrollbar like the Pic -3 . As we did not give any Style name and it is stored in a styles.xaml file and this file is call from the App.Xaml . So, where ever it will get the Scrollbar the Styles will be applied . I took a data grid . There is also Scrollbar so it is applied . And I write a code in Xaml follow this and it brings the Scroll bar in our browser page and there also the styles applied .
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Padding="2">
16. Download the Source Code and Copy the Styles from the Styles.Xaml page . Apply in your Application. PL give your feedback to me so I can learn new things from You. Hope you like this. Bye …..
If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.