Цвет фона кнопки не отображается после использования шаблона управления в WPF

Question

Вопрос новичка здесь.

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

<Button  x:Name="OnlineBtn"
                        HorizontalAlignment="Left" 
                        Margin="206,6,10,10"  
                        Grid.Row="2" VerticalAlignment="Top" Width="50" Height="41"                   
                        Command="{Binding Path=OnlineCommand}"
                        Background="{Binding OnlineButtonProp,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                        BorderBrush="Black"
                         Style="{StaticResource OnLineButtonStyle}">

И ниже мое определение шаблона управления.

 <Style x:Key="OnLineButtonStyle" TargetType="Button">
            <Setter Property="Template">                
                <Setter.Value>
                    <ControlTemplate TargetType="Button">

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="Red"/>                                   
                            </Trigger>            
                        </ControlTemplate.Triggers>
                        <ContentPresenter VerticalAlignment="Stretch"
                                          HorizontalAlignment="Stretch">                                
                        </ContentPresenter>    
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Я видел пример на SO о том, как установить этот шаблон элемента управления, но мой вопрос вроде бы в два раза: 1) Почему мое свойство IsMouseOver не работает 2) Почему не работает мое свойство Button цвета фона, имеющее привязанные реквизиты в моей виртуальной машине

Фон IsMouseOver Setter выбран КРАСНЫМ только для проверки воздействия мыши.

Answer 1

Установка фона в явном виде (как это делается с помощью привязки) имеет более высокий приоритет по сравнению с установщиком в триггере. Следовательно, триггер игнорируется.

Вы должны добавить такой элемент, как Border или Grid, в свой ControlTemplate, где вы устанавливаете фон с помощью TemplateBinding для фона кнопки. Затем заставьте триггер изменить фон этого элемента вместо фона кнопки:

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" Background="{TemplateBinding Background}">
                    <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>