Mark Denom
Mark Denom

Reputation: 1067

Why isnt the background changing on MouseOver?

So i decided to try to create my own template for the first time for my menu buttons and I wanted to change the basic stuff like.. the background color and the backgroud color when the mouse is over. It works just fine besides the MouseOver part, it doesnt change it to black, it's still the same blue ish system color when the mouse is over, why is that? Is there a Override property I need to set?

My button

    <Button Height="40" Style="{DynamicResource MenuButtonStyle}">
        <StackPanel>
            <Label Foreground="White" FontWeight="SemiBold">Products</Label>
        </StackPanel>
    </Button>

And the style

<Style x:Key="MenuButtonStyle" TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black"/>
                </Trigger>
            </Style.Triggers>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Black"/>
        </Style>

Upvotes: 0

Views: 66

Answers (1)

Juan Carlos Rodriguez
Juan Carlos Rodriguez

Reputation: 784

To change your Button Background you need to modify the control template of it, just like this:

<Style x:Key="MenuButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
       </Setter>
       <Style.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Background" Value="Black"/>
           </Trigger>
       </Style.Triggers>
 </Style>

You need to do this because the "original" Button style has triggers in its ControlTemplate so you need to override them

Upvotes: 3

Related Questions