Revealing Content with Silverlight

I have a Silverlight 4 application. This application has a page with three radio buttons on it. By default, none of these radio buttons are chosen. However, when a user chooses one of the radio buttons, I want to reveal some content by sliding the remaining buttons down. For instance:

• option 1
• option 2
• option 3

user clicks option 1

• option 1
  • my content appe开发者_开发问答ars here. Items 2 and 3 would slide down.
• option 2
• option 3

If the user clicks option 2, it would look like this:

• option 1
• option 2
  • my content appears here. Item 3 would slide down. Item 1 is collapsed.
• option 3

Does anyone know how I can do this with Silverlight? Thanks!

---

you can put all the elements as visible, then bind the Checked property of the RadioButton controls to the Visibility property of the portions you want to be able to hide/show, and use a value converter to convert the Checked (bool) to Visibility.

example:

<StackPanel>
    <RadioButton Name="r1" Content="Radio1" GroupName="group1"/>
    <Grid Visibility="{Binding Checked, ElementName=r1, Converter={StaticResource boolToVisibilityConverter}">
        <TextBlock Text="Hidden until Radio1 is checked"/>
    </Grid>
    <RadioButton Content="Radio2" GroupName="group1"/>
    <RadioButton Content="Radio2" GroupName="group1"/>
</StackPanel>

Here is a boolToVisibilityConverter:

public class boolToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if(!(value is bool))
               throw new Exception("invalid type");
            return ((bool)value)? Visibility.Visible: Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            // Most of the time you are not handling bi-directional converts, but you need
            // to implement the contract of IValueCoverter fully regardless.
            throw new NotImplementedException();
        }
    }

---

if you have Silverlight toolkit installed, you will have access to a control called Accordion. It does exactly what you are looking for. :)

the toolkit http://silverlight.codeplex.com/

the Accordion control video tutorial http://www.silverlight.net/learn/videos/all/silverlight-toolkit-accordion-control/