时间戳

首页 > 解决方案 > WPF按钮未在悬停时应用所有属性

c# - WPF按钮未在悬停时应用所有属性

问题描述

我正在为我正在开发的一些软件设计一个自定义登录窗口，并且我已经达到了可以处理这一切的美学的地步。

我在 C# 和 WPF 方面有相当多的经验，但在谈到使用 WPF 的技术性和“正确”的做事方式时，我仍然认为自己是新手。

我有以下代码用于我根据自己的喜好修改的按钮：

<Button Content="Log In" FontSize="22" FontWeight="Bold" Foreground="White" Cursor="Hand">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="#FF343434" BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <LinearGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                <RotateTransform Angle="-45" CenterY="0.5" CenterX="0.5"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </LinearGradientBrush.RelativeTransform>
                        <GradientStop Color="#FF00A3E0" Offset="0"/>
                        <GradientStop Color="#FFAB6BE3" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#FF00A3E0"/>
                    <Setter Property="BorderBrush" Value="#FF343434"/>
                    <Setter Property="BorderThickness" Value="5"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>

    <Button.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="10"/>
        </Style>
    </Button.Resources>
</Button>

如您所见，默认情况下，我所拥有的只是一种渐变色，当鼠标悬停在它上面时，它会（至少应该）变为带有边框的纯色。

我最终得到的只是背景颜色的变化，而边框没有任何变化。我不确定我是否必须写出一个完整的控制模板才能让它工作（如果可能的话，我想避免它）或者我只是盯着它太久而看不到明显的错误。

提前致谢！

标签： c#wpfbuttoncolorsborder

解决方案

长话短说，事实证明，出于某种原因，我需要在模板中命名边框对象并在模板中应用触发器，以便能够指定必须将BorderBrushandBorderThickness属性应用于所述边框。

这是最终代码：

<Button Grid.Column="1" Grid.Row="9" Content="Log In" x:Name="log_in_button">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="#FF343434" BorderThickness="1" x:Name="log_in_button_border">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF00A3E0"/>
                                <Setter Property="BorderBrush" Value="#FF343434" TargetName="log_in_button_border"/>
                                <Setter Property="BorderThickness" Value="2" TargetName="log_in_button_border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="FontSize" Value="22"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontFamily" Value="/Password Manager;component/Resources/#Lato"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <LinearGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                <RotateTransform Angle="-45" CenterY="0.5" CenterX="0.5"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </LinearGradientBrush.RelativeTransform>
                        <GradientStop Color="#FF00A3E0" Offset="0"/>
                        <GradientStop Color="#FFAB6BE3" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>

    <Button.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="10"/>
        </Style>
    </Button.Resources>
</Button>

然而，我很好奇是否有人可以解释这个版本的工作，而不是我在问题中发布的那个（我喜欢当事情工作时，但当我理解为什么时我更喜欢它）。

谢谢！

推荐阅读