Apply multiple styles in WPF (2023)

I think the simple answer is that (at least in this version of WPF) you can't do what you want.

That is, only one style can be applied for any given element.

However, as others have said above, you may be able to usebased onto help you. See the separate xaml below. In this you will see that I have a base style that defines a property that exists in the base class of the element that I want to apply both styles to. And in the second style, based on the base style, I set another property.

So the idea here is...if you can somehow separate the properties you want to set...depending on the inheritance hierarchy of the elements you want to configure multiple times...you might have a solution.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <page.source> <style x: key="Basic Style" target type="frame elements"> <positive property="horizontal alignment" value="links"/> style><style target type="knob" based on="{StaticResource baseStyle}"> <positive property="contents" value="Hello World"/> style>page.source><rooster> <knob width="200" high=“50”/> rooster>Page>

I hope this helps.

notes:

There is one point that requires special attention. when you changetarget typeIn the second style (in the first xaml set above) opbutton base, these two styles are not applied. However, see the xaml below to get around this limitation. Basically this means giving the style a key and referencing it with that key.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <page.source> <style x: key="Basic Style" target type="frame elements"> <positive property="horizontal alignment" value="links"/> style><style x: key="Derivative Style" target type="Knoopbasis" based on="{StaticResource baseStyle}"> <positive property="contents" value="Hello World"/> style>page.source><rooster> <knob width="200" high=“50” style="{StaticResource derived style}"/> rooster>Page>

Bea Stollnitz hasa good blog postAs for using a markup extension for this, under the heading "How do I define multiple styles in WPF?"

This blog is now dead, so I reproduce the article here:

Both WPF and Silverlight offer the ability to export styles from
Another style via the "BasedOn" attribute. This feature makes it possible
Developers use a class-like hierarchy to organize their styles
legacy. Consider the following styles:

See Also

How do I change ComboBox foreground color on SelectionChanged in WPF? - Microsoft quality assuranceHow do I change ComboBox foreground color on SelectionChanged in WPF? - Microsoft quality assurance

<style target type="knob" x: key="Basic Button Style"> <positive property="gain" value=“10”/>style><style target type="knob" x: key="Red Button Style" based on="{StaticResource BaseButtonStyle}"> <positive property="perspective" value="Rood"/>style>

With this syntax, a button using RedButtonStyle has its own
The Foreground property is set to Red and the Margin property is set to 10.

This feature has been in WPF for a long time and is now new
silver light 3.

What if you want to set multiple styles for an element? Neither does WPF
Silverlight also does not provide a native solution to this problem.
Fortunately, there are ways to achieve this behavior in WPF, I
will be discussed in this blog post.

WPF and Silverlight use markup extensions to provide properties
A value that requires some logic to obtain. Markup extensions are simple
they can be recognized by the braces around them
XML. For example, the {Binding} markup extension contains the
Retrieves a value from a data source and updates it when it changes; this
The {StaticResource} format extension contains the logic from which the value is obtained
Key-based resource dictionary. Fortunately, WPF allows it
Users write their own custom markup extensions. This function is not valid
it's not in Silverlight yet, so the solution in this blog is on its own
Applies to WPF.

others
A nice workaround has been written to merge the two styles using the tag
to expand. However, I would like a solution that provides the following functionality
Merging an infinite number of styles is a bit difficult.

Writing markup extensions is easy. The first step is
Create a class derived from MarkupExtension and use
The MarkupExtensionReturnType property indicates that you intend to do this
The value returned by the markup extension is of type Style.

[markup extension return type(type(style))]People class Expansion with multiple styles:marker extension{}

Specifies the input for the markup extension

We wanted to give users of markup extensions an easy way
Specifies the styles to be merged. basically there are two ways
The user can specify the input for the markup extension. users can
Set properties or pass parameters to the constructor. Therefore
Script users should be able to specify an unlimited number
style, my first approach was to create a constructor that accepts each
Number of strings with the keyword "params":

People Expansion with multiple styles(parameter serie[] inputResourceKeys){}

My goal is to be able to write the input like this:

"{local:MultiStyle BigButtonStyle, GreenButtonStyle}"... />

Note the commas separating the different style keys. Unfortunately,
Custom markup extensions do not support unlimited number
Constructor parameters, so this approach causes a compile error.
If I know in advance how many styles to combine, I can
Using the same XAML syntax, the constructor takes the desired number
Serie:

(Video) WPF - Styles

People Expansion with multiple styles(serieEnter ResourceKey1,serieinputResourceKey2){}

As a solution, I decided to get the constructor parameter
A single string specifying space-separated style names. This
The syntax isn't bad:

... />

