求助：WPF菜单按钮按下后保持固定深色的实现方法

需求描述 #

刚接触WPF样式配置，已制作包含4个按钮的菜单，需要实现：

• 按下按钮后，切换为固定深蓝色并保持该状态
• 直到另一按钮被按下，以此作为当前页面的视觉标识

现有代码 #

按钮XAML代码 #

<Button x:Name="CreateDog" Content="Create Dog" Grid.Column="1" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Margin="0,82,161,4" Command="{Binding UpdateViewCommand}" CommandParameter="CreateDog" Grid.ColumnSpan="2"/>
<Button x:Name="SearchDog" Grid.Column="2" Content="Search Dog" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Grid.ColumnSpan="1" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchDog"/>
<Button x:Name="SearchHDIndex" Grid.Column="3" Content="Search HD-Index" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Grid.ColumnSpan="1" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchHDIndex"/>
<Button x:Name="BreedingPartner" Content="Breeding Partner" Grid.Column="3" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Margin="161,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="BreedingPartner" Grid.ColumnSpan="2"/>

App.xaml样式代码 #

<Style TargetType="Button">
    <Setter Property = "Background" Value = "Chocolate" />
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="SandyBrown"/>
            <Setter Property="Foreground" Value="Chocolate"/>
        </Trigger>
    </Style.Triggers>
</Style>

解决方案 #

方案一：用RadioButton替代Button（最简原生实现） #

RadioButton天然支持同一组内互斥选中，只需修改样式让它匹配你的按钮视觉效果：

1. 在App.xaml中添加RadioButton样式：

<Style TargetType="RadioButton">
    <Setter Property="Background" Value="Chocolate"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="FontFamily" Value="Roboto"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Border x:Name="border" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <!-- 选中状态设为深蓝色 -->
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="border" Property="Background" Value="#003399"/>
                    </Trigger>
                    <!-- 保留按下时的临时效果 -->
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="SandyBrown"/>
                        <Setter Property="Foreground" Value="Chocolate"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

2. 替换原Button为RadioButton，统一设置GroupName确保互斥：

<RadioButton x:Name="CreateDog" Content="Create Dog" Grid.Column="1" Margin="0,82,161,4" Command="{Binding UpdateViewCommand}" CommandParameter="CreateDog" Grid.ColumnSpan="2" GroupName="MenuGroup"/>
<RadioButton x:Name="SearchDog" Grid.Column="2" Content="Search Dog" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchDog" GroupName="MenuGroup"/>
<RadioButton x:Name="SearchHDIndex" Grid.Column="3" Content="Search HD-Index" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchHDIndex" GroupName="MenuGroup"/>
<RadioButton x:Name="BreedingPartner" Content="Breeding Partner" Grid.Column="3" Margin="161,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="BreedingPartner" Grid.ColumnSpan="2" GroupName="MenuGroup"/>

方案二：ViewModel绑定选中状态（MVVM架构适配） #

若坚持使用Button，可通过ViewModel维护选中状态，结合数据触发器实现样式切换：

1. 在ViewModel中添加属性并实现INotifyPropertyChanged：

private string _selectedView;
public string SelectedView
{
    get => _selectedView;
    set
    {
        _selectedView = value;
        OnPropertyChanged(nameof(SelectedView));
    }
}

// 更新原命令逻辑，同步选中状态
public ICommand UpdateViewCommand => new RelayCommand<string>(param =>
{
    SelectedView = param;
    // 原有视图切换逻辑...
});

2. 修改App.xaml中的Button样式，添加数据触发器：

<Style TargetType="Button">
    <Setter Property = "Background" Value = "Chocolate" />
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="SandyBrown"/>
            <Setter Property="Foreground" Value="Chocolate"/>
        </Trigger>
        <!-- 根据ViewModel的SelectedView切换选中样式 -->
        <DataTrigger Binding="{Binding SelectedView}" Value="CreateDog">
            <Setter Property="Background" Value="#003399"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding SelectedView}" Value="SearchDog">
            <Setter Property="Background" Value="#003399"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding SelectedView}" Value="SearchHDIndex">
            <Setter Property="Background" Value="#003399"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding SelectedView}" Value="BreedingPartner">
            <Setter Property="Background" Value="#003399"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

3. 确保视图的DataContext已正确绑定到ViewModel。

内容的提问来源于stack exchange，提问作者Leaske