Radio Button

Ribbon for WPF Forum

Posted 12 years ago by Bruce Van Buren
Version: 1.0.0330
Avatar
Hy,
I am trying to use the radio buttion like this, but no luck. They all remain uncheckd after clicking? Your Bug or my ignorance?


<nnRibbon:StackPanel SmallVariantGroupSize="Large" SmallNoLabelVariantGroupSize="Medium">
<nnRibbon:RadioButton Label="Small" KeyTipAccessText="W" />
<nnRibbon:RadioButton Label="Large" KeyTipAccessText="X" />
<nnRibbon:RadioButton Label="Go" KeyTipAccessText="C" />
</nnRibbon:StackPanel>

Thanks!

Comments (6)

Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bruce,

Right now controls like RadioButton are command-driven. Check out the documentation's "Command Model" topic and in that, the "Checkable Controls" section. That shows how you create commands for those options. Then in each command's CanExecute you update the value.

A good example of this sort of mechanism are the text alignment options in the sample project. Namely this code is in the RichTextBoxExtended class.

So on your end you track a variable that says whether each option is checked (or in your case you may have an enum value that says which of those is checked). The in CanExecute for each command you tell Ribbon how to update the radio buttons appropriately.

The benefit of using the command "pull" model is that once we add ribbon customization in, you have the chance of your radio button showing up in multiple locations (in ribbon and in QAT, etc.). By using a pull model, ALL the control values are updated and not just the one you click. This keeps all the controls that are logically the same (Small, Large, Go) showing the same values.

I hope this makes sense and please post back if you need further help.


Actipro Software Support

Posted 12 years ago by Bruce Van Buren
Avatar
I saw that in your examples but radio buttons are generally associated with a group that all become "unchecked" except the one being checked. For example if theme color change in your example is changed to radiobuttons. The check should follow the selection but the the ICheckableCommandParameter is replace by the string command parameter. If the CommandParameter is removed then and the ICheckableCommandParameter set then all the radio button become checked.

I guess you could spin through all the radioControls and set what is should or shouldn't but I would think that would be in the base infrastructure as with standard WPF radiobuttons.




<ribbon:StackPanel SmallNoLabelVariantGroupSize="Large">
<ribbon:RadioButton Label="Tan" ImageSourceSmall="/Images/ThemeTan16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="Tan" />
<ribbon:RadioButton Label="Steel Blue" ImageSourceSmall="/Images/ThemeSteelBlue16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="SteelBlue" />
<ribbon:RadioButton Label="Green" ImageSourceSmall="/Images/ThemeGreen16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="Green" />
</ribbon:StackPanel>
<ribbon:StackPanel SmallNoLabelVariantGroupSize="Large">
<ribbon:RadioButton Label="Dark Red" ImageSourceSmall="/Images/ThemeDarkRed16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="DarkRed" />
<ribbon:RadioButton Label="Purple" ImageSourceSmall="/Images/ThemePurple16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="Purple" />
<ribbon:RadioButton Label="Goldenrod" ImageSourceSmall="/Images/ThemeGoldenrod16.png" Command="sample:ApplicationCommands.ThemeCustom" CommandParameter="Goldenrod" />
</ribbon:StackPanel>
Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bruce,

We need to get an example of this in the documentation however it will work if you do something like this:

1) Change the command parameter to be a CheckableCommandParameter with a Tag of the color value:

<ribbon:RadioButton Label="Tan" ImageSourceSmall="/Images/ThemeTan16.png" Command="sample:ApplicationCommands.ThemeCustom">
    <ribbon:RadioButton.CommandParameter>
        <ribbon:CheckableCommandParameter Tag="Tan" />
    </ribbon:RadioButton.CommandParameter>
</ribbon:RadioButton>
2) In the CanExecute for the command, based on which theme is selected and what value is in the Tag of the CheckableCommandParameter, you tell that particular item whether it is checked or not similar to the other examples.

3) Update the Execute for the command to look at the Tag of the parameter instead of the parameter itself (before it was a string instead of CheckableCommandParameter).

