What xaml code to get this layout?

In a specific parent control of my page, I want to layout horizontally some child controls (let's say rectangles) so that each control has the same width and has a maximum width. This means that, given a large parent control:

• if there is only one child control, it won't span over the whole parent but will have its width set to the max width.
• After adding child controls, at a certain point, the sum of these max width (which the same for each child control btw) will be greater than the parent width. In this case, the total width should be divided by the number of children and each child will get this result.

Because the parent control must be bound to a collection, I began to write this:

<ItemsControl Margin="10" Height="200" ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ChildShape /&开发者_StackOverflow中文版gt;
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I quickly realized that the StackPanel is not what I want.

The final goal is to have nice animations when a child is added or removed (other children must slide and change their size smoothly.

Since I'm new to Silverlight, I can't see what panel (custom or not?) I should use or how I can achieve what I described.

You could experiment with a

 <UniformGrid Rows="1"> </UniformGrid>

To replace the StackPanel. If SilverLight has it, I'm talking from WPF.

+1 for the UniformGrid idea.

For animations when items are added or removed, take a look at this post / MIX presentation.

http://blogs.msdn.com/b/expression/archive/2010/03/16/dynamic-layout-and-transitions-in-expression-blend-4.aspx

It sounds like you could use the Wrap Panel. Jesse Liberty has a nice blog post explaining how to use it.