How can I achieve this mix of StackPanel and UniformGrid behavior?

Question

I want to put elements inside a control so that they initially fit like this (like a StackPanel with Horizontal orientation):

But then, when the elements stack to the point they won't fit anymore in the screen, I want them to start behaving like this:

Like an UniformGrid: as the number of elements increase, they become smaller.

What would be the best or any way to do this? Since the external control size is variable (it depends on the user's screen size) I can't "hack" it to use one component or another depending on the number of elements because I can't predict the number it takes to "break" the screen.

Answer 1

Easiest/Quickest route, throw it in a ViewBox with it set to Stretch="Uniform" to do it for you, as an example like below, just add/subtract rectangles and you'll get the concept...

<Viewbox Stretch="Uniform" MaxHeight="60" MaxWidth="200">
    <StackPanel Orientation="Horizontal">
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
         <Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
     </StackPanel>
</Viewbox>

Hope this helps. Cheers