Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
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>

Posted 06-19-2008 11:37 AM by Christopher Bennage
Filed under: ,

[Advertisement]

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)