Как изменить цвет кнопки в WPF, стиль которой определен как ресурс stati c?

Question

Я пытаюсь изменить цвет фона моих кнопок, когда на них наведена мышь, так как это выглядит ужасно в сочетании с моим выбором дизайна пользовательского интерфейса.

Это кажется чем-то интуитивным, однако мне не удалось обернуться, как я могу это сделать.

Также Я предполагаю, что мне также нужно будет изменить цвет кнопки во время ее нажатия. Помощь в этом также будет приветствоваться.

Вот что вы можете найти в файле App.xaml.

Как видите, я пытался использовать, но это не принесло мне удачи.

    <Application.Resources>
        <!--Sets the default colours I will be using for this project-->

        <SolidColorBrush x:Key="textColor" Color="#0EFFAF"/>
        <SolidColorBrush x:Key="backgroundColor" Color="#202223"/>

        <!--Sets the default button style so that whenever I want to add a new button, I don't have to re-write the same code-->
        <Style TargetType="Button" x:Key="buttonStyle">
            <Setter Property="Foreground" Value="{StaticResource textColor}"/>
            <Setter Property="Background" Value="{StaticResource backgroundColor}"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="#0EFFAF"/>
            <Setter Property="Margin" Value="100,35,100,35"/>

            <Style.Triggers>
                <Trigger Property="IsMouseDirectlyOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>

            </Style.Triggers>

        </Style>

    </Application.Resources>

Для справки, вот одна из кнопок, которая использует этот стиль (присутствует в файле xaml для главного окна).

<Button x:Name="UpdateButton"
                Style="{StaticResource buttonStyle}"
                Click="UpdateButton_Click"
                Content="Update "
                Grid.Column="0"
                Grid.Row="3"/>

Я тоже пробовал это, но безуспешно.

Заранее спасибо!

Answer 1

Похоже, вы в основном на правильном пути, однако я думаю, вам нужно переопределить Triggers на уровне ControlTemplate. Я изменил свой собственный код, используя ваш пример, и обнаружил, что триггер при наведении курсора перестал работать.

Вместо <Style.Triggers> вот структура, которая вам нужна (на основе моего собственного кода):

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type Button}">
                    <Border x:Name="border" CornerRadius="16" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="#e8e7e7"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="BorderBrush" Value="#e8e7e7"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#ed0d6c"/>
                            <Setter Property="BorderBrush" Value="#00afdd"></Setter>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#ff3c8f"/>
                            <Setter Property="BorderBrush" Value="#254c8e"></Setter>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#ed0d6c"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Для создания этой структуры я использовал страницу свойств Visual Studio, чтобы сгенерировать шаблон стиля, а затем изменить его по мере необходимости.