Displaying controls based on radio button selected

Question

I have a group of three radio buttons. Depending on which radio button is selected, I want to disaply one of three controls - a textbox, a dropdown list, or a button. How do I display controls based on the result of a selected radio button?

Oldworld

Answer 1

You can bind the visibility of the control to the IsChecked property of the RadioButton, using the BooleanToVisibilityConverter :

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <BooleanToVisibilityConverter x:Key="convVisibility"/>
  </Page.Resources>
  <Grid>
    <StackPanel Orientation="Vertical">
      <RadioButton Name="radioButton1" GroupName="group1">Control1</RadioButton>
      <RadioButton Name="radioButton2" GroupName="group1">Control2</RadioButton>
      <RadioButton Name="radioButton3" GroupName="group1">Control3</RadioButton>
      <Grid>
        <Button Visibility="{Binding IsChecked, ElementName=radioButton1, Converter={StaticResource convVisibility}}">1. Button</Button>
        <TextBlock Visibility="{Binding IsChecked, ElementName=radioButton2, Converter={StaticResource convVisibility}}">2. TextBlock</TextBlock>
        <TextBox Visibility="{Binding IsChecked, ElementName=radioButton3, Converter={StaticResource convVisibility}}">3. TextBox</TextBox>
      </Grid>
    </StackPanel>
  </Grid>
</Page>

EDIT :

That solutions works great and it's simple to implement. Is there anyway I can prevent the controls from being hidden in design mode?

I don't know about other designers (Blend for instance), but in the Visual Studio designer the controls are never hidden...

Anyway, you could implement your own converter, which would always return Visible in design mode. For some obscure reason the BooleanToVisibilityConverter class is sealed, so you can't inherit from it. You can delegate the conversion to a BooleanToVisibilityConverter instead, if you don't want to rewrite the conversion logic :

public class MyBooleanToVisibilityConverter : IValueConverter
{
    private BooleanToVisibilityConverter _converter = new BooleanToVisibilityConverter();
    private DependencyObject _dummy = new DependencyObject();

    private bool DesignMode
    {
        get
        {
            return DesignerProperties.GetIsInDesignMode(_dummy);
        }
    }

    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (DesignMode)
            return Visibility.Visible;
        else
            return _converter.Convert(value, targetType, parameter, culture);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return _converter.ConvertBack(value, targetType, parameter, culture);
    }

    #endregion
}

Sideshow

That solutions works great and it's simple to implement. Is there anyway I can prevent the controls from being hidden in design mode? – Oldworld

Answer 2

To keep the component visible during design time you can add a FallbackValue of true to the checkbox as:

<RadioButton x:Name="cbxEmail" Content="Email Details" IsEnabled="{Binding IsEmail, FallbackValue=true}" IsChecked="{Binding IsEmail, Mode=OneWay, FallbackValue=true}"
                                Grid.Column="2"/>

Incommode