Home > Software design >  WPF XAML: Button's background color doesn't change on mouseover [duplicate]
WPF XAML: Button's background color doesn't change on mouseover [duplicate]

Time:09-17

I need to change text color, cursor and background of a button on mouse hover. I'm trying to do this by changing styles but also tried adding style trigger directly to the button

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Cursor" Value="Hand" />
     </Trigger>
</Style.Triggers>

Text color and cursor change, but background color remain the same (light blue). Please tell me what could be the problem?

Screenshot

Full code:

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="Заголовок" Height="640" Width="960">
    <Window.Resources>
        <Style TargetType="Button" x:Key="SidebarButton">
            <Style.Setters>
                <Setter Property="Control.FontFamily" Value="Segoe UI" />
                <Setter Property="Control.Background" Value="#333742" />
                <Setter Property="Control.Foreground" Value="White" />
                <Setter Property="Control.BorderThickness" Value="0" />
                <Setter Property="Control.Padding" Value="10" />
            </Style.Setters>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="Cursor" Value="Hand" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid Background="#333742">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.2*" MinWidth="150" MaxWidth="200"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" Background="#414550"></StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0"></StackPanel>

        <StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="1" Background="#333742">
            <Border Height="80">
                <TextBlock FontSize="18" Foreground="#fff" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30">Меню</TextBlock>
            </Border>
            <Button Style="{StaticResource SidebarButton}">Печать кодов</Button>
            <Button Style="{StaticResource SidebarButton}">Настройки</Button>
            <Button Style="{StaticResource SidebarButton}">О программе</Button>
        </StackPanel>
        <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Background="#2d3039"></StackPanel>
    </Grid>
</Window>

CodePudding user response:

You can find the answer in this response.

You can define the style like this :

        <Style TargetType="Button" x:Key="SidebarButton">
            <Style.Setters>
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="Background" Value="#333742" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Background="{TemplateBinding Background}" Padding="10">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="Cursor" Value="Hand" />
                </Trigger>
            </Style.Triggers>
        </Style>
  • Related