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>

对TemplateBinding，BorderBrush和BorderThickness使用Content。

在WPF

1 个答案: