CODEWITHSUNDEEP
c#wpfxaml
Danicco
Danicco

Reputation: 1673

XAML partial styling?

I have these controls:

<Border Style="{StaticResource Button}">                
    <TextBlock>NEW</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
    <TextBlock>CLOSE</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
    <TextBlock>EXIT</TextBlock>
</Border>

And this style:

<Style x:Key="Button" TargetType="{x:Type Border}">
    <Setter Property="Padding" Value="15, 10" />
    <Setter Property="Margin" Value="5, 0" />
    <Setter Property="MinWidth" Value="150" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand" />                
        </Trigger>
    </Style.Triggers>
    <Style.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>        
</Style>

And I want to set each button/border to a specific, different color each, and another color for IsMouseOver.

I tried setting the Background on the control, but then the style can't overwrite the background and I can't do the IsMouseOver change. I can only think of creating a different style for each one with their colors, but is there anyway to do a partial styling, like how you'd do in CSS?

<div class="button blue">NEW</div>
<div class="button red">CLOSE</div>
<div class="button gray">EXIT</div>

Or any other way to achieve this?

Upvotes: 1

Views: 460

Answers (1)

Bryan Walker
Bryan Walker

Reputation: 921

I haven't done any XAML in a while, so I'm a tad rusty. I'm pretty sure you can't do partial styles, but I know you can inherit styles using "BasedOn".

https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx

This will allow you to do your base button style, and then create a color variant for each color you need based upon the common style features.

<Style x:Key="Button" TargetType="{x:Type Border}">
    <Setter Property="Padding" Value="15, 10" />
    <Setter Property="Margin" Value="5, 0" />
    <Setter Property="MinWidth" Value="150" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="Hand" />                
        </Trigger>
    </Style.Triggers>
    <Style.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </Style.Resources>        
</Style>

<Style x:Key="ButtonBlue" TargetType="{x:Type Border}" BasedOn="{StaticResource Button}">
    <Setter Property="Background" Value="Blue" />
</Style>

Something like that, and then you use "ButtonBlue" instead of "Button" as the static resource you're referencing in the XAML for the control that you want to be blue. You should be able to add triggers as well in the inheriting style. Hopefully I'm remembering my syntax correctly.

Also, you may want to change the style Key to something other than "Button". Could be a bit confusing.

Upvotes: 3

Related Questions