Question

I’m creating a UserControl in WPF, which I’m calling YesNoButton.

It has a single DependencyProperty, IsChecked, and contains two ToggleButtons, with labels “Yes” and “No”. I’ve bound the IsChecked property of the the Yes ToggleButton to this IsChecked property of the parent YesNoButton. I’ve bound the IsChecked property of the No ToggleButton to the IsChecked property of the the Yes ToggleButton, through an ‘inverse boolean’ IValueConverter. Here’s my YesNoButton markup, minus some of the look and feel frill:

<UserControl ...>
    <StackPanel Orientation="Horizontal">
        <ToggleButton x:Name="YesButton" IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:YesNoButton}}, Path=IsChecked}">Yes</ToggleButton>
        <ToggleButton IsChecked="{Binding ElementName=YesButton, Path=IsChecked, Converter={StaticResource BooleanToInverseConverter}}">No</ToggleButton>
    </StackPanel>
</UserControl>

In my app, I include the YesNoButton as follows:

<local:YesNoButton IsChecked="{Binding Path=BoolPropertyOfDataContext}" />

When the window first loads, if I toggle the BoolPropertyOfDataContext by other means, the YesNoButton reacts perfectly.

But as soon as I click the Yes or No ToggleButton, although the YesNoButton visual state updates correctly, the binding to the BoolPropertyOfDataContext stops working altogether – it seems to be cancelled. I thought these ‘binding chains’ were supposed to work fine, but I’m obviously missing something here!

Any ideas?

Answer 1

I got it working by styling a CheckBox instead:

<CheckBox IsChecked="{Binding Path=BoolPropertyOfDataContext}" Style="{StaticResource YesNoButton}" />

<Style x:Key="YesNoButton" TargetType="{x:Type CheckBox}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">

                <StackPanel Orientation="Horizontal">
                    <ToggleButton x:Name="YesButton" IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}, Path=IsChecked}">Yes</ToggleButton>
                    <ToggleButton IsChecked="{Binding ElementName=YesButton, Path=IsChecked, Converter={StaticResource BooleanToInverseConverter}}">No</ToggleButton>
                </StackPanel>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>