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替代方案，但我認為我會發布此替代方案，因為它至少為您提供了一些有用的東西。