在 WPF 中单击鼠标左键时为边框设置 BorderBrush 属性颜色

Question

首先，抱歉我是 WPF 新手...

我有一个带有边框的按钮。现在，鼠标悬停在按钮上时底部边框颜色变为橙色，但现在我需要在鼠标单击（鼠标左键）时将底部边框颜色更改为绿色但没有成功。

下面的代码：

<Button  Height="64" Width="64" Margin="10" Click="BtnDelete" Content="Delete">
    <Button.Template>
        <ControlTemplate>
            <Border x:Name="BtnDeleteBorder" BorderBrush="Transparent" BorderThickness="0 0 0 3">
                <StackPanel>
                    <Image Height="36" Width="36" Stretch="UniformToFill" Source="Resources/Trash.png"/>
                    <Label  HorizontalAlignment="Center">Delete</Label>
                </StackPanel>
            </Border>

            <ControlTemplate.Resources>

                <Storyboard x:Key="toggleBorderColor">
                    <ColorAnimationUsingKeyFrames  Storyboard.TargetName="BtnDeleteBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                        <SplineColorKeyFrame  Value="Green"/>
                    </ColorAnimationUsingKeyFrames>                                        
                </Storyboard>

          </ControlTemplate.Resources>

          <ControlTemplate.Triggers>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="BtnDeleteBorder" Property="BorderBrush" Value="Orange" />
                </Trigger>

                <EventTrigger RoutedEvent="MouseLeftButtonDown">
                    <BeginStoryboard Storyboard="{StaticResource toggleBorderColor}"/>                                        
                </EventTrigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

要在鼠标悬停在按钮上时更改颜色，我使用了一个典型的触发器，但是由于在鼠标左键按下时没有这样的触发器属性我在这种情况下使用了事件触发器。无论如何，当我左键单击按钮时，底部边框没有将颜色更改为绿色。

Answer 1

将触发器移至 Style

<Style x:Key="UnderlinedButton"
       TargetType="{x:Type Button}">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0 0 0 3"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Orange" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="Green" />
        </Trigger>
    </Style.Triggers>
</Style>

并将此样式应用于您的按钮

<Button Height="64"
        Width="64"
        Margin="10"
        Click="BtnDelete"
        Content="Delete"
        Style="{StaticResource UnderlinedButton}">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <StackPanel>
                    <Image Height="36"
                           Width="36"
                           Stretch="UniformToFill"
                           Source="Resources/Trash.png"/>
                    <Label HorizontalAlignment="Center"
                           Content="{TemplateBinding Content}"/>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

对 BorderBrush、BorderThickness 和 Content 使用 TemplateBinding。

在 WPF 中单击鼠标左键时为边框设置 BorderBrush 属性颜色

Set BorderBrush property color for border on left button mouse click in WPF

wpf

xaml

button

eventtrigger

routed-events

在 WPF 中单击鼠标左键时为边框设置 BorderBrush 属性 颜色

Set BorderBrush property color for border on left button mouse click in WPF

wpf

xaml

button

eventtrigger

routed-events

在 WPF 中单击鼠标左键时为边框设置 BorderBrush 属性颜色