FloppyDisk
FloppyDisk

Reputation: 97

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

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>

Upvotes: 1

Views: 4435

Answers (1)

Rafal
Rafal

Reputation: 1091

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>

Upvotes: 1

Related Questions