Infosys Microsoft Alliance and Solutions blog

« Role of Claims based Authentication in Federated Security -- 5 (Zermatt) | Main | And it happens in a 'snap' »

Using Styles in WPF User Experience Design

One of the many reasons I love doing UX Design work for WPF is because it gives the designer an opportunity to significantly change the presentation aspects without making changes to core functionality. The UI revamping capabilities in WPF are built around four pillars. Styles, Templates, Skins and Themes.  Here is a brief introduction to using Styles in WPF.

A style ( from System.Windows.Style class)  groups together properties that can be set individually at on different controls in different places. Extracting them and setting them as a group allows simple reuse of that set of properties across multiple user interface elements. In that sense, this is very similar to CSS approach.

Here is how it is different. In WPF, Style uses a collection of setters to set the target properties. Creating a Setter basically involves setting the name of dependency property and it’s desired values. It is best to set Styles in Resources repository (in a resource.xaml file) as you can use them across the application or set more specific window level styles to override the application level styles. This approach works great and there is plenty of reuse of code without losing creative control over the output.

Consider following simple code snippet to see how styles work. Ideally, this style description should be covered in a resource.xaml file. Here we are defining it in the stackpanel’s Resources collection to keep things simple.

<StackPanel Orientation= “Horizontal”>
<Style x:key= “myButtonStl”>
                <Setter Property= “Button.Foreground” Value= “Silver” />
                <Setter Property= “Button.Height” Value= “35” />
                <Setter Property= “Button.Width” Value= “65” />
                                <RotateTransform Angle = “10” />
                <Button Style= “{StaticResource myButtonStl}”> Save</Button>
                <Button Style= “{StaticResource myButtonStl}”> Close </Button>

In the Setters section, we defined three properties that will make this Style, gave them a name, ‘myButtonStl’, and applied this style to two buttons we have in the application. Simple!

There is one more approach that can get this done. That involves use of Triggers. Whereas Style applies the properties unconditionally, Triggers get into action when one or more condition is satisfied. More on Triggers in next posting.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.

Subscribe to this blog's feed

Follow us on

Blogger Profiles

Infosys on Twitter