CODEWITHSUNDEEP
wpfxaml
Fred
Fred

Reputation: 2468

Set button hover or onmouseover background color

I am struggling to find a solution to this. Every other one i;ve tried is not working. Maybe I am missing something.

I want to change the background color of a Button when I hover over it with the mouse. This is my XAML:

<Window x:Class="Recruitment_Manager.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="374" Width="940">
<Window.Resources>
    <Style TargetType="Button" x:Key="NavigationButtonStyle">
        <Setter Property="Height" Value="35"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Background" Value="Transparent"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Green"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="StackPanel" x:Key="NavigationButtonContentStyle">
        <Setter Property="Orientation" Value="Horizontal"/>
    </Style>
    <Style TargetType="Image" x:Key="NavigationButtonImageStyle">
        <Setter Property="Width" Value="35"/>
    </Style>
    <Style TargetType="Label" x:Key="NavigationButtonLabelStyle">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="15"/>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel HorizontalAlignment="Left" Width="200">
        <StackPanel.Background>
            <SolidColorBrush Color="#404040"/>
        </StackPanel.Background>
        <Button Style="{StaticResource ResourceKey=NavigationButtonStyle}">
            <StackPanel Style="{StaticResource ResourceKey=NavigationButtonContentStyle}">
                <Image Style="{StaticResource ResourceKey=NavigationButtonImageStyle}">

                </Image>
                <Label Style="{StaticResource ResourceKey=NavigationButtonLabelStyle}">
                    Settings
                </Label>
            </StackPanel>
        </Button>

    </StackPanel>
</Grid>

But it looks like the trigger never executes? What am I missing or how can I get what I want? Thank you in advance.

Upvotes: 0

Views: 981

Answers (2)

Vyas
Vyas

Reputation: 2774

To remove the default MouseOver behaviour on the Button you will need to modify the ControlTemplate. Changing your Style definition to the following should do the trick:

<Style TargetType="{x:Type Button}" x:Key="NavigationButtonStyle">
    <Setter Property="Height" Value="35"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
    </Style.Triggers>
</Style>

Upvotes: 1

Akshay
Akshay

Reputation: 1901

Try following code

<Style TargetType="Button" x:Key="NavigationButtonStyle">
    ...    
   <Trigger Property="Control.IsMouseOver" Value="True">
      <Setter Property="Background" Value="Green"/>
   </Trigger>
</Style>

Upvotes: 0

Related Questions