Download Silverlight Windows Phone Toolkit

 Step 1: Create a silverlight for Windows Phone project.

Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll

Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step 4: Place below code of ExpanderView along with a textblock and two buttons inside ContentPanel of MainPage.xaml. ExpanderView contains ExpanderView.Items to hold the list of items to be displayed on expansion of ExpanderView and ExpanderView.Expander to show the header of ExpanderView.

The toggleExpander button will be used to change the state of ExpanderView and freezeExpander will freeze the ExpanderView.

<toolkit:ExpanderView Header="Expander Header" x:Name="expander" Expanded="expander_Expanded" Collapsed="expander_Collapsed" >
   <toolkit:ExpanderView.Items>
      <TextBlock FontSize="20" Text="Expanded Item 1" Foreground="Blue"/>
      <TextBlock FontSize="20" Text="Expanded Item 2" Foreground="Red"/>
   </toolkit:ExpanderView.Items>

   <toolkit:ExpanderView.Expander>
      <TextBlock x:Name="txtExpander" Text="Touch To Expand" Style="{StaticResource PhoneTextNormalStyle}"/>   
   </toolkit:ExpanderView.Expander>
</toolkit:ExpanderView>

   <TextBlock x:Name="txtExpanderState" Margin="30,220,0,0" Text="Collapsed" Style="{StaticResource PhoneTextNormalStyle}"/>
   <Button x:Name="toggleExpander" Margin="20,00,0,0" Height="80" Click="toggleExpander_Click" Content="Toggle Expander" />
   <Button x:Name="freezeExpander" Margin="20,150,0,0" Height="80" Click="freezeExpander_Click" Content="Freeze Expander" />

Step 5: ExpanderView has Expanded and Collapsed event which triggers when the state of ExpanderView is changed.

Add expander_Expanded and expander_Collapsed event in the codebehind of MainPage.xaml.

private void expander_Expanded(object sender, System.Windows.RoutedEventArgs e)
{
   txtExpanderState.Text = "Expanded";
}

private void expander_Collapsed(object sender, System.Windows.RoutedEventArgs e)
{
   txtExpanderState.Text = "Collapsed";
}

Step 6: toggleExpander_Click event will change the state of ExpanderView from collapsed to expanded and from expanded to collapsed.

ExpanderView has IsNonExpandable property which makes the ExpanderView non expandable. If IsNonExpandable is set to true and we try to set the expander mode of ExpanderView InvalidOperationException will be thrown.

private void toggleExpander_Click(object sender, RoutedEventArgs e)
{
   if (!expander.IsNonExpandable)
   {
      if (expander.IsExpanded)
      {
         expander.IsExpanded = false;
      }
      else
      {
         expander.IsExpanded = true;
      }
   }
   else
   {
      txtExpanderState.Text = "Expander is not toggable in non expanded mode.";
   }
}

Step 7: freezeExpander_Click event will freeze the ExpanderView. It means ExpanderView can't be expanded. When we set ExpanderView as non expandable we need to set corresponding NonExpandableHeader property of ExpanderView to set the header of ExpanderView.

private void freezeExpander_Click(object sender, System.Windows.RoutedEventArgs e)
{
   if (!expander.IsExpanded)
   {
      expander.IsNonExpandable = true;
      expander.NonExpandableHeader = "Non Expandable Header";
   }
   else
   {
      txtExpanderState.Text = "Expander can not be freezed in expanded mode.";
   }
}

Now run the application, you will see ExpanderView like shown below.

Now click on Toggle Expander button to collapse ExpanderView and click of toggle expander button again will expand the ExpanderView back.

Now click on Freeze Header button to freeze the ExpanderView and make it non expandable.

This ends the article of ExpanderView in Windows Phone 7.