title: WrapPanel not wrapping content
body: <p>I have the following xaml code in a user control.</p>
  
  <pre><code>        &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="auto" /&gt;
                  &lt;ColumnDefinition Width="*" MinWidth="50"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="auto"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="scEmails"&gt;
                  &lt;ItemsControl Focusable="False" ItemTemplate="{StaticResource UserDataTemplate}"&gt;
                      &lt;ItemsControl.Items&gt;
                          &lt;system:String&gt;123&lt;/system:String&gt;
                          &lt;system:String&gt;123&lt;/system:String&gt;
                          &lt;system:String&gt;123&lt;/system:String&gt;
                          &lt;system:String&gt;123&lt;/system:String&gt;
                          &lt;system:String&gt;12eee3&lt;/system:String&gt;
                          &lt;system:String&gt;123eee&lt;/system:String&gt;
                          &lt;system:String&gt;123fefef&lt;/system:String&gt;
                      &lt;/ItemsControl.Items&gt;
                      &lt;ItemsControl.ItemsPanel&gt;
                          &lt;ItemsPanelTemplate&gt;
                              &lt;WrapPanel Orientation="Horizontal"/&gt;
                          &lt;/ItemsPanelTemplate&gt;
                      &lt;/ItemsControl.ItemsPanel&gt;
                  &lt;/ItemsControl&gt;
              &lt;/ScrollViewer&gt;
              &lt;TextBox Grid.Column="1" TextWrapping="NoWrap" Margin="0,0,0,0"  VerticalAlignment="Center" PreviewKeyDown="txtAuto_PreviewKeyDown" MinWidth="50" /&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>Here I have a set of items to be shown in the left of a text box. The rendering requirement is:</p>
  
  <ol>
  <li>If there are no or little items, let the items occupy as many as space they needed.</li>
  <li>If there are too many, the items should wrap to next line and expand the <code>Height</code> of the control, to ensure the text box get 50 or more pixels width, unless this is impossible (i.e. there is a single item that will use too much space)</li>
  <li>If there are too many lines (i.e. exceed the limit set by <code>MaxHeight</code> property), show the vertical scroll bar.</li>
  <li>In any cases, the text box shall be given all the space left (in the right hand side!).</li>
  </ol>
  
  <p>I use a <code>ScrollViewer</code> to fulfill #3, and use a <code>WrapPanel</code> to fulfill #2. But the code above does not give the desired result. In design mode it looks like (the item template is a <code>TextBlock</code> inside a <code>Border</code>, should'nt matter here)
  <a href="https://i.stack.imgur.com/di86e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/di86e.png" alt="design mode"></a></p>
  
  <p>It is not fulfill the requirement because it is not wrapping.</p>
  
  <p>What can I do to fix?</p>
  
  <p><strong>Update</strong></p>
  
  <p>If I apply the code in the answer by Raviraj Palvankar and removed all items, the layout in design mode is the following</p>
  
  <p><a href="https://i.stack.imgur.com/dpz46.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpz46.png" alt="enter image description here"></a></p>
  
  <p>However, the desired output (according to requirement term #4) is</p>
  
  <p><a href="https://i.stack.imgur.com/JWJVG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JWJVG.png" alt="enter image description here"></a></p>
  
  <p>Where my original code does properly (although fails other requirements)</p>