C# WPF ToggleButton Changing more than one property in a trigger?

Question

I have a togglebutton and when it is clicked I simply want to change the background and the content. The content changes correctly, but the background changes, but instead of my specified background value, it is a default (?) blue-ish. In previous struggles I could get the background to change, but not the content. That was done differently, though, w/ a datatrigger instead of the method below.

I'm using C# WPF and MVVM and could bind the content to another property and when the binded ischecked property is changed, I could change the property in the viewmodel, but I was hoping not to have to do that. Maybe it's the correct way?

Here's my code that 1/2 works:

        <ToggleButton Name="Axis3AbsIncButton"               
            IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="ToggleButton.Background" Value="Goldenrod"/>
                        <Setter Property="ToggleButton.Content"
                                Value="ABS" />
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="ToggleButton.Background"
                                        Value="Green" />
                                <Setter Property="ToggleButton.Content"
                                        Value="Inc" />
                            </Trigger>
                        </Style.Triggers>
                        </Style >
                </ToggleButton.Style>
            </ToggleButton>

This is very close, but I have lost the border of the togglebutton:

            <ToggleButton Name="Axis3AbsIncButton"
                          Grid.Row="2"
                          Grid.Column="13"
                          Grid.ColumnSpan="2"
                          Grid.RowSpan="1"
                          Focusable="True"
                          IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border CornerRadius="3" BorderThickness="1"  Background="{TemplateBinding Background}">
                            <ContentPresenter Margin="3"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked"
                                     Value="False">
                                <Setter Property="Background" 
                                        Value="Goldenrod">
                                </Setter>
                            </Trigger>                                    
                            <Trigger Property="IsChecked"
                                     Value="True">
                                <Setter Property="Background"
                                        Value="Blue" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ToggleButton.Template>
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="ToggleButton.Content"
                                Value="ABS" />
                        <Style.Triggers>
                            <Trigger Property="IsChecked"
                                     Value="True">
                                <Setter Property="ToggleButton.Content"
                                        Value="Inc" />
                            </Trigger>
                        </Style.Triggers>
                    </Style >
                </ToggleButton.Style>
            </ToggleButton>

Rafal · Accepted Answer · 2013-05-21T16:46:38.067

Your XAML code is correct. When you click ToggleButton, background color changed to green. But it's changing when you move mouse from button. When mouse coursor is over ToggleButton, it has blue color.

Edit: Try this:

<ToggleButton Name="Axis3AbsIncButton"
                  Grid.Row="2"
                  Grid.Column="13"
                  Grid.ColumnSpan="2"
                  Grid.RowSpan="1"
                  Focusable="True"
                  IsChecked="{Binding Path=UserControlOneStatic.MotionParameters.Axis3AbsorIncOption, Source={StaticResource Locator}}">
        <ToggleButton.Template>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsDefaulted" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ToggleButton.Template>
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="ToggleButton.Background" Value="Goldenrod"/>
                <Setter Property="ToggleButton.Content"
                            Value="ABS" />
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="ToggleButton.Background"
                                    Value="Green" />
                        <Setter Property="ToggleButton.Content"
                                    Value="Inc" />
                    </Trigger>
                </Style.Triggers>
            </Style >
        </ToggleButton.Style>
    </ToggleButton>

Rafal - Thank you for response. I see how the buttons turn blue when the mouse cursor is over the ToggleButton, but when I click other buttons or move focus off the togglebutton, it stays BLUE, it never turns GREEN. It is very strange?? Any other ideas? — FloppyDisk, May 19 '13 at 16:05
Yes, it's strange. Could you attach your whole solution project? — Rafal, May 19 '13 at 18:01
Almost have the solution and couldn't post the code to this comment (too long), so edited my original question. I can now get the background and content to change as desired, but I lost the default Border on the buttons!? I looked at MSDN for some default property settings for the togglebutton and that was not helpful. — FloppyDisk, May 20 '13 at 19:45
Whoa... I just got your message, looked it over briefly, but haven't tried it, can't wait!! Will be later today or tonight - Thank you!! — FloppyDisk, May 22 '13 at 18:31
I've tried it, it is the best I've come up. It doesn't have the mouse over functionality of a normal button. I did read in a book that the togglebutton was purposely left for the programmer to customize it, so that's part of the issue here. Anyway, I'm using your code, thank you very much for the effort. I may revisit when I have time later. — FloppyDisk, May 26 '13 at 16:22

C# WPF ToggleButton Changing more than one property in a trigger?

1 Answers1