单击/按下按钮更改背景颜色

时间:2018-11-12 06:11:07

标签: c# wpf button

我有一个我认为很容易解决的问题,但是对于我一生,我无法完全使用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>

1 个答案:

答案 0 :(得分:0)

答案实际上非常简单-您已经有一个“被按下”触发器-您只需要在其中添加背景设置器即可,例如:

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

在这里您可以看到我们所拥有的只是一个基本背景(浅蓝色),一个内容呈现器以及一个触发器,如果​​按下该按钮,它将把颜色更改为红色。

我个人认为,这个最小的模板看起来也更好,因为它可以匹配全局字体设置和样式。