Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Displaying controls based on radio button selected

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?

like image 613
DenaliHardtail Avatar asked Jun 25 '09 16:06

DenaliHardtail


People also ask

How do you show and hide input fields based on radio button selection?

To show or hide an element when a radio button is selected: Add a click event handler to all input elements of type radio . Each time a radio button is selected, check if it is the button that should show the element. If it is, set the display property of the hidden element to block .

How do you display a TextBox when a radio button is selected?

When the RadioButton is clicked, the ShowHideDiv JavaScript function is executed. Inside this function, based on whether Yes RadioButton is checked (selected) or unchecked (unselected), the HTML DIV with TextBox is shown or hidden.

How can I check if a radio button is selected?

Using Input Radio checked property: The Input Radio checked property is used to return the checked status of an Input Radio Button. Use document. getElementById('id'). checked method to check whether the element with selected id is check or not.


2 Answers

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
}
like image 152
Thomas Levesque Avatar answered Sep 22 '22 01:09

Thomas Levesque


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"/>
like image 31
Ayal.Z. Avatar answered Sep 20 '22 01:09

Ayal.Z.