Applying WPF styles like CSS and Html

I doubt this is possible, but just wanted to confirm.

I am writing a simple WPF application and want my styling to be defined externally, so you could basically load the style as an external resource. A bit like how CSS and HTML are generally separated out...

However one thing that bugs me is that with HTML & CSS its more of an o开发者_Go百科utside looking in approach, the CSS targets the elements and is applied to matching elements. However with WPF it seems that its the other way around, you have to tell the element what styles it should have applied, however this doesn't seem very dynamic. So I just want to know if there is a way to have styles applied so the styles just target the elements.

An example would be something like:

<Style TargetType="{x:Type TextBox}" TargetElement="{x:Name SomeTextboxElement}">
    <Setter Property="Width" Value="Auto"/>
</Style>

As normally you have to specify a key with the style, then get the element (SomeTextboxElement) to map to the style's key.

It just seems a bit silly having to explicitly give each element a style binding, it should be more hierarchical and filter down (which may be possible, i just dont know how) and not be a one to one mapping. Would take forever to style a whole application...

Hope that makes sense...

What you say you're looking for is interesting, but doesn't work with the wpf mindset, in which you apply a style to either a visual or a visual's type (meaning : you can apply a style to a certain type or define a style as a resource with a named key and use that key explicitly). In your case, I think creating a style like the following should do:

<Style TargetType="{x:Type TextBox}">
   <Setter Property="Width" Value="Auto"/>
</Style>

This will apply your style to all textboxes, just leave out the TargetElement Attribute.

I know this is not quite the same, but if you want the same basic control style with just a few changes depending on the usage you could try using a Trigger that makes minor changes to it. I usually use the "Tag" Attribute of my controls for giving a little extra information to my style definition. Example basic button style, but 3 buttons :

        <Style.Triggers>
            <Trigger Property="Tag" Value="delete">
                <Setter Property="Background" Value="Red"></Setter>
            </Trigger>
            <Trigger Property="Tag" Value="confirm">
                <Setter Property="Background" Value="Green"></Setter>
            </Trigger>
        </Style.Triggers>

Now some hypothesis. What you want would be very very easy to implement if two conditions were met:

• All WPF visuals have a DependencyProperty named "ParentVisual", returning the visual that immediately contains the visual in question.
• All WPF visuals have a DepencyProperty, say "VisualType"

Given that and combining this with triggers / multitriggers would then let you create Triggers for ParentVisual.VisualType.

Let's define some hypothetical CSS for WPF to apply a style to any TextBox that's contained inside the Border with the Id "subnavi" contained in a grid.

Grid Border#subnavi TextBox
{
    backgroundColor:#FF0000;
}

Translated into WPF, this would be a Multitrigger for the TextBox with three conditions:

  <MultiTrigger>
   <Condition Property="ParentVisual.VisualType" Value="Border"></Condition>
   <Condition Property="ParentVisual.Name" Value="subnavi"></Condition>
   <Condition Property="ParentVisual.ParentVisual.VisualType" Value="Grid"></Condition>
   <Setter Property="Background" Value="Red"/>
  </MultiTrigger>

But unfortunately, there is no such DependencyProperties, so you'll only be able to use the mechanism I mentioned above if you create wrappers for each of the wpf controls.

To return to what I called the WPF mindset : WPF elements get styled by the WPF engine walking the visual tree up, not down, beginning at the control in question. CSS works the other way round, I think.

EDIT : I think it might be more advisable to use the DependencyObject class than using Visual in what I wrote above.

I don't know if you still want to do this, but Colin Eberhardt did something for this a while back : http://www.codeproject.com/Articles/36499/Using-CSS-Selectors-for-Styling-in-WPF

You're looking for implicit styles. They are not as granular as css selectors, but you can define a style for each type of element. For example, the following example says: "I want all my buttons to have a width of 80"

<Style TargetType="{x:Type Button}">
    <Setter Property="Width" Value="80"/>
</Style>

These definitions can be done at several different scopes: application, page, control, or any framework element just by adding it as a resource. The runtime will take a bottom-up approach when searching for an implicit style, and it will use the first one it founds.

Take a look at this article for further details.