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

时间:2018-03-30 16:31:11

标签: wpf button mvvm controltemplate

  

初学者问题。

     

我有一个按钮,其背景绑定到我的属性   视图模型。同一个按钮也有一个实现的命令   在我的ViewModel中。点击在我的VM&中切换布尔值。那   改变文本和文本那个按钮的颜色。到目前为止一切都很好,但是   当我的鼠标悬停在上面时,我得到了这种蓝色以除去我   我的Style中有一个控件模板。按钮点击后出现问题,   只有文字更改,没有背景更改&没有老鼠过度改变。以下是我的按钮定义

<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属性在我的VM中绑定道具不起作用

IsMouseOver Setter背景选择RED仅用于测试鼠标的影响。

1 个答案:

答案 0 :(得分:0)

显式设置背景(与Binding一样)比触发器中的Setter高value precedence。因此忽略了触发器。

您应该在ControlTemplate中添加一个像Border或Grid这样的元素,您可以使用TemplateBinding将背景设置为Button的背景。然后使触发器更改该元素的背景而不是按钮背景:

<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>