I just tried it out with a column of 3 radio buttons, using the custom theme selection as the test.

Here is the XAML code:

<ribbon:StackPanel SmallNoLabelVariantGroupSize="Large">
    <ribbon:RadioButton Label="Tan" ImageSourceSmall="/Images/ThemeTan16.png" Command="sample:ApplicationCommands.ThemeCustom">
        <ribbon:RadioButton.CommandParameter>
            <ribbon:CheckableCommandParameter Tag="Tan" />
        </ribbon:RadioButton.CommandParameter>
    </ribbon:RadioButton>
    <ribbon:RadioButton Label="Steel Blue" ImageSourceSmall="/Images/ThemeSteelBlue16.png" Command="sample:ApplicationCommands.ThemeCustom">
        <ribbon:RadioButton.CommandParameter>
            <ribbon:CheckableCommandParameter Tag="SteelBlue" />
        </ribbon:RadioButton.CommandParameter>
    </ribbon:RadioButton>
    <ribbon:RadioButton Label="Green" ImageSourceSmall="/Images/ThemeGreen16.png" Command="sample:ApplicationCommands.ThemeCustom">
        <ribbon:RadioButton.CommandParameter>
            <ribbon:CheckableCommandParameter Tag="Green" />                                
        </ribbon:RadioButton.CommandParameter>
    </ribbon:RadioButton>
</ribbon:StackPanel>
Here is the CanExecuteMethod:
private void themeChangeCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {
    e.Handled = true;
    e.CanExecute = true;
    ICheckableCommandParameter parameter = e.Parameter as ICheckableCommandParameter;
    if (parameter != null) {
        parameter.Handled = true;
        parameter.IsChecked = (RibbonColorScheme.Default.Key == (parameter.Tag + "ColorScheme"));
    }
}
After adding that, the proper radio button is checked when the theme is active and everything is handled via the command model.

Hope that helps and of course, we're always open to any other suggestions.

UPDATE: We have enhanced the sample for the next maintenance release so that all the 9 theme buttons will use this sort of code to display which one of them is currently active. It will show the active theme's button as checked, which is the same concept as radio buttons. To do radio buttons you would just swap out the Button controls for RadioButtons instead.

[Modified at 05/21/2007 01:56 PM]


Actipro Software Support

Posted 9 years ago by Bjørnar Sundsbø - Norway
Avatar
I tried the sample provided in this post. The only difference is that my radiobutton is inside of a DataTemplate. Since the CheckableCommandParameter is defined there, it is marked as Frozen, and I get an InvalidOperationException when setting a property as it is frozen.

Is there a way to mark it as "do not freeze", or is this the situation I should be glad this is an interface and make my own implementation?

I really can't see any reason for the default CheckableCommandParameter deriving from Freezable, as this is a kind of object one would most likely always want to modify.

[Modified at 04/18/2011 11:17 AM]


Bjørnar Sundsbø

Posted 9 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Bjørnar,

That is correct, a DataTemplate will make everything static. We had numerous customers in the past request to be able to data-bind on CheckableCommandParameter (see this thread), which is why it now inherits Freezable.

You could probably work around this by making an attached behavior to create a new instance of the command parameter for each control instance. You could do this by making an attached property you set in your DataTemplate. In the property value changed handler of your attached dependency property, you would set the command parameter property to a new CheckableCommandParameter instance.


Actipro Software Support

Posted 9 years ago by Bjørnar Sundsbø - Norway
Avatar
Thanks.

I read the related post, and another by Dr. WPF earlier today, where Freezable solves the issue with binding to the CommandParameter.

In my opinion, there should perhaps be two implementations; one CheckableCommandParameter and FreezableCheckableCommandParameter (some grammar issue there :). But changing the actipro implementation might be an undesirable breaking change at this point?

I will create my own implementation of ICheckableCommandParameter, as I think it is the cleanest solution. It is also easier to maintain as we already have quite a bit of attached behavior.


Bjørnar Sundsbø

The latest build of this product (v2019.1 build 0683) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.