XTab's Blog

Introduction

 One of the more basic panels provided in WPF is the StackPanel. As you would expect, it stacks its child elements one after the other - by default stacking them vertically. You can however override this setting and change the Orientation to Horizontal. As with the WrapPanel, I think that in the majority of cases you will use this panel as part of a larger, more complex display.

 In point of fact, the amount of code reduction in that example was small. That's because the example uses only five buttons. But of course if the project had, say, 50, 100 or 200 buttons all using the same Style then the saving would be much greater.

 That leads me nicely into something I need to cover regarding accessibility of styles. The one I've used for the buttons is rather tightly locked down. Currently its scope is limited to that one particular WrapPanel.

 Here is the original code:

 A minor tweak that saves repetition is to assign the type of control to the TargetType. In this case of course the TargetType would be Button. It would then not be necessary to fully qualify the control name, as we have done (e.g. Button.Background, Button.Foreground, etc).

 The alternative code would be:

 Note also that you can assign the more generic type of "Control" to the TargetType, i.e.:

     TargetType="{x:Type Control}" .

The style will then be available to all controls - any irrelevant properties being ignored.

 Let's start with where we might want to place that Style so that we can widen its scope. If those five buttons in the WrapPanel are the only ones we want to style in that way in this application then the code can happily be left as-is. However if we maybe want to use that button style elsewhere in the same Window, then all you have to do is cut and paste the Style out of the WrapPanel Resources and into the Window Resources:

 The Style will also be available for any other Button in that Window.

Application-wide Resources
 Moving further up the hierarchy, if the Style is to be used in more than one file across the project then the next place to consider is the Application.xaml file. This file is automatically created for you when you set up a new project. The only change needed from the previous example is the obvious one of changing the "< Window.Resources >" to "< Application.Resources >" when you cut and paste it from the Window xaml file to Application.xaml.

  If you omit the Key from the Style then that particular style becomes the default style for all buttons in the application. (The "key", you may remember from earlier blogs, represents the name of this style and you can use it to identify exactly which style you want to apply to individual controls).
This blanket coverage isn't set in tablets of stone, though. If you want to override the default style with another one of your choice then you simply assign the style name as in previous examples.

 and you get something like this:

 For completeness (although I don't think you'll be needing it any time soon!), here's the Style code (which I placed in Window.Resources):

 There is however an alternative to pasting the Styles directly into Application.xaml and some people do prefer to take this route. That is to create one or more ResourceDictionaries and to place the dictionary or dictionaries in the Application's Resources markup. If for no better reason, this approach is worth considering because it keep the Styles neatly compartmentalized and also makes it very easy to lift a "Style File" ResourceDictionary from one project and reuse it in another one. It also reduces clutter in Application.xaml.

Resource Dictionary
It's simple to add a new ResourceDictionary to the project. Select "Project" from the top line menu and you will be able to select "Add Resource Dictionary" from the context menu that appears:

 Choose a name for it - I used "ButtonStyles" and add it to the project. The skeleton code in the xaml file looks like this:

 Once again, you can Cut and Paste the Style from wherever it currently sits (WrapPanel.Resources, Window.Resources or Application.Resources and paste it into the ResourceDictionary file. At his point, or in fact at any time in the future you can add further styles to this ResourceDictionary. This is a plus. Even better, if you subsequently decide that you want all the text on these buttons to be Yellow instead of White, then you only have to make the change in one place (the Style in the ResourceDictionary) and it will automatically be propagated throughout the application. If you're familiar with CSS you'll see the similarities.

 There is one more task needed to make the ResourceDictionary(ies) universally available. You have to place it or them inside a MergedDictionaries collection ... yep, even if there is only one of them! This code in the Application.xaml file will do the trick:

 And of course if you do happen to have more than one ResourceDictionary then you just add them inside the MergedDictionaries collection tags:

Just adding as many as you need as time goes on.

 Although this part hasn't covered much in the way of the Styles themselves, I hope the explanation of where to place the Styles for the scope you require and how to access those Styles is helpful to you. Initially I found the syntax for getting the application to find the styles in ResourceDictionaries a bit difficult to grasp, so I hope that this too is useful for you. In the next Part I will dig deeper into some more things you can include in Styles.