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?
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 .
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.
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.
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
}
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With