Styling windows 8 – 3 Implicit and explicit styling

November 6th, 2012 by Håkan Reis - .Net, User Experience

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:

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:

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.

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:

<Style x:Key="BigThumbSliderStyle" TargetType="Slider">
  <Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}"/>
  <Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}"/>

This is the beginning of the slider style (see the target type: Slider) if we just go in and remove the style key we then have an implicit style. That’s it! Whenever you create a new slider this style will be used. Neat. It even shows in the resource list: [Slider default].

Last thing to do is remove the Style="{StaticResource BigThumbSliderStyle}" from the sliders. Currently we can’t run the application as we have a couple of "The resource "BigThumbSliderStyle" could not be resolved" errors right now. The Blend view won’t crash though, if the key is missing it will drop back to the default view for the slider and we know what that one is.

A final note on this: It may seem strange to first designing on the page level when you know it’s going to be an implicit style in the end. however, it is way easier to design in the page. Here the data and the slider is shown in context as it will be used by your application. you can even see how it connects to sample data if you have your view model set up right. If you edit the parts in your resources directly you just see small parts out of context. Moving the finished style out to the right resource and the key is so much easier.

The source for Implicit&Explicit styling

Next I’ll dig in to one of my favorite controllers: the button.

• metro
• Win8
• windows 8
• windows store
• xaml

7 Responses to “Styling windows 8 – 3 Implicit and explicit styling”

1. Roger says:

   December 26, 2012 at 14:38

   I hope that developers will identify if they are talking about the phone or the PC when stating they have information on how to edit settings. This site does not do that and it is misleading.

   Reply
   • Håkan Reis says:

     December 26, 2012 at 16:55

     As the title says its windows 8…

     Reply
2. Styling windows 8 – 4 The button – Jayway says:

   November 27, 2012 at 18:01

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

   Reply
3. Styling Windows 8 – 3 Implicit and explicit styling | Answer My Query says:

   November 7, 2012 at 13:02

   [...] Styling Windows 8 – 3 Implicit and explicit styling by SilverlightShow: Silverlight Community under – Miscelleneous Read original post by Hakan Reis at JayWay Blog [...]

   Reply
4. Styling windows 8 – 1 Colors and themes – Jayway says:

   November 7, 2012 at 11:00

   [...] Styling windows 8 – 3 Implicit and explicit styling [...]

   Reply
5. Styling windows 8 – 2 Text and font styles – Jayway says:

   November 7, 2012 at 11:00

   [...] Styling windows 8 – 3 Implicit and explicit styling [...]

   Reply
6. Windows Store Developer Links – 2012-11-07 | Dan Rigby says:

   November 7, 2012 at 01:29

   [...] how to add “About” and “Privacy Policy” for your application…”Styling windows 8 – 3 Implicit and explicit styling (Håkan Reis)“Let’s continue with control styling. It’s time to focus on updating [...]

   Reply