Devlico.Us
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @devlicious

Christopher Bennage

Our WPF book is now available!


Styling Separators in WPF

Separators are the little tiddly-bits that, um, separate items in a menu or tool bar. Examples of SeparatorsThe intention is to divide the items on the menu or toolbar into logical groups. Separators are controls, but they don't have any real behavior.

One of our current projects includes an exhaustive custom styling of a WPF application.  Last week, I was working on the top level menu as well as context menus.  I wanted all of my separators to look the same.  So I ignorantly created a style, the same way that I would for any other control. It looked something like this:

<!-- Separator -->
<Style TargetType="Separator">
    <Setter Property="Height" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <Rectangle Height="{TemplateBinding Height}"
                           Fill="{StaticResource NormalBorderBrush}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In case you're not familiar with it, WPF allows to specify a default style for a control by setting the TargetType and omitting the x:Key.

But that doesn't work for separators.

The reason is that MenuItem and ToolBar both use separators, and thus creating global style for both wouldn't make sense. (At least, I'm guessing that's what the designers of WPF were thinking.) Instead, both of these MenuItem and ToolBar expose a static property, SeparatorStyleKey. This acts as the key for locating the corresponding separator style.

If you want to style the separators for all menu items, your need to set x:Key to this static property. The resulting style would look like this:

<!-- Separator -->
<Style x:Key="{x:Static MenuItem.SeparatorStyleKey}"  
       TargetType="{x:Type Separator}">
    <Setter Property="Height" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Separator}">
                <Rectangle Height="{TemplateBinding Height}"      
                           Fill="{StaticResource NormalBorderBrush}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


Comments

Christopher Bennage said:

Hmm, did anybody notice my inconsistency with the value for TargetType?  You don't _have_ to use the markup extension if you don't want to.

# June 19, 2008 9:56 PM

Dew Droplet - June 20, 2008 | Alvin Ashcraft's Morning Dew said:

Pingback from  Dew Droplet - June 20, 2008 | Alvin Ashcraft's Morning Dew

# June 20, 2008 11:59 AM

DotNetKicks.com said:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# June 30, 2008 10:47 AM

About Christopher Bennage

Christopher is a software developer and consultant at Blue Spire Consulting, a company he co-founded with Rob Eisenberg in 2006. He is a Christian, a marginal musician, and an armchair philosopher. His interests include programming, liberal education, science, truth, beauty, and a number of deceased British authors (C. S. Lewis, G. K. Chesterton, and most recently Owen Barfield.) He lives in Tallahassee, FL with his wife and three children and still prefers to play as the Night Elves in WarCraft 3. Check out Devlicio.us!

Our Sponsors

Red-Gate!