WPF Stack Panel show hide children

Question

I have a stackpanel with two radio buttons. One is Option A and the other Option B. Only one is selectable at a time. When I check option B, I want to display a couple of text boxes right below Option B radiobuttion and within the stack panel. And when I select Option A again the textboxes should not be visible. How can I accompalish this by just using XAML?

Possible duplicate: http://stackoverflow.com/questions/1534208/binding-to-a-wpf-togglebuttons-ischecked-state — WildCrustacean, Dec 19 '12 at 23:30

sa_ddam213 · Answer 1 · 2012-12-20T02:41:32.433

You can bind to the RadioButton IsChecked property and use the built-in BooleanToVisibilityConverter

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
       Title="MainWindow" Height="300" Width="400" Name="UI" >
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
    </Window.Resources>

    <Grid>
        <StackPanel Margin="0,0,0,202">
            <RadioButton x:Name="OptionA" Content="OptionA" />
            <RadioButton x:Name="OptionB" Content="OptionB" />
        </StackPanel>
        <TextBox Visibility="{Binding ElementName=OptionB, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}" Text="My Textbox"  Margin="0,65,165,167"/>
    </Grid>

</Window>

This will show the TextBox only when "OptionB" is checked.

score 2 · Accepted Answer · answered Dec 20 '12 at 04:55

Only in XAML without even the Converter. Define ControlTemplate in your resources like

 <Window.Resources>
    <ControlTemplate x:Key="RadioButtonContent">
        <Grid>
            <StackPanel Margin="0,0,0,202">
                <RadioButton x:Name="OptionA" Content="OptionA" />
                <RadioButton x:Name="OptionB" Content="OptionB" />
            </StackPanel>
            <TextBox x:Name="MyTextBox" 
                     Visibility="Visible"
                     Text="My Textbox"  Margin="0,65,165,167"/>
        </Grid>
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding ElementName=OptionB, Path=IsChecked}" Value="False">
                <Setter TargetName="MyTextBox" Property="Visibility" Value="Hidden"/>
            </DataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

and use it like

<ContentControl Template="{StaticResource RadioButtonContent}"/>

hope it helps..

score 1 · Answer 3 · answered Dec 20 '12 at 04:27

Try this code Hope will solve your proble.

Put the TextBoxes in a stack panel and set the Visibility property of stack panel is Hidden. and write the code on OptionButton event to set the Visibility property of stackPanel.

    <Grid.RowDefinitions>
        <RowDefinition Height="33*"></RowDefinition>
        <RowDefinition Height="33*"></RowDefinition>
        <RowDefinition Height="33*"></RowDefinition>
    </Grid.RowDefinitions>


    <StackPanel Margin="20" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0">
        <RadioButton Name="rdA" Content="Option A" GroupName="txtBoxGroup" Checked="rdA_Checked"></RadioButton>
        <RadioButton Name="rdB" Content="Option B" GroupName="txtBoxGroup" Checked="rdB_Checked"></RadioButton>
    </StackPanel>

    <StackPanel Margin="20" Name="TxtBxStackPanel" Height="auto"  Orientation="Vertical" Grid.Column="0" Grid.Row="1" Visibility="Hidden">
        <Label Content="My TextBox" VerticalAlignment="Center" HorizontalAlignment="Left"></Label>
        <TextBox Name="txtValue" Height="20" Width="200" HorizontalAlignment="Left"></TextBox>
    </StackPanel>

</Grid>

In code behid -

private void rdB_Checked(object sender, RoutedEventArgs e)
{

    TxtBxStackPanel.Visibility = Visibility.Visible;
}
private void rdA_Checked(object sender, RoutedEventArgs e)
{
    TxtBxStackPanel.Visibility = Visibility.Hidden;
}

Enjoy !!!!!!

Thanks

Ck Nitin (TinTin)

Two problems. First, the Visibility should probably be changed to Collapsed, not Hidden. Second, this is not XAML only, as specifically requested in the question. — Wonko the Sane, Dec 20 '12 at 13:15

score 0 · Answer 4 · answered Dec 20 '12 at 00:08

0

Just have an event that when you select Option A, both of the TextBoxes get set to:

Textbox.Visibility = Collapsed or Hidden

depending on how you wish to display them.

answered Dec 20 '12 at 00:08

JosephGarrone

4,081
3
38
61

True. I realised that a little while after posting. – JosephGarrone Dec 20 '12 at 03:22

WPF Stack Panel show hide children

4 Answers4