How to strech items in itemcontrol

Question

so I am trying to have some items in an itemscontrol to stretch horizontally and when you take a look at the following code, you might notice I am pretty desperate. I simplified my code and added some colors to better see what control starts and ends where...is there any possibility to tell the items to equally stretch and fill the whole horizontal space?

<Grid Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
<ItemsControl x:Name="HorizontalListBox" Background="Blue"
    HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
    <ItemsControl.Items>
        <System:Int32>4</System:Int32>
        <System:Int32>4</System:Int32>
        <System:Int32>4</System:Int32>
        <System:Int32>4</System:Int32>
        <System:Int32>4</System:Int32>
    </ItemsControl.Items>
    <ItemsControl.Template>
        <ControlTemplate>
            <ItemsPresenter HorizontalAlignment="Stretch"/>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Background="Green"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <TextBlock Text="Test" HorizontalAlignment="Stretch"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

Looks like this: this http://image-upload.de/image/0TgZx9/0dd27b5326.png

I was however hoping for a possibility to have the green items stretch all over the place.

Edit: Thanks to the blogpost found in the answer below it worked with a few adjustments:

protected override Size MeasureOverride(Size availableSize)
{
  var size = new Size();
  SetSide(ref size, GetSide(availableSize));
  foreach (UIElement child in Children)
  {
    child.Measure(availableSize);
    SetOtherSide(ref size, Math.Max(GetOtherSide(size), GetOtherSide(child.DesiredSize)));
  }
  _measureSize = size;
  return size;
}

protected override Size ArrangeOverride(Size finalSize)
{
  double offset = 0;
  foreach (UIElement child in Children)
  {
    double side = GetSide(_measureSize) / Children.Count;
    var final = new Size();
    SetSide(ref final, side);
    SetOtherSide(ref final, GetOtherSide(finalSize));
    child.Arrange(new Rect(GetOffsetPoint(offset), final));
    offset += side;
  }
  return finalSize;
}

Answer 1

Sounds like you need a StretchPanel. Silverlight does not have such a panel, but you can write your own. I found one via google StretchPanel blog, just had a quick look at the code and it looks ok to me.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <StretchPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Answer 2

I think it is your use of StackPanel that is causing the lack of stretch. If you replace the panel template with a different kind of control it will obey the HorizontalAlignment="Stretch" request.