Silverlight multiple views

Question

Hello,

Sorry for dummie question, I'm quite new in silverlight.

I want to dinamically change the layout in my app: for example, I've got two radiobuttons: male and female, and I want to show additional controls depending on the gender selected. For example, if user checks male option, combobox1 should be shown, and if user checks another radiobutton, another combobox should be shown in the same place. I can do it with using stackpanel and visible property or with canvas and z property, but I want to know what the best decision is.

And one more question: can one sswitch through radiobuttons, or should use else if statements?

Thank you advance.

Answer 1

first of all set GroupName property of the each radio button. Using ChangePropertyAction change visibility of each combobox. e.g.

Visible Visible

Answer 2

You could do it without code behind. You could add two states to your control: male and female. Then you define your two states:

Male state: maleCombobox = Visible, femaleCombobox = Collapsed Female state: : maleCombobox = Visible, femaleCombobox = Collapsed

Here is the sample xaml (just a quick sample ;) ):

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"  x:Class="SilverlightApplication1.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

 <Grid x:Name="LayoutRoot" Background="White">
  <VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="MaleFemaleState">
    <VisualState x:Name="FemaleState">
     <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FemaleCB">
       <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
         <Visibility>Visible</Visibility>
        </DiscreteObjectKeyFrame.Value>
       </DiscreteObjectKeyFrame>
      </ObjectAnimationUsingKeyFrames>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="MaleState">
     <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MaleCB">
       <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
         <Visibility>Visible</Visibility>
        </DiscreteObjectKeyFrame.Value>
       </DiscreteObjectKeyFrame>
      </ObjectAnimationUsingKeyFrames>
     </Storyboard>
    </VisualState>
   </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>

  <i:Interaction.Triggers>
   <ei:PropertyChangedTrigger Binding="{Binding IsChecked, ElementName=MaleRB}">
    <ei:GoToStateAction StateName="MaleState"/>
   </ei:PropertyChangedTrigger>
   <ei:PropertyChangedTrigger Binding="{Binding IsChecked, ElementName=FemaleRB}">
    <ei:GoToStateAction StateName="FemaleState"/>
   </ei:PropertyChangedTrigger>
  </i:Interaction.Triggers>

  <StackPanel>
   <RadioButton GroupName="1" x:Name="MaleRB" Content="Male"/>
   <RadioButton GroupName="1" x:Name="FemaleRB" Content="Female"/>

  </StackPanel>

  <Grid Margin="40">
   <ComboBox x:Name="MaleCB" Visibility="Collapsed">
    <ComboBoxItem Content="Male"/>
   </ComboBox>
   <ComboBox x:Name="FemaleCB" Visibility="Collapsed">
    <ComboBoxItem Content="female"/>
   </ComboBox>
  </Grid>

 </Grid>
</UserControl>

Unfortunately for the triggers you need the blend libs. If you don't have blend, you can download a trial or you can define your states and use the VisualStateManager.GoToState in your code behind (http://msdn.microsoft.com/de-de/library/system.windows.visualstatemanager.gotostate(VS.95).aspx). You would listen on the checked event of each radio button and would go to the needed state.

Hope this helps, if you need further explanation just write a comment.

TJ