Horizontal Orientation in Stackpanel, new line at the end of Stackpanel width

Question

Let's say that we have a Stackpanel with Horizontal Orientation and a width of 100px.

Inside it i make eleven square Canvas drawings width the size of 10px.

This means that the last square will be outside of view, because it will extend the stackpanel width 10px. So I want this square to be in a new line.

Is there a Control that can do this? The hard part is that the Stackpanel will be dynamic, so if i Resized the WPF window, the Stackpanel will be 50px, wich will result in 2 full square lines and a third line with a single square.

I hope this makes sence. How can I do this?

Thanks, Jonatan

Answer 1

Wrap panel is what you need in this case

    <WrapPanel  Width="100" Orientation="Horizontal">
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
        <Button   Width="10" Height="20"/>
    </WrapPanel>