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

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>

解：

因此，使用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”的布尔属性，该属性在每次单击按钮时都会更改。

按照您提供的样式进行更改，这样应该可以实现您想要的。

<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触发器冲突。

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

编辑：

根据您的评论，如果您一次只想启用一个按钮，则可以考虑使用单选按钮。

这是有关设置多个单选按钮的教程。

请查看此答案，了解如何设置它们的外观以使其类似于普通按钮。

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

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 。

注意 您也许可以找到持续时间为零的ColourAnimation替代方案，但我认为我会发布此替代方案，因为它至少为您提供了一些有用的东西。