Styling windows 8 – 3 Implicit and explicit styling

Now your app is getting some style, we got the colors nailed down and now we also got a workflow for how fonts and text styles should be handled in your development resources. Let’s continue with control styling. It’s time to focus on updating the controls with explicit and implicit styling. The Index so far:

Styling windows 8 – 1 Colors and themes
Styling windows 8 – 2 Text and font styles
Styling windows 8 – 3 Implicit and explicit styling
Styling windows 8 – 4 The button

Styling a control … and the controls control

Simply put explicit styling means you create a style, and when you want to use it you reference the styling one each control that should use it.

When you start out editing a control’s style, often it’s easier to start with a copy of the default style for the control. Say you have a slider and want to change the size of the grip in that slider. The first thing you do is place the slider and edit the template where you can create a copy of the original style:

SliderStyle

Notice how the slider already have gotten the colors from our color theme we defined.

This will fire up a dialog where you can name your style and where you want to place it.

With a copy of the system style for the slider,  it’s time to start styling. The first thing you notice is that there are actually two styles, the horizontal and the vertical slider style. If this was just a single styling that should not be reused I’d get rid of the vertical style altogether. I hate unused code… However, this time we are aiming at a style that should be standard for all sliders in the application, so we better take care of both horizontal and vertical.

The thumbs size is controlled by a system resource called SliderTrackThemeHeight, so if we want to set a new size we have to convert that to a new local resource. Click on the little green box next to width or height of the HorizontalThumb and select Convert to new resource… Name it something smart like BigSliderTrackThemeSize. Now click on the little green box again but this time select edit resource and set it to 24. Make sure both the height and width use this new local resource. And don’t forget to change that on the vertical slider as well.

There, a bigger thumb. But also bigger tracker (the gray area) and decrease (the green part). Lets fix those by setting a top and bottom margin for those.  For the vertical slider that should be left and right margins.

That should do it, we now have a bigger thumb marker in our style. Now let’s add a new slider and see how it looks? Well, as this is an explicit style the new slider doesn’t automatically get the modified style. We have to set this explicitly. Like this:

ExplicitStyle

So the last thing for this styling. If you wanted to add something more to the slider thumb how do I do that? This is where the controls of the control comes in. If you edit the style you notice that there are a few parts that have their own templates. One of those are the HorizontalThumb (and the VerticalThumb) both of these are using the same template that are in the system templates. So if you want to change things here it’s the same procedure as the for the slider itself. For this demo I created HorizontalSliderThumbStyle and VerticalSliderThumbStyle that adds a hang to the slider so it’s outside the tracker and crease.

Parental Advisory: Implicit styles

The style for the sliders are now in place, what if I want to use it outside of this page? That one is easy, just make sure you move the resources for the styles from the page level and up to application level. Easiest way is to drag and drop the styles that’s needed to the resource in ThemeStyles.xaml. That way all references to the styles are kept intact.

move_styles

There, now you can go on and use this style with any page in the application. Just set the style on each slider to BigThumbSliderStyle.

Hey, this is a great looking slider, what if I forget to set it when I add a new slider? Wouldn’t it be easier if I just tell the application to always use that style instead? You are absolutely right, so let us do that.

That’s where implicit styling comes in, and it’s dead easy. If we go into the xaml code of the style (go into resources, right click on BigThumbSliderStyle, and select View Source and bam, you are there) you will see the following entry: