WPF-按钮与边界,图像和触发器上按下



我正在尝试实现一个带有边框和图像的按钮:

<Button Style="StaticResource HomeButton}">
<Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
</Button>

这就是样式(HomeBorder只设置BorderBrush、BorderThickness和CornerRadius(:

<Style TargetType="{x:Type Button}" x:Key="HomeButton">
<Setter Property="Background" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Style="{StaticResource HomeBorder}" x:Name="ButtonBorder">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background"
Value="{StaticResource  HMIOrange}" />
</Trigger>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background"
Value="{StaticResource  HMIOrange}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

问题是,只有当我点击(或用鼠标悬停(边界线或图像时,它才会改变背景颜色。我尝试了很多这样的解决方案:

<Button x:Name="btnProva" Background="Transparent"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border>
<Image Source="{StaticResource icon_1}" Stretch="Uniform" Margin="10"/>
<Border.Style>
<Style TargetType="{x:Type Border}" >
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="CornerRadius" Value="20"/>
<Style.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Background" Value="Yellow"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Button>

在这种情况下,IsMouseOver可以工作,但IsPressed触发器会将颜色更改为超过边界的限制。

您需要使用Background属性绑定更新ButtonBorder:

<Border x:Name="ButtonBorder"
Background="{TemplateBinding Background}" <--- RIGHT HERE
Style="{StaticResource HomeBorder}">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Margin}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Border>

最新更新