title: Resize elements and split layout at runtime
body: <p>I have a simple problem in WPF/C#. 
  I want to drag and drop some images into a layout and adjust their sizes according to the number of images (it can be more than 2!).</p>
  
  <p><img src="https://i.stack.imgur.com/E4GPI.png" alt="What I want"></p>
  
  <p>I have no problem with the Drag&amp;Drop system. My problem is about the resizing elements/splitting the layout. I tried several things such as using <code>ItemsControl</code> with a <code>WrapPanel</code> but it is not working. I just see the image 1 in full size. </p>
  
  <ul>
  <li>How to do what I want ? </li>
  <li>Is the <code>ItemsControl</code> with a <code>WrapPanel</code> a good way ? </li>
  <li>How can I make that the WrapPanel will resize my images automatically ?</li>
  </ul>
  
  <p>Here my XAML</p>
  
  <pre><code>&lt;ItemsControl x:Name="list" AllowDrop="True" 
      Drop="list_Drop" Background="Transparent" Grid.IsSharedSizeScope="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderBrush="{x:Null}"&gt;
      &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;
                  &lt;WrapPanel ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Center" HorizontalAlignment="Center"/&gt;
              &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
  &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>And here my code-behind</p>
  
  <pre><code>private void list_Drop(object sender, DragEventArgs e)
  {
      Thumbnail thumbnail = sender as Thumbnail;
      Image addedImg = new Image();
      addedImg.Source = (BitmapImage)e.Data.GetData(typeof(BitmapImage));
      list.Items.Add(addedImg);
      this.UpdateLayout();
  }
  </code></pre>
  
  <p>Thank you !</p>