【问题标题】:WPF button not applying all properties on hoverWPF按钮未在悬停时应用所有属性
【发布时间】:2021-04-04 20:04:11
【问题描述】:

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

我在 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# wpf button colors border


    【解决方案1】:

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

    这是最终代码:

    <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>
    

    但是,我很好奇是否有人可以解释这个版本的工作原理,而不是我在问题中发布的解释(我喜欢工作正常,但我更喜欢当我理解原因时)。

    谢谢!

    【讨论】:

    • 您可以检查按钮的默认模板,该模板也有一个边框,以及与边框相关的属性一个 TemplateBound 到该边框。您正在重新定义按钮的整个模板,因此它不知道如何处理您的第一个方法中的 BorderThickness 和 BorderBrush 属性。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多