WPF Custom Button that indicates state

Question

I want to create a button that enables some options and displays if the options are enabled with two different images. When the button gets clicked the first time it goes to true and should display image_true. When it gets clicked again it should go back to false and display image_false.
My first question is: Button has latch action, so it goes back to false after being clicked. Is there a way to change this behavior?
If no, I might just use a different type of element, like checkbox.

In both cases: How do I assign different images for both states?

I know how to assign one image as explained here, but I don't really know how to go on from there to assign them to different states.

have u tried sth already? theres probably an more elegant way, but couldnt u just place 2 buttons at the same place, that enable the other and disable themselves — Raizzen, Apr 27 '18 at 05:54
As I said, I've tried the approach linked, but I don't really know how to go on from there. I guess what would work, is to use that approach and bind the image source to a path variable and switch that out every time. But that can't be the "good" solution. — Pete, Apr 27 '18 at 06:00
could this help u? the first answer has sth like states u can choose if the button is clicked https://stackoverflow.com/questions/5971300/programmatically-changing-button-icon-in-wpf — Raizzen, Apr 27 '18 at 06:07
Yes, this kinda helps. But they also just change the Button image on click. Is that going to be a problem performance wise? I just feel like there's got to be a way to create a button that pre-loads both images and just toggles states. — Pete, Apr 27 '18 at 06:22
Please use `ToggleButton` which is meant to behave like what you are describe. — user1672994, Apr 27 '18 at 06:45
Thanks! That's much better. Can I just assign two different images for to the toggle button? I saw [this](https://stackoverflow.com/questions/2473448/togglebutton-changing-image-depending-on-state) thread, where they bind different images to different states of `IsChecked`. However, since my Button is in the `columnheader` of a `datagrid`, I'm having some trouble with the databinding — Pete, Apr 27 '18 at 07:16

score 4 · Accepted Answer · answered Apr 27 '18 at 07:16

You can achieve this by using ToggleButton which contains three state (null,true,false) for IsChecked property, beside that you need to write control template and put two triggers (or three for all previous state) like the following:

    <ToggleButton Width="75" Height="75" >
    <ToggleButton.Template>
        <ControlTemplate TargetType="ToggleButton">
            <Border Name="PART_Border">
                <Image Name="PART_Image"  ></Image>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="PART_Image" Property="Source">
                        <Setter.Value>
                            <BitmapImage  UriSource="/images/first.PNG" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter TargetName="PART_Image" Property="Source">
                        <Setter.Value>
                            <BitmapImage UriSource="/images/second.PNG" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Afterwards, you need to add the images into your project and make sure that their build action (from the property) is Resources, and the final result you get is this:

Thanks for your answer! I can't seem to make it work, though. When I run it in a completely blank project, the button doesn't show up at all. It's there in the XAML editor, but as soon as I hit run, it's gone. — Pete, Apr 27 '18 at 08:05
Check the output window to see if there is any errors at runtime — Mahmoud Heretani, Apr 27 '18 at 08:12

WPF Custom Button that indicates state

1 Answers1