单选按钮的背景颜色

Question

我想在 MetroWindow 中创建三个大矩形单选按钮。选中后，单选按钮应更改其背景颜色以将其标记为已选中。

目前我有点像这样：

MainWindow.xaml:

<ma:MetroWindow x:Class="WpfForm.MainWindow"
    xmlns:ma="http://metro.mahapps.com/winfx/xaml/controls"
    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:WpfForm"
    mc:Ignorable="d"
    Title="MainWindow" Height="720" Width="1280" DataContext="{Binding RelativeSource={RelativeSource Self}}" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" Background="White" Loaded="MainWindow_Loaded" Closing="Window_Closing">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.285*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TabControl TabStripPlacement="Left" Width="Auto" Height="Auto" Grid.ColumnSpan="4" Margin="4,0,3,0"
                SelectedIndex="{Binding SelectedTab, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                SelectionChanged="MainWindowTabControl_SelectionChanged" >
        <TabItem >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="Aktion" FontSize="20" FontWeight="Bold" Padding="8" HorizontalAlignment="Center" />
                </StackPanel>
            </TabItem.Header>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <RadioButton Style="{DynamicResource SquareButtonStyle}" 
                             Grid.Column="0" 
                             IsChecked="{Binding isFirstButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                             VerticalAlignment="Center"  
                             HorizontalAlignment="Center" 
                             Width="210" Height=" 320" 
                             Margin="0,0,0,170"  
                             BorderBrush="#FF707070" 
                             ma:ButtonHelper.CornerRadius="50" 
                             FontSize="28"
                             HorizontalContentAlignment="Center"
                             VerticalContentAlignment="Center" 
                             ma:ButtonHelper.PreserveTextCase="True"
                             Content="Text1">
                </RadioButton>
                <RadioButton Style="{DynamicResource SquareButtonStyle}" 
                             Grid.Column="1" 
                             IsChecked="{Binding isSecondButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                             VerticalAlignment="Center"  
                             HorizontalAlignment="Center" 
                             Width="210" Height=" 320" 
                             Margin="0,0,0,170"  
                             BorderBrush="#FF707070" 
                             ma:ButtonHelper.CornerRadius="50"
                             FontSize="28"
                             HorizontalContentAlignment="Center"
                             VerticalContentAlignment="Center" 
                             ma:ButtonHelper.PreserveTextCase="True"
                             Content="Text2"/>
                <RadioButton Style="{DynamicResource SquareButtonStyle}" 
                             Grid.Column="2" 
                             IsChecked="{Binding isThirdButtonSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                             VerticalAlignment="Center"  
                             HorizontalAlignment="Center" 
                             Width="210" Height=" 320" 
                             Margin="0,0,0,170"  
                             BorderBrush="#FF707070" 
                             ma:ButtonHelper.CornerRadius="50"
                             FontSize="28"
                             HorizontalContentAlignment="Center"
                             VerticalContentAlignment="Center" 
                             ma:ButtonHelper.PreserveTextCase="True"
                             Content="Text3">
                </RadioButton>
                <Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Padding="35,3"
                        Margin="0,0,8,6" Grid.Column="2" IsEnabled="{Binding ActionTabAllowNext, UpdateSourceTrigger=PropertyChanged}"
                        Command="{Binding ActionCommand}" Content="Next" FontSize="18" />
            </Grid>
        </TabItem>
    </TabControl>
</Grid>
</ma:MetroWindow>

App.xaml:

<Application x:Class="WpfForm.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfForm"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <!-- Accent and AppTheme setting -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Crimson.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
</Application>

单击按钮时，它只会在悬停和按下鼠标时改变颜色，但在松开鼠标时变回正常颜色。也许我可以添加一个额外的属性来将按钮标记为已选中？

解决方案

下面的答案对我有用。谢谢您的帮助。最后我采用了另一种更适合的方法：我将 RadioButtons 的样式更改为 ToggleButton。尽管如此，下面的答案是正确的。

Answer 1

您可以在 mahapp 的 github 上在线找到样式定义：https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/Styles/Controls.RadioButton.xaml

只需将其复制并粘贴到您的 App.xaml 中，然后根据需要更改颜色值。

不要忘记将样式重新绑定到您使用 RadioButton 的任何地方的编辑版本。

单选按钮的背景颜色

Background Color for Radiobutton

c#

wpf

mahapps.metro