title: Silverlight ItemsControl vertical scrollbar, using a wrappanel as ControlTemplate
body: <p>I have a collection of elements, each one with a name and a subcollection of image blobs.
  I want to display an Accordion, with each item representing each of the MainElements. inside each element, I display the images in the subcollecion of said MainElement.
  The Accordion gets resized by the user, so I use a wrappanel for presenting the images. When the accordion is wide enough, the images reorder themselves fitting as many as posible in each row.
  the problem comes when the wrappanel only displays one image per row (because there's no space enough for more), the image list continues, but I can't see all the images, because they don't fit inside the control's height.
  I need a  vertical scrollbar to be displayed inside the AccordionItem so I can scroll down the image list.
  So, here's my code:</p>
  
  <pre><code>&lt;layoutToolkit:Accordion Width="Auto" Height="Auto" ItemsSource="{Binding MainElementCollection}"&gt;
      &lt;layoutToolkit:Accordion.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;TextBlock Text="{Binding MainElementName}" /&gt;
          &lt;/DataTemplate&gt;
      &lt;/layoutToolkit:Accordion.ItemTemplate&gt;
      &lt;layoutToolkit:Accordion.ContentTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;ItemsControl ItemsSource="{Binding SubElementCollection}" ScrollViewer.VerticalScrollBarVisibility="Auto" &gt;
                      &lt;ItemsControl.Template&gt;
                          &lt;ControlTemplate&gt;
                              &lt;controlsToolkit:WrapPanel /&gt;
                          &lt;/ControlTemplate&gt;
                      &lt;/ItemsControl.Template&gt;
                      &lt;ItemsControl.ItemTemplate&gt;
                          &lt;DataTemplate&gt;
                              &lt;Grid&gt;
                                  &lt;Image Margin="2" Width="150" Source="{Binding PreviewImage, Converter={StaticResource ImageConverter}}" /&gt;
                              &lt;/Grid&gt;
                          &lt;/DataTemplate&gt;
                      &lt;/ItemsControl.ItemTemplate&gt;
                  &lt;/ItemsControl&gt;
          &lt;/DataTemplate&gt;
      &lt;/layoutToolkit:Accordion.ContentTemplate&gt;
  &lt;/layoutToolkit:Accordion&gt;
  </code></pre>
  
  <p><a href="http://www.silverlightshow.net/tips/How-to-add-scrollbars-to-ItemsControl.aspx" rel="nofollow noreferrer">http://www.silverlightshow.net/tips/How-to-add-scrollbars-to-ItemsControl.aspx</a> suggests that I should surround my wrappanel with a scrollviewer, like this</p>
  
  <pre><code>                &lt;ItemsControl.Template&gt;
                      &lt;ControlTemplate&gt;
                          &lt;scrollviewer&gt;
                          &lt;controlsToolkit:WrapPanel /&gt;
                          &lt;/scrollviewer&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/ItemsControl.Template&gt;
  </code></pre>
  
  <p>But then my wrappanel gets really small and I can only see a small vertical scrollbar
  Any ideas?
  Thanks a lot.</p>
  
  <p>Edit: I figured thatthe wrappanel loses its width when used in the controltemplate</p>
  
  <p>It should be used as follows:</p>
  
  <pre><code>                               &lt;ItemsControl.ItemsPanel&gt;
                                      &lt;ItemsPanelTemplate&gt;
                                              &lt;controlsToolkit:WrapPanel ScrollViewer.VerticalScrollBarVisibility="Visible" /&gt;
                                      &lt;/ItemsPanelTemplate&gt;
                                  &lt;/ItemsControl.ItemsPanel&gt;
  </code></pre>
  
  <p>Anyway, I tried adding the ScrollViewer.VerticalScrollBarVisibility="Visible" line but I'm stuck again.</p>
  
  <p>Edited again:</p>
  
  <p>Now my wrappanel looks like this:</p>
  
  <pre><code>                    &lt;ItemsControl ItemsSource="{Binding StageVideos}"&gt;
                          &lt;ItemsControl.ItemsPanel&gt;
                              &lt;ItemsPanelTemplate&gt;
                                      &lt;controlsToolkit:WrapPanel /&gt;
                              &lt;/ItemsPanelTemplate&gt;
                          &lt;/ItemsControl.ItemsPanel&gt;
                          &lt;ItemsControl.ItemTemplate&gt;
                              &lt;DataTemplate&gt;
                                  &lt;Image Margin="2" Width="150" Cursor="Hand" MouseLeftButtonDown="videoPreview_MouseLeftButtonDown" Tag="{Binding}" Source="{Binding PreviewImage, Converter={StaticResource ImageConverter}}" /&gt;
                              &lt;/DataTemplate&gt;
                          &lt;/ItemsControl.ItemTemplate&gt;
                          &lt;ItemsControl.Template&gt;
                              &lt;ControlTemplate&gt;
                                  &lt;ScrollViewer VerticalScrollBarVisibility="Visible"&gt;
                                      &lt;ItemsPresenter /&gt;
                                  &lt;/ScrollViewer&gt;
                                  &lt;/ControlTemplate&gt;
                          &lt;/ItemsControl.Template&gt;
                      &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>I'm using a wrappanel as the items panel, and I'm using the ControlTemplate  to surround the presenter with a scrollviewer. Still, no luck :/</p>