title: Making a WrapPanel respect his parent's width
body: <p>Ok here's my code. Note that the StackPanel is directly in a UserControl.</p>
  
  <pre><code>&lt;UserControl&gt;
      &lt;StackPanel Orientation="Horizontal"&gt;
  
          &lt;ScrollViewer Width="450"
                        VerticalScrollBarVisibility="Auto"
                        HorizontalScrollBarVisibility="Disabled"&gt;
  
              &lt;Rectangle Width="400" Height="4000" Fill="BlanchedAlmond"/&gt;
          &lt;/ScrollViewer&gt;
  
          &lt;ScrollViewer VerticalScrollBarVisibility="Auto"
                        HorizontalScrollBarVisibility="Disabled"&gt;
  
              &lt;ItemsControl BorderBrush="Green"
                            BorderThickness="2"
                            ItemsSource="{Binding Path=MyObservableCollection}"
                            ItemTemplate="{StaticResource FatTemplate}"&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;/StackPanel&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>(<strong>Code EDITED</strong>)</p>
  
  <p>Note that the rectangle is just there because the content of that scroll viewer is irrelevant.</p>
  
  <p>The problem is that the WrapPanel just expands horizontally and doesn't wrap...</p>
  
  <p>I found a few solutions:</p>
  
  <ol>
  <li><p>Giving absolute width to the WrapPanel (but then it doesn't resize with the window).</p></li>
  <li><p>Binding width to its parent width - either ItemsControl or ScrollViewer (ScrollViewer worked better in a limited situation like this one).</p>
  
  <pre><code>Width="{Binding RelativeSource=
      {RelativeSource FindAncestor,
      AncestorType={x:Type ScrollViewer}},
      Path=ActualWidth}"
  </code></pre></li>
  </ol>
  
  <p>The problem with this technique is that if a control is beside it in a StackPanel or Grid, you need to bind it to it's parent size minus the control next to it. Then comes the hard stuff. I built a converter which applies mathematical operations on the number received so I could subtract a given width from its parent width:</p>
  
  <pre><code>Width="{Binding RelativeSource=
      {RelativeSource FindAncestor,
      AncestorType={x:Type UserControl}},
      Path=ActualWidth,
      Converter={StaticResource Convertisseur_Size_WXYZ}, 
      ConverterParameter=-260}"
  </code></pre>
  
  <p>But still, since you can't bind a value you pass to a ConverterParameter,</p>
  
  <pre><code>ConverterParameter={Binding ...} (doesn't work)
  </code></pre>
  
  <p>I want:</p>
  
  <ul>
  <li>to be able to resize my app with my WrapPanel and ScrollViewer resizing well,</li>
  <li>my UserControl to be easily maintainable,</li>
  <li>my code cleaner than these big binding expressions which rely on parent control's Type.</li>
  </ul>
  
  <p><strong>What's a better solution?</strong></p>
  
  <p>Note: If anything isn't clear, I can add detail.</p>