在wpf中单击时更改按钮的颜色

Question

通过网站搜索，我发现了如何在按下按钮时更改 WPF 中的按钮颜色。我不确定的是如何使它回到再次按下时会变回的位置。这是我的代码：

<Button Margin="917,631,480.8,144.4" Background="Transparent" x:Name="blackCounter6" >
        <Button.Resources>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Black"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="50"/>
            </Style>
        </Button.Resources>
    </Button>

UnpressedPressed

第一张图片显示按钮按下之前，第二张图片显示之后。再次按下时，我试图将其还原。它是一个位于图像后面的控件，我使用了一个按钮，因为我知道如何使它们变圆并像它一样安装在适当的位置。我也有可用于实现此目的的 C# 脚本。我假设我添加了某种功能以将其恢复到原始状态？

Answer 1

“再次按下它会变回来”？ 我认为您更喜欢复选框而不是按钮。 您可以为 Checkbox 样式添加一个触发器作为打击。

<Trigger Property="IsChecked" Value="True">
<Trigger Property="IsChecked" Value="False">

如果您需要 Storyboard.The 触发器 IsChecked=False 是不必要的。 您可以在 之后添加 。 另外， 和 通常应该成对使用。

复选框的代码。 特别是Checkbox的模板，可以从xaml视图->文档大纲->找到Checkbox控件->右键->编辑模板->编辑副本->确定。你会得到CheckBox的完整模板代码.

 <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                        <Border x:Name="checkBoxBorder" CornerRadius="10" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="markGrid">
                                <Ellipse x:Name="excontent" Margin="5" Panel.ZIndex="9" Fill="Blue" Stroke="{TemplateBinding Foreground}"/>
                                <Ellipse x:Name="content" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                       <Trigger Property="IsChecked" Value="True">
                        <Trigger.EnterActions>
                          <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Black"/>
                            </Storyboard>
                          </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                          <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"/>
                            </Storyboard>
                          </BeginStoryboard>
                        </Trigger.ExitActions>
                      </Trigger>
                    </ControlTemplate.Triggers>

Answer 2

最简单的解决方案是定义样式并使用管理各种状态的触发器。

<Button Margin="917,631,480.8,144.4" Background="Transparent" x:Name="blackCounter6" >
<Button.Resources>
   <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="{DynamicResource PrimaryApplicationColorBrush}"/> //Set your background
        <Setter Property="Foreground" Value="{DynamicResource ApplicationForegroundColorBrush}"/> //Set your default foregraound color 
        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}"/> //Set your border brush color
        <Setter Property="FontFamily" Value="{StaticResource FontNormal}"/> //Set your desired font
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/> //Set your font size
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="4" 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter RecognizesAccessKey="True" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{StaticResource ButtonPressedBackground}"/> //Set your background when the button is pressed 
                            <Setter Property="BorderBrush" Value="{StaticResource ButtonPressedBorderBrush}" /> //Set your BorderBrush when the button is pressed 
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" Value="{StaticResource ButtonMouseOverBorderBrush}" />  /Set your BorderBrush when the mouse is over
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="{StaticResource ButtonBackgroundDisabled}"/>  //Set your background when the button is disabled
                            <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrushDisabled}" /> //Set your BorderBrush when the button is disabled
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Button.Resources>