title: Binding ObservableCollection to Grid Inside a Listbox
body: <p>Right now I have a listbox inside which a scrollviewer and a stackpanel is placed with the data binding to the observablecollection of imagelist. </p>
  
  <p>I am having a photolist class which holds the image and path of it and binding it to the listbox.</p>
  
  <pre><code>&lt;Style TargetType="{x:Type ListBox}"&gt;
    &lt;Setter Property="Foreground" Value="White" /&gt;
    &lt;Setter Property="Margin" Value="100"/&gt;
    &lt;Setter Property="Template"&gt;
      &lt;Setter.Value&gt;
        &lt;ControlTemplate TargetType="{x:Type ListBox}" &gt;
            &lt;ScrollViewer&gt;
              &lt;StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center"/&gt;
            &lt;/ScrollViewer&gt;
        &lt;/ControlTemplate&gt;
      &lt;/Setter.Value&gt;
    &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>The above code works fine showing the listbox with a scroller and stackpanel hosting the multiple images.</p>
  
  <p>Now I would like to modify the listbox to have scrollviewer and a grid instead of stackpanel, so that the images are positioned like the matrix form. </p>
  
  <p>Please provide me a code snippet to bind the photolist to the grid(inside a scrollviewer which is inside a listbox).</p>
  
  <p>Any help would be highly appreciated.</p>