WPF DataTrigger-bound ToggleButton not allowing checking

Question

5.00/5 (1 vote)

See more:

I'm trying to accomplish having a couple of ToggleButtons act sort of like radio buttons--but with the important difference being that having neither checked is a valid case (only up to one can be checked at a time, they are mutually-exclusive).

Here is some XAML that almost works:

XML

<Window>
    <Grid>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <ToggleButton x:Name="ShowLineGridToggleButton">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, ElementName=ShowDotGridToggleButton}" Value="True">
                                    <Setter Property="IsChecked" Value="False" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                    <Image Source="../Images/ShowLineGrid.png" />
                </ToggleButton>
                <ToggleButton x:Name="ShowDotGridToggleButton">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, ElementName=ShowLineGridToggleButton}" Value="True">
                                    <Setter Property="IsChecked" Value="False" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                    <Image Source="../Images/ShowDotGrid.png" />
                </ToggleButton>
            </ToolBar>
        </ToolBarTray>
    <Grid>
</Window>

Clicking on one button will indeed uncheck the other. Unfortunately what is also happening is that the button clicked does not get checked. The background changes properly when the mouse is moved over it, but when the mouse moves away the button shows as not selected.

Commenting-out the Setters allows the clicked button to be checked. It's as if the Setter is also unchecking the clicked button.

I would rather handle this in XAML than have to resort to implementing in code via event handlers; this would keep everything defined in one place.

Ideas?

TIA!

Posted 7-Mar-14 13:34pm

AdrianKole

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shai Vashdi · Answer 1 · 2014-05-03T03:53:00

Hi,

You can just use RadioButton with ToggleButton Template:

XML

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" >
                         <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        </ToggleButton>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <RadioButton Content="One"/>
        <RadioButton Content="Two"/>
        <RadioButton Content="Three"/>
        <RadioButton Content="Four"/>
    </StackPanel>
</Window>