private serie[] source key.People Expansion with multiple styles(serieEnter the source key){if(enter source key ==invalid) {Shot jongArgumentNullException("Import Source Key") }It.resourceKeys = inputResourceKeys.Split(jong character[] {''}, StringSplitOptions.RemoveEmptyEntries);if(It.resourceKeys.length ==0) {Shot jongException parameter ("The input source key was not specified.") }}

Calculate the output of the markup extension

To calculate the markup extension's output, we need to override it
MarkupExtension's method is called "ProvideValue". profit value
This method is set on the target of the markup extension.

I'll start by creating an extension method for Style that knows how to do this
Merge the two styles. The code for this method is very simple:

People motionless vacuum to combine(Itstyle style1, style style2){if(style 1 ==invalid) {Shot jongArgumentNullException("Style 1") }if(style 2 ==invalid) {Shot jongArgumentNullException("Style 2") }if(stijl1.TargetType.IsAssignableFrom(stijl2.TargetType)) { stijl1.TargetType = stijl2.TargetType; }if(style2.BasedOn !=invalid) { Merge(style1, style2.BasedOn); }for each(SetterBase currentSetterconsistsstyle2.Setters) { style1.Setters.Add(currentSetter); }for each(TriggerBase currentTriggerconsistsstyle2.Triggers) { style1.Triggers.Add(currentTrigger); }// This code is only required when using DynamicResources. for each(Goalkeyconsistsstyle2.Resources.Keys) { style1.Resources[key] = style2.Resources[key]; }}

Following the logic above, the first style is modified to include everything
information from the second. If there is a conflict (e.g. two styles
setters with the same characteristics), the second style wins. Notification
Besides copying styles and incentives I also thought
TargetType and BasedOn values ​​and the second source
Style can have. For the TargetType of the merged style I use
Which type is more common. If the second style BasedOn
style, I recursively merge the style hierarchy. If exists
resources, I copied them to the first style. If these means
referenced with {StaticResource}, have previously been statically resolved
This merge code is running, so you don't have to move
their. I added this code in case we use DynamicResources.

The extension methods shown above allow for the following syntax:

style 1.merge(style 2);

This syntax is useful if I have an instance of both styles
within ProvideValue. Well, I do not know. All I get from the manufacturer is
A list of string keys for these styles. if supported
parameters to the constructor parameters, I can use the following
Syntax to get the actual style example:

<knob style="{local:MultiStyle {StaticResource BigButtonStyle},{StaticResource GreenButtonStyle}}"... />

People Expansion with multiple styles(parameterstyles[] styles){}

But it does not work. Even if there are no parameter restrictions,
Another limitation of markup extensions can occur where
We need to use the attribute element syntax instead of the attribute
Syntax for defining static resources, detailed and
problem (I agreeprevious blog
post-).
Even if there were none of these restrictions, I would prefer it
Write style lists with just their name - it's shorter and
Easier to read than per StaticResource.

The solution is to create a StaticResourceExtension in code. Datum
style key and string type service provider, which I can use
StaticResourceExtension retrieves the actual style instance. This is
Grammar:

style currentStyle =jongStaticResourceExtension(currentResourceKey).ProvideValue(serviceprovider)

as a style;

Now we have all the bits we need to write the ProvideValue method:

People cover Goal they provide value(IServiceProvider service provider){ styleresultStyle =jongstyle();for each(seriecurrent source keyconsistsResourceKeys) { style current style =jongStaticResourceExtension(currentResourceKey).ProvideValue(serviceprovider)

as a style;

(Video) Styles In WPF

 if(current style ==invalid) {Shot jongInvalidOperationException("Cannot find style with source key"+ current source key +«.») } resultStyle.Merge(currentStyle); }YIELDresult style? }

Here is a complete example of using MultiStyle formatting
to expand:

<window resources> <style target type="knob" x: key="Small Button Style"> <positive property="width" value=“120”/> <positive property="high" value=“25”/> <positive property="lettertypegrootte" value=“12”/> style><style target type="knob" x: key="Green Button Style"> <positive property="perspective" value="vegetables"/> style><style target type="knob" x: key="Bold Button Style"> <positive property="weight" value="daring"/> style>window resources><knob style="{local:MultiStyle SmallButtonStyle GreenButtonStyle BoldButtonStyle}" contents="Small, Green, Bold"/>

But you can extend from another.. check out the BasedOn property

<style target type="text block"> <positive property="gain" value="3"/>style><style x: key="Always Vertical Style" target type="text block" based on="{StaticResource {x:Type tekstblok}}"> <positive property="vertical alignment" value="blouse"/>style>

WPF/XAML doesn't provide this capability by default, but it does provide extensibility so you can do what you want.

We faced the same need and ended up creating our own XAML formatting extension (let's call it "MergedStylesExtension") to allow us to create new styles from two other styles (multiple times in one style if needed to inherit more styles) .

Due to a WPF/XAML bug we have to use the property element syntax to use it, but other than that it seems to work fine. For example. ,

<knob contents="Here's an example of a button that uses two merged styles"> <button style> <ext: merge style based on="{StaticResource FirstStyle}" Fusion of styles="{StaticResource SecondStyle}"/> button style>knob>

I recently wrote this article here:
http://swdeveloper.wordpress.com/2009/01/03/wpf-xaml-multiple-style-inheritance-and-markup-extensions/

This can be achieved by creating a helper class to use and wrap your styles. CompoundStyle is calledhereshow how it's done. There are many ways, but the easiest way is to do the following:

"test"Local:CompoundStyle.StyleKeys="headerStyle,textForMessageStyle,centeredStyle"/>

Hope that helps.

usesubsidiary propertyDefine different styles, such as the following code:

People motionless class CSS{People motionless serie to take an order(DependencyObject){if(element ==invalid)Shot jongArgumentNullException("element")YIELD(serie)element.GetValue(ClassProperty); }People motionless vacuum defined class(dependencyObject,serie value){if(element ==invalid)Shot jongArgumentNullException("element"element.SetValue(class property,value) }People motionless read onlyDependencyProperty ClassProperty = DependencyProperty.RegisterAttached("class",type(serie),type(CSS),jongmetadata function (invalid, OnClassChanged));private motionless vacuum class change(DependencyObject d, DependencyPropertyChangedEventArgs e){it wasIU=difFrame element , style newStyle =jongstyle();if(e.NewValue!=invalid) {it wasname = e.NewValueif serie;it wasarr = namen.Split(jong character[] {''}, StringSplitOptions.RemoveEmptyEntries);for each(it wasNameconsistsarr) { stylestyle = ui.FindResource(name)ifstyle;for each(it waspositiveconsistsstijl.Setters) { newStyle.Setters.Add(setter); }for each(it wastrekkerconsistsstyle.Triggers) { new style.Triggers.Add(trigger); } } } ui.Style = newStyle; }}

Usage: (cuccxmlns:local=”clr-namespace:style_a_class_like_css”in the correct namespace)

<window X: great="Main window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmln:d="http://schemas.microsoft.com/expression/blend/2008" xmlns: mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns: local="clr-naamruimte:style_a_class_like_css" mc: can be ignored="Hoi" title="Main window" high=“150” width=“325”> <window resources> <style target type="text block" x: key="Rood"> <positive property="perspective" value="Rood"/> style><style target type="text block" x: key="vegetables"> <positive property="perspective" value="vegetables"/> style><style target type="text block" x: key="Maat 18"> <positive property="lettertypegrootte" value=“18”/> <positive property="gain" value=“6”/> style><style target type="text block" x: key="daring"> <positive property="weight" value="daring"/> style>window resources><stack table> <knob contents="knob" lokaal: Css.Class="Red Fat" width=“75”/> <knob contents="knob" lokaal: Css.Class="Red Size 18" width=“75”/> <knob contents="knob" lokaal: Css.Class="Green Size 18 Bold" width=“75”/> stack table>window>

result:

You can get similar results if you apply this to a collection of items using a StyleSelector , which I used for a similar problem of using different styles on TreeViewItems depending on the type of object bound to the tree. You may need to modify the class below slightly to suit your particular approach, but hopefully this will get you started

People class my tree style selector:style selector{Peoplestyle defaultStyle {I get;I put; }Peoplestyle new style{I get;I put; }People coverSelect style Style (GoalItems, DependencyObject-container) { ItemsControl ctrl = ItemsControl.ItemsControlFromItemContainer(container);// only applies to the first element in the container (new node) if(items == ctrl.Items[0]) {YIELDnew style; }But{// otherwise use the default style YIELDstandard style? } }}

Then you apply this

When you override SelectStyle, you can get the GroupBy property via reflection as follows:

 People coverSelect style Style (GoalItem, DependencyObject-container) { PropertyInfo p = item.GetType().GetProperty("team against", BindingFlags.NonPublic | BindingFlags.Instance); PropertyGroupDescription eigenschapGroupDescription = (PropertyGroupDescription)p.GetValue(item);if(property group description !=invalid&& propertiesGroupDescription.PropertyName =="title") {YIELD It.TitleStyle; }if(property group description !=invalid&& propertiesGroupDescription.PropertyName =="datum") {YIELD It.dateStyle; }YIELD invalid; }