时间戳

首页 > 解决方案 > 按钮在单击/按下时更改背景颜色

c# - 按钮在单击/按下时更改背景颜色

问题描述

我有一个我认为很容易解决的问题，但是对于我的生活，我无法使用 WPF（来自 WinForms 背景）得到我想要的东西。

我要做的就是创建一个按钮，在按下/单击按钮时背景颜色会发生变化。一旦释放按钮，它就会恢复正常。基于此，我试图在鼠标悬停上也没有发生任何事情。

我设法创建了一个模板来删除鼠标悬停效果，但似乎可以弄清楚如何在单击/按下然后重置时更改背景颜色。

我一直在从另一个 Stack Over flow 帖子中处理这个模板，它给了我一个很好的按钮被按下的过渡。

我很高兴失去效果，但以此为基础试图了解如何将它们拼凑在一起。

 <Style x:Key="InformButton" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="FontFamily" Value="Tahoma"/>
        <Setter Property="FontSize" Value="10px"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}" />
        <Setter Property="Background" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <GradientStop Color="#FFFFD190" Offset="0.2"/>
                    <GradientStop Color="Orange" Offset="0.85"/>
                    <GradientStop Color="#FFFFD190" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" 
                    BorderThickness="1"
                    Padding="4,2" 
                    BorderBrush="DarkGray" 
                    CornerRadius="3" 
                    Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter HorizontalAlignment="Center" 
                                   VerticalAlignment="Center" x:Name="contentShadow"
                        Style="{StaticResource ShadowStyle}" >
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform X="1.0" Y="1.0" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                            <ContentPresenter HorizontalAlignment="Center" 
                                VerticalAlignment="Center" x:Name="content" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                           <Setter TargetName="content" Property="RenderTransform" >
                                <Setter.Value>
                                    <TranslateTransform Y="2.0" />
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Foreground" Value="#007DB8" />
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="border" Property="Opacity" Value="0.7" />
                            <Setter Property="Foreground" Value="Gray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

标签： c#wpfbutton

解决方案

答案其实很简单——你已经有了一个“Is Pressed”触发器——你只需要在那里添加一个背景设置器，例如：

<Setter Property="Background" Value="Red"/>

为了便于理解，我们可以看到您的模板的简化版本：

<Style x:Key="InformButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="LightBlue">
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderThickness="1" Padding="4,2"
                        BorderBrush="DarkGray"  CornerRadius="3" 
                        Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter HorizontalAlignment="Center" 
                             VerticalAlignment="Center" x:Name="content" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在这里，您可以看到我们只有一个基本背景（浅蓝色）、一个内容呈现器和一个触发器，如果​​按下按钮，就会将颜色变为红色。

就个人而言，我认为这个最小的模板看起来也更好，因为它会匹配全局字体设置和样式。

推荐阅读