title: Silverlight Accordion Control with Dynamic Content
body: <p>I'm using the Silverlight Toolkit's Accordion control.  I wanted to create a list of controls that I could load into the accordion and replace on the fly if needed.  So here is what I did:</p>
  
  <ol>
  <li><p>Create a class to hold the header and content of each accordian item.</p>
  
  <p>public class AccordionViewItem
  {
      public AccordionViewItem()
      {
          ItemsControlContent = new ObservableCollection();
          ItemsControlContent.Add(new StackPanel());
      }</p>
  
  <pre><code>public string Header { get; set; }
  public FrameworkElement Content 
  {
      get { return ItemsControlContent[0]; }
      set { ItemsControlContent[0] = value; }
  }
  
  public ObservableCollection&lt;FrameworkElement&gt; ItemsControlContent { get; set; }
  </code></pre>
  
  <p>}</p></li>
  </ol>
  
  <p>I've got some extra properties in here that aren't needed until I present my problem.  For now I just wanted to show the Header and ItemsControlContext properties.</p>
  
  <ol start="2">
  <li><p>Created the Accordian control.</p>
  
  <pre><code>&lt;layoutToolkit:Accordion x:Name="AccordionHost" ItemsSource="{Binding Path=Panels}" SelectionMode="One" VerticalAlignment="top" HorizontalAlignment="Center" &gt;
      &lt;layoutToolkit:Accordion.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;StackPanel&gt;
                  &lt;TextBlock Text="{Binding Header}" /&gt;
              &lt;/StackPanel&gt;
          &lt;/DataTemplate&gt;
      &lt;/layoutToolkit:Accordion.ItemTemplate&gt; 
      &lt;layoutToolkit:Accordion.ContentTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;ItemsControl ItemsSource="{Binding Path=ItemsControlContent}" /&gt;
          &lt;/DataTemplate&gt;
      &lt;/layoutToolkit:Accordion.ContentTemplate&gt;
  &lt;/layoutToolkit:Accordion&gt;
  </code></pre></li>
  </ol>
  
  <p>So if I set the datacontext and send in a list of AccordionViewItems I can get a functioning Accordion, but I really wanted to have my AccordionView Item look like:</p>
  
  <pre><code>public class AccordionViewItem
  {
      public AccordionViewItem()
      {
          Content = new StackPanel();
      }
  
      public string Header { get; set; }
      public FrameworkElement Content { get; set; }
  }
  </code></pre>
  
  <p>So I created a custom control called ItemControl:</p>
  
  <pre><code>&lt;UserControl x:Class="ECAPortal.Client.Common.Controls.ItemControl"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Height="400"
      Width="300" &gt;
      &lt;Grid x:Name="LayoutRoot" Background="White"&gt;
          &lt;ItemsControl x:Name="itemsControlLoader" /&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>Code Behind:</p>
  
  <pre><code>public partial class ItemControl : UserControl
  {
      private ObservableCollection&lt;FrameworkElement&gt; m_controls = new ObservableCollection&lt;FrameworkElement&gt;();
  
      public ItemControl()
      {
          m_controls.Add(new StackPanel());
  
          InitializeComponent();
  
          this.Loaded += new RoutedEventHandler(ItemControl_Loaded);
      }
  
      void ItemControl_Loaded(object sender, RoutedEventArgs e)
      {
          itemsControlLoader.ItemsSource = m_controls;
      }
  
      public FrameworkElement ItemSource
      {
          get { return m_controls[0]; }
          set { m_controls[0] = value; }
      }
  }
  </code></pre>
  
  <p>Then change the Accordion to use the new control:</p>
  
  <pre><code>    &lt;layoutToolkit:Accordion x:Name="AccordionHost" ItemsSource="{Binding Path=Panels}"     SelectionMode="One" Margin="0,50" Width="740" VerticalAlignment="top"     HorizontalAlignment="Center" &gt;
          &lt;layoutToolkit:Accordion.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;StackPanel&gt;
                      &lt;TextBlock Text="{Binding Header}" /&gt;
                  &lt;/StackPanel&gt;
              &lt;/DataTemplate&gt;
          &lt;/layoutToolkit:Accordion.ItemTemplate&gt; 
          &lt;layoutToolkit:Accordion.ContentTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;controls:ItemControl ItemSource="{Binding Content}" /&gt;
              &lt;/DataTemplate&gt;
          &lt;/layoutToolkit:Accordion.ContentTemplate&gt;
      &lt;/layoutToolkit:Accordion&gt;
  </code></pre>
  
  <p>But I get the following error after the ItemControl constructor is run:</p>
  
  <p>AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 1 Position: 197]</p>
  
  <p>Any idea why I'm getting this error?  Is there another way to load in a control dynamically?  I'm trying to use as little code in the code behind as I can (MVVM).  Any ideas would be great.</p>
  
  <p>Thanks,</p>
  
  <p>Jamin Roth</p>