在 WPF 中使用控件模板后按钮的背景颜色不显示

Question

Beginner question here.

I have a button whose Background is bound to a property in my ViewModel. The same button also has a command whose implementation is in my ViewModel. The clicking toggles a boolean in my VM & that changes both the text & color of that button. All good so far, but when my mouse hovers over, I get this blue color to remove which I have a control template in my Style. Problem is now upon button click, only text changes, no background change & no mouse over change. Following is my Button definition

<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) 为什么我的背景颜色按钮属性在我的 VM 中绑定了道具

IsMouseOver Setter 背景选择红色只是为了测试鼠标悬停的效果。

Answer 1

明确设置背景（与您的绑定一样）比触发器中的 Setter 具有更高的 value precedence。因此触发器被忽略。

您应该将 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>

在 WPF 中使用控件模板后按钮的背景颜色不显示

Background color of button not showing up after using control template in WPF

wpf

button

mvvm

controltemplate