Question

I have a UserControl with some buttons. I need to change the background colour of the buttons but retain all other properties and colours such as mouseover events

I’ve used the following code which I hoped would define UniqueButton1 based on {StaticResource {x:Type Button}}" but change the background property to define my own colours

<UserControl x:Class="Project.Detail"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="800" BorderBrush="#FF5380E7" BorderThickness="0,0,0,1" xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <UserControl.Resources>
        <Style  x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}"  >
            <Setter Property="Background">
                <Setter.Value>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="#FFF896CE" Offset="0" />
                    <GradientStop Color="#FFF788C7" Offset="0.5" />
                    <GradientStop Color="#FFF570BB" Offset="0.5" />
                     <GradientStop Color="#FFF353AE" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid Height="30" Width="800">
        <Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" Name="button2" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
        <Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="423,0,0,0" Name="button1" VerticalAlignment="Top" Width="50" Click="b_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />
    </Grid>
</UserControl>

It kind of works, in that I get the background colours the way I need, but UniqueButton1 which I’ve defined in <UserControl.Resources> is not based on the other default button2 with no style changes applied. Eg, the background, colours, animation speeds etc are all different

Perhaps it’s because I’m also applying a theme?

My question is either
1. How do I define a resource that is based on a default button2 with a theme applied?
or
2. How do I get all of the properties of button2 with the theme applied so I can build my own style?

It’s been suggested I may need to build my own style, which is fine. But I need to match the behaviour of the default themed button except for the background property – if I can’t see how it’s made up it seems a bit of a catch22.

EDIT: To clarify things

These two images show 3 buttons, you can see the mousover for button3 is orange and blue for button2. What you can’t see is that the animation speed is also different. Essentially I want my button to look like button1 in the rest state and button3 on mouseover whilst retaining the button3 animation speed and other properties. Button2 is what I’m getting using basedon with no further properties changed.

Button3 is produced with no resources and XAML

<Button Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>

Button2 is produced using

<UserControl.Resources>
        <Style  x:Key="TEST1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}"  >
        </Style>
</UserControl.Resources>

<Button Style="{StaticResource TEST1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed"/>

Button1 is produced using

    <UserControl.Resources>
        <Style  x:Key="UniqueButton1" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}"  >
            <Setter Property="Background">
                <Setter.Value>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="#FFF896CE" Offset="0" />
                    <GradientStop Color="#FFF788C7" Offset="0.5" />
                    <GradientStop Color="#FFF570BB" Offset="0.5" />
                     <GradientStop Color="#FFF353AE" Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

<Button Style="{StaticResource UniqueButton1}" Height="30" HorizontalAlignment="Left" Margin="360,0,0,0" VerticalAlignment="Top" Width="50" Click="button_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="10" FontStretch="SemiCondensed" />

So obviously button 1 and 2 are not based on button3 which is what I want. I want to clone button3 properties and ONLY change the background to pink.

Answer 1

Change your BaseButton from x:Type to a named one and then set it’s name on others BasedOn, that should do the trick.