WPF 是鼠标悬停和单击时的背景更改

Question

我对 WPF 相当陌生，我正在尝试制作一排按钮，当您将鼠标悬停在它们上时，它们会获得红色背景颜色，单击按钮时，单击的背景设置为红色。

我已经工作了，现在唯一的问题是单击按钮后按钮不再具有 IsMouseOver 功能。

App.xaml

<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373442" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="0" Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15px"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F06060" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#F06060" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

按钮 XAML

<Button Style="{StaticResource ResourceKey=MenuButton}" Content="Logout" HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Height="58" Margin="0,315,0,0"/>

C# 代码

public static Button[] buttonArray = new Button[3];
public TaskManager()
{
InitializeComponent();
buttonArray[0] = HomeButton;
buttonArray[1] = TasksButton;
buttonArray[2] = AdminButton;
}
public static void paneSwitcher(Button button)
{
foreach (Button aButton in buttonArray)
{
aButton.Background = Brushes.Red;
}
button.Background = new SolidColorBrush(Color.FromArgb(255, 240, 96, 96));
}
private void HomeButton_Click(object sender, RoutedEventArgs e)
{
paneSwitcher(HomeButton);
}
private void TasksButton_Click(object sender, RoutedEventArgs e)
{
paneSwitcher(TasksButton);
}
private void AdminButton_Click(object sender, RoutedEventArgs e)
{
paneSwitcher(AdminButton);
}

Answer 1

您可以将Button替换为具有附加IsChecked状态的ToggleButton。

然后，您只需向ControlTemplate添加另一个触发器，即可在单击Button时更改其颜色：

<Style x:Key="MenuButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="#373442" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="0" Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" 
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15px"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Blue" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F06060" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#F06060" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

按钮 XAML

<ToggleButton Style="{StaticResource ResourceKey=MenuButton}" Content="Logout" HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Height="58" />

Answer 2

我提出了一种稍微不同的方法。

与其费力地管理一组Buttons，不如使用一组样式为ToggleButtons的RadioButtons？

风格：

<Style TargetType="RadioButton" 
BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate  TargetType="{x:Type RadioButton}">
<Border CornerRadius="0" Margin="1"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter" 
Content="{TemplateBinding Content}" 
HorizontalAlignment="Left" 
VerticalAlignment="Center" Margin="5"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="RadioButton.IsChecked" Value="True">
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F06060" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

然后使用它：

<UniformGrid Height="100" Width="100" VerticalAlignment="Top" Rows="3">
<RadioButton  Content="AAA" GroupName="MY_GROUP"
Command="{Binding RbChecked, Mode=OneTime}"
CommandParameter="A"/>
<RadioButton  Content="BBB" GroupName="MY_GROUP"
Command="{Binding RbChecked, Mode=OneTime}"
CommandParameter="B"/>
<RadioButton  Content="CCC" GroupName="MY_GROUP"
Command="{Binding RbChecked, Mode=OneTime}"
CommandParameter="C"/>
</UniformGrid>

作为您的DataContext类中的示例命令实现：

private ICommand _RbChecked;
public ICommand RbChecked
{
get { return _RbChecked ?? (_RbChecked = new RelayCommand<object>(a => RbCheckedCommand(a))); }
}
private void RbCheckedCommand(object item)
{
this.CurrentChosen = (string)item;
}