Question

我的按钮如下所示：

<Button ToolTip="Pending" Height="33" HorizontalAlignment="Right" Margin="0,5,379,0" Name="radButton2" VerticalAlignment="Top" Width="64" Background="#FF515151" BorderBrush="#FF515151" FontSize="14" Foreground="#FF5F5C5C" FontFamily="Mangal" Command="{Binding SetToPendingCommand}" IsEnabled="{Binding IsSetToPendingButtonEnabled}" Grid.Column="1" Grid.ColumnSpan="2">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border BorderBrush="White" BorderThickness="1.5" CornerRadius="0">
                                    <TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

如何让鼠标正常工作。我已经尝试过不使用样式并直接设置模板，但这也不起作用。

Answer 1

实现此目的的一种方法是将Triggers移至ControlTemplate，为Border提供一些名称，例如x:Name="PART_Border"，然后在Setter中可以指定TargetName="PART_Border"：

<Button ...>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderBrush="White" BorderThickness="1.5" CornerRadius="0" x:Name="PART_Border">
                            <TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Red" TargetName="PART_Border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>                
        </Style>
    </Button.Style>
</Button>

Answer 2

将触发器移动到ControlTemplate：

<ControlTemplate>
    <Border BorderThickness="1.5" CornerRadius="0">
        <TextBlock x:Name="txtBlock" Text="Pending" Foreground="White"
                   TextAlignment="Center" FontSize="13" Margin="0,4,0,0" />
     </Border>
     <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
           <Setter TargetName="txtBlock" Property="Background" Value="Red"/>
        </Trigger>
     </ControlTemplate.Triggers>
</ControlTemplate>

Answer 3

您需要做的就是将模板绑定添加到Border的背景属性：

<Border Background="{TemplateBinding Background}" BorderBrush="White" BorderThickness="1.5" CornerRadius="0">
   <TextBlock Text="Pending" Foreground="White" TextAlignment="Center" FontSize="13" Margin="0,4, 0, 0" />
</Border>

重要的部分是：

Background =“{TemplateBinding Background}”

正如问题所在，触发器正在更改模板Background属性，但该属性未在控件模板中使用。

更改按钮控制模板，现在鼠标悬停不起作用

3 个答案: