#904 – Placing RadioButtons in a TabControl

If you like, you can place a group of RadioButton controls on each tab of a TabControl.  Because each tab of the TabControl can contain only a single element, you need to place the individual RadioButtons within a container (e.g. a StackPanel) which is then placed within the TabItem.

Because RadioButton selection is automatically managed, for all RadioButtons within the same container, this scheme ensures that only one RadioButton on each tab can be selected.

Below is an example.

    <TabControl Margin="10">
        <TabItem Header="Breakfast">
            <StackPanel>
                <RadioButton Content="Eggs"/>
                <RadioButton Content="Cereal"/>
                <RadioButton Content="Spam"/>
            </StackPanel>
        </TabItem>
        <TabItem Header="Lunch">
            <StackPanel>
                <RadioButton Content="Ham Sandwich"/>
                <RadioButton Content="Soup"/>
                <RadioButton Content="Wimpy Burger"/>
            </StackPanel>
        </TabItem>
        <TabItem Header="Dinner">
            <StackPanel>
                <RadioButton Content="Steak"/>
                <RadioButton Content="Fish"/>
                <RadioButton Content="Haggis"/>
            </StackPanel>
        </TabItem>
    </TabControl>

904-001

Advertisement

#857 – Manually Grouping RadioButtons

RadioButtons are normally automatically grouped, based on panel control in which they are located in.  All RadioButtons within a particular panel are considered part of the same group–which means that exactly one RadioButton at a time can be selected.

You can, however, manually control which RadioButtons are considered to be part of a group, regardless of the parent panel in which they are located.  You specify membership in a group using the GroupName property.  GroupName can be set to any string value.  RadioButton instances having the same value for GroupName are considered part of the same group.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <RadioButton Content="Extrovert"
                     GroupName="EI"/>
        <RadioButton Grid.Row="1" Content="Introvert"
                     GroupName="EI"/>

        <RadioButton Grid.Column="1" Content="Sensing"
                     GroupName="SN"/>
        <RadioButton Grid.Row="1" Grid.Column="1" Content="Intuition"
                     GroupName="SN"/>

        <RadioButton Grid.Column="2" Content="Thinking"
                     GroupName="TF"/>
        <RadioButton Grid.Row="1" Grid.Column="2" Content="Feeling"
                     GroupName="TF"/>
    </Grid>

857-001

#856 – Placing RadioButtons in a GroupBox

When including a group of RadioButton controls in your application, it’s common to put them in a GroupBox.  This makes the grouping visible to a customer.

A related group of RadioButtons are normally placed in a panel control, to allow the grouping logic to work correctly.  (Only one RadioButton at a time is selected within the group).  Because a GroupBox is a ContentControl, rather than a Panel, you’ll want to place a panel within the GroupBox and then place the related RadioButtons within the panel.

        <GroupBox Header="Gender">
            <StackPanel Margin="10">
                <RadioButton Content="Male"/>
                <RadioButton Content="Female"/>
            </StackPanel>
        </GroupBox>

        <GroupBox Header="Height">
            <StackPanel Margin="10">
                <RadioButton Content="Tall"/>
                <RadioButton Content="Short"/>
            </StackPanel>
        </GroupBox>

856-001

#855 – RadioButtons Are Grouped Based on their Container

The RadioButton control acts as an exclusive selection, allowing you to pick one item at a time from a group of choices.  Only one RadioButton within the group can be selected at any given time and selecting one of the RadioButtons clears whichever button was previously selected.

You can have more than one group of RadioButtons within your application.  By default, the container that the RadioButtons belong to dictate the grouping, such that only one RadioButton within the parent container can be selected at a time.  This means that you can create a second group of RadioButtons by placing them in a second container.

        <StackPanel Margin="10">
            <RadioButton Content="Male"/>
            <RadioButton Content="Female"/>
        </StackPanel>

        <StackPanel Margin="10">
            <RadioButton Content="Tall"/>
            <RadioButton Content="Short"/>
        </StackPanel>

855-001

#358 – Binding a RadioButton to an Enumerated Type

You can bind RadioButton controls to an enum by using a value converter.

The XAML:

    <Window.Resources>
        <loc:EnumToBooleanConverter x:Key="enumToBooleanConverter" />
    </Window.Resources>

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <Label Content="Favorite animated character?"/>
        <RadioButton IsChecked="{Binding Path=FavCharacter, Converter={StaticResource enumToBooleanConverter}, ConverterParameter={x:Static loc:CartoonCharacters.Gumby}}"
                     Content="Gumby"/>
        <RadioButton IsChecked="{Binding Path=FavCharacter, Converter={StaticResource enumToBooleanConverter}, ConverterParameter={x:Static loc:CartoonCharacters.PinkPanther}}"
                     Content="Pink Panther"/>
        <RadioButton IsChecked="{Binding Path=FavCharacter, Converter={StaticResource enumToBooleanConverter}, ConverterParameter={x:Static loc:CartoonCharacters.Magoo}}"
                     Content="Mr. Magoo"/>
    </StackPanel>

The enumeration:

    public enum CartoonCharacters
    {
        Gumby,
        PinkPanther,
        Magoo
    }

The enum-based property you’re binding to:

        public CartoonCharacters FavCharacter { get; set; }

And the value converter referenced by the XAML:

    public class EnumToBooleanConverter : IValueConverter
    {
        // Convert enum [value] to boolean, true if matches [param]
        public object Convert(object value, Type targetType, object param, CultureInfo culture)
        {
            return value.Equals(param);
        }

        // Convert boolean to enum, returning [param] if true
        public object ConvertBack(object value, Type targetType, object param, CultureInfo culture)
        {
            return (bool)value ? param : Binding.DoNothing;
        }
    }

#357 – RadioButton is a ContentControl

Because the RadioButton control is a ContentControl, it can contain a single child element that can be any .NET object.  When you specify a value for the Content property in XAML, you specify a text string that is used as the radio button’s label.  But you can also set the content to some other control.

In the example below, we set each RadioButton‘s content to a StackPanel containing an Image and a Label.  The user can still select just one item at a time from the group.

        <StackPanel HorizontalAlignment="Center" Margin="15">
            <Label Content="Who is your favorite animated character?"/>
            <RadioButton>
                <StackPanel>
                    <Image Source="001-Bugs.jpg" Stretch="None"/>
                    <Label Content="Bugs Bunny"/>
                </StackPanel>
            </RadioButton>
            <RadioButton>
                <StackPanel>
                    <Image Source="002-Underdog.jpg" Stretch="None"/>
                    <Label Content="Underdog"/>
                </StackPanel>
            </RadioButton>
            <RadioButton>
                <StackPanel>
                    <Image Source="003-Betty.jpg" Stretch="None"/>
                    <Label Content="Betty Boop"/>
                </StackPanel>
            </RadioButton>
            <RadioButton>
                <StackPanel>
                    <Image Source="004-Bart.jpg" Stretch="None"/>
                    <Label Content="Bart Simpson"/>
                </StackPanel>
            </RadioButton>
        </StackPanel>

#356 – RadioButton Basics

RadioButton controls allow a user to select one item from a number of different choices.

When the user clicks on one of the choices, it’s marked with a blue circle and the other choices are cleared.

The behavior is that only one of the RadioButton controls can be active at any given time.

The XAML for this behavior is straightforward.

    <StackPanel HorizontalAlignment="Center" Margin="15">
        <RadioButton Content="Boxers"/>
        <RadioButton Content="Briefs"/>
        <RadioButton Content="Regimental"/>
    </StackPanel>

WPF will automatically generate the behavior that enforces only one of the RadioButton controls being selected at any given time–when they are all children of a common parent control.

If we add a second StackPanel control with two more RadioButtons, we then get two separate groups of choices.