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?
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>