C# WPF Buttonproperties when mouse hovers or clicks it-CodePudding

I'm trying to make my button theme react to the mouse. So when I hover over the button it should be gray and when I click it, the button should change the color as well. If tried to write my own code and use other peoples code but it just won't work.

This is what i have at the moment. When the code works, i'll change the color from red to something that fits better.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type ToggleButton}}"
           TargetType="{x:Type RadioButton}"
           x:Key="MenuButtonTheme">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid VerticalAlignment="Stretch" 
                              HorizontalAlignment="Stretch"
                              Background="#272626">

                            <TextBlock Text="{TemplateBinding Property=Content}"
                                       VerticalAlignment="Center"
                                       Margin="20,0,0,0"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>

        </Style.Setters>

        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="Background" Value="#FF658EAA"/>
            </Trigger>

            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="#FF365B74" />
            </Trigger>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="Background" Value="#FF658EAA"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="Red" />
                <Setter Property="Foreground" Value="#FF658EAA" />
            </Trigger>
        </Style.Triggers>
        
    </Style>
</ResourceDictionary>

CodePudding user response：

you should apply Background and Foreground properties to some elements in ControlTemplate, otherwise they won't have any effect on appearance:

<Style.Setters>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid VerticalAlignment="Stretch" 
                      HorizontalAlignment="Stretch"
                      Background="{TemplateBinding Background}">

                    <TextBlock Text="{TemplateBinding Property=Content}"
                               Foreground="{TemplateBinding Foreground}"
                               VerticalAlignment="Center"
                               Margin="20,0,0,0"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="Background" Value="#272626"/>
    <Setter Property="BorderThickness" Value="0"/>

</Style.Setters>