WPF ToggleButton not changing colour when checked

Question

I am trying to make a style for ToggleBox so that it changes colour when clicked, I have successfully given it a dropdown shadow on mouse over but for some reason when I click it instead of going into the checked state it stays stuck on the mouse over state.

It's XAML is:

        <!--Primary toggle button style-->
    <Style x:Key="PrimaryRoundedToggleButton" TargetType="ToggleButton">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="180"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Background" Value="#E08827"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border CornerRadius="4" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border CornerRadius="4" Background="{TemplateBinding Background}">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="4" ShadowDepth="3" Direction="300" Opacity="0.5"/>
                                </Border.Effect>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border CornerRadius="4" Background="#58585a">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

And the event handler is:

        private void primaryToggleButton_Checked(object sender, RoutedEventArgs e)
    {
        primaryToggleButton.Content = "Restarting...";

        serviceStatusChangeTimeout = Int32.Parse(ConfigurationManager.AppSettings.Get("serviceStatusChangeTimeout"));
        websiteStatusChangeTimeout = Int32.Parse(ConfigurationManager.AppSettings.Get("websiteStatusChangeTimeout"));

        MidTier.ServiceRestart(serviceStatusChangeTimeout);

        Thread.Sleep(1000);
        cacheBuilderStatus.Source = new BitmapImage(new Uri("pack://application:,,,/WpfCustomControlLibrary1;component/Resources/checkbox-complete.png"));

        MidTier.CheckLastModified();
        MidTier.webSiteRestart();
        MidTier.applicationPoolRecycle();

        primaryToggleButton.IsChecked = false;
    }

I am also trying to have it change the text in the button as well, but I remember finding how to do that in XAML so I will try and dig that up again before I ask that question.

Thank you.

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

So your button stays in the mouse over state because there is no trigger for when the mouse is not over (<Trigger Property="IsMouseOver" Value="false"></Trigger>). With you have to have multiple triggers and on and off you may need to look into MultiDataTrigger. This isn't a need at the moment for you, but I see that it may soon be.

How can I provide multiple conditions for data trigger in WPF?

edited May 23 '17 at 12:15

Community

1
1

answered Feb 19 '16 at 18:03

xtreampb

528
6
19

Ok so the logic is that the toggle button is not going into the ischecked state because I cannot click the button and then instantly remove the mouse, so the button first goes into ischecked and then instantly back to ismouseover because the mouse is still over the button? In that case how do I make the ischecked state override the mouse over property? – Exitialis Feb 21 '16 at 10:44
I would look into either multi data triggers where all conditions must be true for the trigger to fire, or use data binding to set the values where the values are calculated in your C# source. Data binding is a powerful to use as you can do all your calculations in C# source and then just set your XAML attribute to your calculated value. – xtreampb Feb 21 '16 at 18:22

score 0 · Answer 2 · answered Feb 19 '16 at 18:11

0

You should do a trigger when the value of IsMouseOver is false.

Also I would suggest you to override the template and do what you need:

    <Setter Property="Template">
    ...
    </ControlTemplate>

And mark ControlTemplate.Triggers for your triggers.

answered Feb 19 '16 at 18:11

sumx4x

1
1

The mouse over is false makes sense. Could you please explain why you would recommend over riding the template? – Exitialis Feb 21 '16 at 10:47

WPF ToggleButton not changing colour when checked

2 Answers2