Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Applying same style to multiple elements

Tags:

styles

wpf

xaml

I am new to using WPF and I was trying to apply Style (e.g. Background for TextBox, Button and MenuItem should be Orange). To achieve this I did something like:

<Style TargetType="TextBox" x:Key="sampleTextBox">
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontFamily" Value="Verdana"/>
    <Setter Property="FontSize" Value="11px"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                <GradientStop Color="#FFFFD190" Offset="0.2"/>
                <GradientStop Color="Orange" Offset="0.85"/>
                <GradientStop Color="#FFFFD190" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

and repeated the same piece of code for targettype Button and for target menu. This is working absolutely fine. But I would like to minimize the amount of repeated code by probably having multiple targettype values.

Please let me know if it is possible.

Thanks.

like image 396
ds345 Avatar asked Aug 12 '13 09:08

ds345


People also ask

How do you apply the same style to multiple HTML elements?

To apply the same CSS styles to more than 1 HTML elements tags, you can separate various HTML element tags selectors by using the , (comma character) in CSS. This will set the text color of both paragraphs to red . Like this, you can apply one style to many HTML element tag selectors separated by the comma character.

How do you apply style to several specific element types?

You will begin by using the type selector to select HTML elements to style. Then, you will combine selectors to identify and apply styles more precisely. Lastly, you will group several selectors to apply the same styles to different elements.

What selector should you use when applying a style to multiple elements?

The class selector is useful for targeting multiple elements, things like cards or images that you want to have matching styles. To select an element with a specific class, you use a . character (period) and then follow it with the class name. Let's look a CSS selector example for the class selector.

Can multiple selectors apply the same style?

CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space. You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets.


2 Answers

  <Window.Resources>
    <Style x:Key="sampleTextBox">
        <Setter Property="Control.FontFamily" Value="Verdana"/>
        <Setter Property="Control.FontSize" Value="11px"/>
        <Setter Property="Control.FontWeight" Value="Bold"/>
        <Setter Property="Control.Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <GradientStop Color="#FFFFD190" Offset="0.2"/>
                    <GradientStop Color="Orange" Offset="0.85"/>
                    <GradientStop Color="#FFFFD190" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<StackPanel>
    <TextBlock Text="This is a string and it should be wrapped." Style="{StaticResource sampleTextBox}"/>
    <TextBox Text="This is a string and it should be wrapped." Style="{StaticResource sampleTextBox}"/>
</StackPanel>
like image 108
yo chauhan Avatar answered Oct 04 '22 12:10

yo chauhan


Style has an attribute BasedOn. http://msdn.microsoft.com/en-us/library/system.windows.style.basedon.aspx With this you can use Style inheritance. Define a base style with common attributes and derive your child styles with specific attributes.

like image 21
Sven-Michael Stübe Avatar answered Oct 04 '22 11:10

Sven-Michael Stübe