WPF Navigation

SVG to XAML Conversion | Standalone WPF Applications | Silverlight 3 | Project Template for Silverlight 3 | Silverlight Libraries | XAML Introduction | WPF Data Binding | WPF Styles and Templates |

Latest news

10 Jul 2009: Silverlight Version 3 released

Links:

• Silverlight Quickstart
• Kaxaml

WPF Styles and Templates

I am keen on all things data and as all the design experts say, always try to separate the data from the procedural code, in such a way that a change to the code does not impact on the data. If the data and code are entangled in an application then it becomes exceedingly difficult to have any re-use of the data in another application; so when the successor to WPF comes along you are not into a major rewrite.

WPF re-introduces the concept of data binding where traditionally a database field is bound to a text box on a Windows form. This implies a fairly static situation where the fields from the database are hardwired to the textbox fields on the screen and the only way they can change is by trawling through the database and presenting a different record on the screen. With WPF this is taken several steps further because now you can have a database changing independently of your application and have your screen being updated in realtime by the changes. For example your database could contain share prices being updated continuously which are then displayed in textboxes on your screen. WPF allows these textboxes to be bound to the database and to change in real time without any screen refreshes. Another common application is where the user can have a control which dynamically changes the display of a graph similar to the type of user controls in current Paint.NET, but this time you don't change a set of parameters, press the OK button and wait for the screen to refresh; instead you use sliders (say) to change the parameters and watch the screen change as you move the slider.

Style Resources

When building your User Interface there is a need to give the elements a common look and you don't want to keep on having to define the same fonts, color schemes each time you add a label or textbox. So this is when it helps to define style resources which can then be readily picked up each time you define a new element on your form. Resources can be defined at any level, for example for a StackPanel, Window or even Application level. Resources can be static such as defining a SolidColorBrush, dynamic where the resource changes due to other events. Styles let you define the appearance of an element or group of elements and then there are triggers allowing you to change properties of elements automatically when some event occurs such as a mouse move.

Organizing Resources

If you are designing an application of any size then it soon becomes clear that holding the style resources within the functional XAML code can be confusing, so it is advisable to move them out of App.xaml, or functional xaml files (used for Windows or Pages) and hold them in a separate style resource xaml file. Note that resources can be broken down further into separate files so that all raw image files such as jpg can be held separately. Once you have separated out into separate resource files then the next problem is finding the reference you need to use and here naming conventions can help e.g. referencing the resource name back to a Window. When you define resources in markup, you assign the unique key through the x:Key Attribute. After you define a resource, you can reference the resource to be used for a property value by using a resource markup extension syntax that specifies the key name as in the listing below.

Style Resource Example

The following defines a style for the TextBlocks (labels in NET 2.0) and TextBoxes :-

The above resources can then be used whenever you define a TextBlock or TextBox within the canvas. For example the following draws five TextBlock elements on the Canvas each with the same indent, height and using a bold font :-

ControlTemplate

Using styles we can set up a common look across Windows and Pages for the User Interface, however, sometimes you may want a common look across the whole application; for example if you want all buttons to be displayed as gel buttons. In this case using XAML we can redefine the ControlTemplate for any control so that it looks how we want it to look rather than the default Windows look. This is a very powerful method because you are now changing the default way that WPF displays elements - ControlTemplate means the template for the Control we are changing. If you look at Kaxaml under Simple Styles you will see examples of ControlTemplates for many of the XAML elements such as Button, ComboBox etc. It is quite educational to have a play with these before trying to build your own ControlTemplates. I have played around with some XAML examples on the Net and quite often found you have to check and edit the code, because sometimes the uploading to the web creates some bad code - in XAML it is all too easy to make a mistake. I found a really good example of how to use ControlTemplates at NET 3.0 Crash Course - WPF Styles and ControlTemplates

DataTemplate

My first impression of DataTemplate in XAML is that it is similar to a style but applicable to data, so just like a style, the DataTemplate can be applied at any level such as Application, Window or Panel. Using a DataTemplate primarily allows you to separate the data from the User Interface making it easy for a set of data to be displayed in a consistent way across several different forms and also allowing changes to be made in only one place. Having spent a little time with some examples I can now see that it is at its most useful when formatting data in a listbox. For example if you want to display name and address data with each record going over several lines as would be the case for an address label it is reasonably easy to format using a DataTemplate and displaying the record collection in a listbox. In fact I was missing the Delphi DBCtrlGrid component, but I found with XAML it was possible to do much better - I'm afraid I got the idea from the NET 3.0 Crash Course blog but to make it work I had to get a little understanding of DataTemplates. In fact I used an XML control for the data and put the DataTemplate in a separate dictionary file:-