Create and apply styles and theming

May include but is not limited to: application-level styles, style inheritance, Generic.xaml, theming attributes

I think that all of us would agree that there’s few duller things than creating styles for an application (at least I always feel that), but fortunately people designing exams thought that we should be able to do so – so I have no exception, I just write a post about it.

If you ever caught yourself copy-pasting some piece of xaml into every textbox or button on a form (I’ve done so, e.g.: HorizontalAlignment=”Center” Margin=”0, 0, 5, 5”), than you are doing it wrong. The proper way to do so is applying styles. You can do so at many levels, and the control level is just one – but not so shockingly, it will override the other levels.

Now the solution for your problem (in fact, one of the solutions) is called styles. What’s a style, you could ask. It’s a class with a few properties, which are as follows:

  • BasedOn: you can do really ugly style inheritance with this property. Just set it to another style (defined earlier), and you can imagine what happens. The golden rule is that the property defined in a “substyle” overrides the “basestyle”’s same property.
  • Resources: resources you’d like to use with your styles. It comes handy when you’d like to set multiple properties to a same object, it might be useful to create a resource from that object. Never seen an example, although.
  • Setters: that’s what you’ll use. This is a collection of setter (for setting standard properties) and eventsetter (for setting up events) objects. More on them in a moment.
  • TargetType: if you’d like to, you can assign a type property you’d like to apply your styles on. And from VS 2010, you even get IntelliSense.
  • Triggers: a collection of TriggerBase objects which lets you set styles automatically. I’ll show an example later.

So that was the answer. Let’s see a fairly basic style.

<Style x:Key=”myStyle”>
                <Setter Property=”Margin” Value=”10”/>
</Style>

And to use, you just need this:

<Button Style=”{StaticResource myStyle}”/>

But you can achieve the same astonishing effect this way, too:

<Button>
                <Button.Style>
                               <Style>
                                               <Setter Property=”Margin” Value=”10”/>
                               </Style>
                </Button.Style>
</Button>

I hope you see how much uglier this one become. The good news is that you can create styles that apply automatically. Let’s do the following:

<Window.Resources>
                <Style TargetType=”Button”>
                               <Setter Property=”Margin” Value=”10”/>
                </Style>
</Window.Resources>

Now every button in your window (which doesn’t have a Margin property set in any other way) will have a Margin of 10. You can see that there are many ways to achieve the same effect. For example, if you’d place the code above into the App.xaml file, (and of course replace Window.Resources with Application.Resources) then all your Buttons in the entire application would get that nice margin. Should you use both of them, the margin set in the Window.Resources section always wins. It is really like how CSS properties are hierarchized.

You can even set events (this sounds nice). The logic is the same, but you don’t use the keyword Property, because you use Event. And you don’t set it to the value, rather you set it to an event handler with the keyword Handler. These are the differences.

Now other interesting things with styles are the triggers. Triggers are cool and adorable. You can set conditions (like the current control is focused, or the mouse is hovering over it, etc.) and you can apply the well-known setters on those conditions. Example (the opening Style part omitted):

<Style.Triggers>
                <Trigger Property=”Control.IsFocused” Value=”True”>
                               <Setter Property=”Control.Background” Value=”Blue”/>
                </Trigger.Property>
</Style.Triggers>

Whenever our control is focused (say, the user clicks or tabs into a TextBox) its background will become blue. Fantastic effect.

For real hardcore fans there is the concept of event triggers. You can use these to trigger an animation when some event fires. Because animations will have their very own blog post, I’ll leave you in the dark until then.

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: