Question

如果用户点击按钮，我想永久更改按钮的颜色。我如何在XAML中实现这一目标？我现在拥有的触发器不起作用，因为它们只是暂时的，不会覆盖默认值。

这是我的按钮模板：

<Style TargetType="{x:Type Button}" x:Key="ButtonStyleNavigation">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#FF365B74" /> 
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="FontFamily" Value="Arial" />
            <!-- <Setter Property="BorderThickness" Value="2"/>-->
            <!-- <Setter Property="BorderBrush" Value="Yellow"/>-->

            <Setter Property="FontSize" Value="15" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="10" Background="{TemplateBinding Background}">
                            <Grid>
                                <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" Value="0.3"/>
                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Yellow" />
                                <Setter Property="Background" Value="#FF658EAA"/>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="Yellow" />
                                <Setter Property="Foreground" Value="#FF658EAA" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

SOLUTION：

所以，我能够通过使用ToggleButton得到我需要的东西。我已经为每个按钮绑定了一个属性到IsChecked函数。在我的ViewModel中，我根据自己的愿望改变了检查状态。（在评论中提到）

以下是我的新ToggleButton模板：

<Style TargetType="{x:Type ToggleButton}" x:Key="ButtonStyleNavigation">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#FF365B74" />
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="FontFamily" Value="Arial" />

            <Setter Property="FontSize" Value="15" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border CornerRadius="10" Background="{TemplateBinding Background}" Height="19">
                            <Grid>
                                <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="Yellow" />
                                <Setter Property="Background" Value="#FF658EAA"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Foreground" Value="#FF365B74" />
                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="Yellow" />
                                <Setter Property="Background" Value="#FF658EAA"/>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="Yellow" />
                                <Setter Property="Foreground" Value="#FF658EAA" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 1

听起来你想要一个ToggleButton。他们有一个名为“IsChecked”的bool属性，每次单击按钮都会更改。

采用你提供的风格并改变它应该达到你想要的效果。

<Style TargetType="{x:Type ToggleButton}" x:Key="ButtonStyleNavigation">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="#FF365B74" />
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="FontFamily" Value="Arial" />

            <Setter Property="FontSize" Value="15" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border CornerRadius="10" Background="{TemplateBinding Background}">
                            <Grid>
                                <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" Value="0.3"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="Yellow" />
                                <Setter Property="Foreground" Value="#FF658EAA" />
                            </Trigger>

                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Foreground" Value="#FF658EAA" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我删除了IsMouseOver触发器，因为它与IsChecked触发器冲突。

当你永久地说你我认为这就是你的意思。如果您希望在用户再次单击按钮后按钮保持相同颜色，则必须处理点击事件并检查按钮上的点击次数。

修改

根据您的评论，如果您希望一次只启用一个按钮，请查看使用单选按钮。

PRIMEFACES 6.2是一个关于设置多个单选按钮的教程。

查看https://docs.python.org/3/library/types.html答案，了解如何将它们设置为普通按钮。

然后，您可以以类似的方式使用触发器来检查视图模型中的枚举值。

Answer 2

这是一个纯粹的xaml答案，根据要求使用ControlTemplate，回答原始问题并只更改<ControlTemplate.Triggers>部分：

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)" To="Yellow" Duration="0"/>
                <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#FF658EAA" Duration="0"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlTemplate.Triggers>

在您的原始问题中，您（可能是无意中）从鼠标悬停事件触发，在这种情况下，相应地更改RoutedEvent。

NB。你可以找到一个零持续时间的ColourAnimation的替代品，但我想我发布这个，因为它至少给你一些工作。

C＃WPF MVVM触发器永久更改按钮的背景颜色

2 个答案: