Reputation: 1067
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
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