Làm thế nào tôi có thể đạt được kết hợp này của hành vi StackPanel và UniformGrid?

Question

tôi muốn đưa các yếu tố bên trong một điều khiển để họ ban đầu phù hợp như thế này (giống như một StackPanel với định hướng ngang):

Nhưng sau đó, khi các yếu tố ngăn xếp đến mức họ sẽ không phù hợp nữa trong màn hình, tôi muốn họ bắt đầu hành xử như thế này:

giống như một UniformGrid: như số lượng các yếu tố tăng, họ trở nên nhỏ hơn.

Điều gì sẽ là cách tốt nhất hoặc bất kỳ cách nào để thực hiện việc này? Vì kích thước điều khiển bên ngoài là biến (nó phụ thuộc vào kích thước màn hình của người dùng), tôi không thể "hack" nó để sử dụng thành phần này hay thành phần khác tùy thuộc vào số lượng phần tử vì tôi không thể dự đoán số lượng cần để "ngắt" màn hình.

Answer 1

dễ nhất tuyến đường/nhanh nhất, ném nó trong một ViewBox với nó thiết lập để Stretch="Uniform" để làm điều đó cho bạn, như một ví dụ như dưới đây, chỉ cần thêm/trừ hình chữ nhật và bạn sẽ nhận được các khái niệm ...

<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> 

Hy vọng điều này sẽ hữu ích. Chúc mừng