How to replace RadioButton with ToggleButton ?

[sigmarsson]

I forged this but have bugs, what is your take on ?

        <Style x:Key="MyRadioButton" TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <ToggleButton Content="{TemplateBinding Content}" IsChecked="{TemplateBinding IsChecked}" Checked="OnThemeSelect" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

                <muxc:RadioButtons Header="Select Theme:" SelectedIndex="{x:Bind ThemeIndex, Mode=OneWay}">
                    <RadioButton Content="Dark Theme" Style="{StaticResource MyRadioButton}"/>
                    <RadioButton Content="Light Theme" Style="{StaticResource MyRadioButton}"/>
                </muxc:RadioButtons>

This isn't working properly.

1. Now you can uncheck the toggle buttons.
2. The parent templated property value reflects only at start up. Later the radio button's IsChecked property not reflecting to the buttons'..

How would you solve these ?

[sigmarsson]

#4367

[sigmarsson]

This is supposed to be an error in the UWP framework as well :

MicrosoftDocs/windows-dev-docs#2268

[sigmarsson]

1. issue can be resolved with a custom control :

    internal class MyToggleButton : ToggleButton
    {
        protected override void OnToggle()
        {
            if (IsChecked.HasValue && IsChecked.Value)
            {
                return;
            }

            base.OnToggle();
        }
    }

[StephenLPeters]

RadioButtons doesn't actually require its children to be of type radio button. It only requires that they be toggle buttons (a base class of RadioButton) so you should just be able to do something like:

                <muxc:RadioButtons Header="Select Theme:" SelectedIndex="{x:Bind ThemeIndex, Mode=OneWay}">
                    <ToggleButton Content="Dark Theme"/>
                    <ToggleButton Content="Light Theme"/>
                </muxc:RadioButtons>

[StephenLPeters]

check out this issue which talked about retemplating radio buttons while using toggle buttons #3759

[sigmarsson]

@StephenLPeters, Thanks.
In the event you directly employ ToggleButtons you still gotta be dealing with the remaing circle the RadioButtons enforces to be displayed. I opted for the the Pivot control, which is per se functioning exactly this way.

[sigmarsson]

However, I still believe the TempleteBinding may have an error as it does not update the target even if Mode set to OneWay.

[sigmarsson]

I must re-open this one, since applying my static style onto a PivotItem resulting in this :

Would you have a little time to verify the TempleteBinding issue I mentioned in my first post ? 2. point.

[StephenLPeters]

Can you give some more details on what your are trying to accomplish? I'm pretty unsure based on the discussion so far. Maybe we can recommend something simpler.

[sigmarsson]

@StephenLPeters , sure, very simple. Just 2 buttons toggling mutual each other as ;

These are now 2 standalone toggle buttons. my curiosity was driving me to another solution with the radio buttons, where TempleteBinding isn't working the way I was expecting.

I expected that manipulating the ThemeIndex -> will change IsChecked -> will reflect to the ToggleButton's IsChecked property.

[StephenLPeters]

Ah, okay. So I think that RadioButtons is actually depending on code that exists in RadioButton in system xaml to enforce the mutually exclusive nature of radio button elements. So I think you are going to have trouble retemplating RadioButtons for this scenario.

I would recommend using actual check boxes with something to manage the exclusive checked state of them. You could either attach a Checked handler on them, to uncheck the other. Or you could use a TwoWay binding and a converter (that converts true to false and false to true) to tie the IsChecked property of the two toggle buttons together.

[sigmarsson]

@StephenLPeters Thanks! That is more complicated than laying out 2 standalone buttons. I did believe I could harness the RadioButton's inner mechanism on a certain degree to maximize code reuse wherever it is possible. I was wrong but learned something.