With the new release of Beta 2 and Blend skinning of Silverlight controls has improved dramatically. Rather than hand cranking these due to no support at all in the previous version of Blend, you can now change templates and styles from within Blend rather than cranking the Xaml yourself. Not that I don't like cranking Xaml by hand but better tool support means that you are more productive and it also becomes more accessible to designers who are not interested in cranking pages of Xaml.
Recently I have been upgrading some of the work we have been doing in Beta 1 to Beta 2 and this time round I am concentrating on skinning and templating of controls. I will post soon about my experiences in doing this but in the meantime Corrina Barber is updating her skins for Beta 2 which is where I am sourcing my information. Tim Heuer has a great post on skinning controls in Beta 2, in the Tim's post he illustrates how we can edit templates of a Scroll Bar and then start to change the composite parts that make up the Scroll Bar. In this post I want to take Tim's example a little further and illustrate a couple of areas that are worth noting when skinning controls.
So once you have decided to change the template of the Scroll Bar you may want to go back and make some further tweaks, the way in which you can do this is by selecting the Resources tab and selecting your style for the Scroll Bar, in this instance I have called mine TestScrollBarStyle (not very elaborate I know). Also listed in the Resources tab you will see all you other styles and templates that you have created specific to your application. By putting your resources into the App.xaml file this helps leverage the separation of concerns between the designer and the developer, allowing the developer to work on other controls and code behind, and freeing the designer to create skins for the controls that have a global effect on the UI elements used in the application. Once you have found the style or template that you want to edit we need to select this and start to work on tweaking the design. We edit these by double clicking on the
icon at the far right hand side which will then display the Scroll Bar, which looks just like the standard Scroll Bar.
You may now have noticed that as we are editing the style of Scroll Bar there are no other controls listed in the objects tab. So how do you edit the style ?? What we need to do here is ensure that the Style is selected and then right click on the selected style, then select the Edit Control Parts option and under this
option select the Edit Template option. You will now see all the composite UI Control templates that are used to create a Scroll Bar. Also notice that we have moved from the editing a Style to editing a Template.
We now have the option of editing the templates to change the look and feel of the Scroll Bar. Lets follow Tim's example and change the skin of the Thumb template. Select the Horizontal Thumb template from the objects tab and edit the controls template. Blend now shows you all the UI Elements that make up the Thumb template, including animations and colours used on the UI elements required to deliver the behaviours of a Scroll Bar. So while we are here we can change the UI elements that we want for the Scroll Bar and change the animations and colours being used. We should now have a new visual design of the Scroll Bar, cool that was not too difficult for us to achieve.
What is happening in the Xaml ?? Well what we can see is that we have changed the Horizontal Thumb template that lives within our style for the Scroll Bar and when we view the ListBox that is using this particular style we can see our new visual design being used, however we are only seeing our new design on the template that we updated, more than likely this will be the Horizontal template. This is because we have only update the template for the Horizontal Thumb and we have not yet changed the Vertical Thumb. So we could, either copy and paste the contents of the Horizontal template into the Vertical template or we may want to have a completely different design for the Vertical Thumb. Personally I don't like either of those options, as a developer I like to read beautiful code and one of the tenants of beautiful code is based around DRY (Don't Repeat Yourself) and having 2 different skinned Scroll Bars I think would be confusing. So how do we resolve this issue ?? In our application we are likely to have many controls that derive from Items Control and we want a consistent look and feel to the Scroll Bar and in this particular case the Horizontal and Vertical Thumb.
The solution to the problem is to create a Style that we can apply to many different Thumb Templates. So how do we do this ??
In the previous steps we changed the template associated with the Thumb, what we actually want to do is change the style and to do this there is an option which is not all that intuitive to find. Select the Horizontal Thumb template and then move up onto the main menu options where you will see an option called Object, select this option and towards the bottom you will see called Edit Style, select this option and then select the Edit Style option from the sub menu listing. You will then be prompted to create a new Thumb Style.
We now see our new style, to edit the style we need to change the template and we do this by selecting the style in the objects tab, right click and edit the template associated with the style. We now see the UI elements associated with the template that we can change to be the visual design we want.
Once you have modified the layout controls, colours and animations that you want we need to associate this new style with the Horizontal and Vertical Thumb control templates that we edited earlier in the Scroll Bar style. In the resources tab select your Scroll Bar style and edit the template so that we move down to the composite control templates that are used to create the Scroll Bar. Select the Horizontal Thumb template and right click, rather than selecting the edit template select the apply resource option, in the sub menu options will be the new Thumb style that we created previous select the resource and this will apply your new Thumb style to the Horizontal Thumb. Repeat the same steps to associate the Vertical Thumb Control template with your new style.
The final part is to ensure that you are no longer using the Horizontal Thumb control template but using your new style, so you may not see your new Thumb Style, we need to modify some Xaml to do this. The highlighted line below is what we need to change.

As we can see from the Xaml the Thumb has been wired up to the Style that we created, but it is also wired up to the template that we created earlier on. We need to remove the reference to the Template and let the style do its job. Once this is done we will then see our new Thumb.
We can do the same to all the other Templates that constitute the Scroll Bar style and reuse them across the application, allowing the design to build a consistent theme for the application in complete separation to the developer. If there is enough demand from readers then I would be happy to do a screen cast if this makes it easier.