WPF中的自动调整大小包装面板

Question

我有一个物品清单（气泡），物品的大小取决于重量（气泡直径）。

我正在尝试在WrapPanel添加气泡。 我希望“包装面板”应该包装，并在装满后将其作为“自动调整大小”项目。

名额已满

元素已添加到全部容量

XAML

    <ItemsControl VerticalAlignment="Center">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="300" IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Items>
        <wrapPanelDemo:CircleUserControl CircleHeight="30" />
        <wrapPanelDemo:CircleUserControl />
        <wrapPanelDemo:CircleUserControl CircleHeight="50" />
        <wrapPanelDemo:CircleUserControl />
        <wrapPanelDemo:CircleUserControl CircleHeight="100" />
        <wrapPanelDemo:CircleUserControl />
        <wrapPanelDemo:CircleUserControl CircleHeight="200" />
        <wrapPanelDemo:CircleUserControl />
        <wrapPanelDemo:CircleUserControl />
        <wrapPanelDemo:CircleUserControl CircleHeight="250" />
        <wrapPanelDemo:CircleUserControl CircleHeight="100" />

    </ItemsControl.Items>
</ItemsControl>

也

如果面板的数量更多（将它们命名为包含气泡的P1和P2），则气泡（P1中的权重250）应与气泡（P2中的权重250）看起来相同，即使P1和P2的气泡不同。 （所有面板中所有气泡的重量与大小之比应相同）

Answer 1

自动调整尺寸实际上是什么意思？ 如果您是说wrappanel应该扩大它的高度，那么我认为这已经内置了wrappanel的行为。 限制包装面板高度的是容器的高度。 尝试将包装面板放入scrollviewer中，您会发现它与内容一起不断扩展。 随着包装面板的高度超出可用空间，将出现滚动条。 测试例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer>
        <ItemsControl VerticalAlignment="Center">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="100" IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Items>
                <Ellipse Height="30" Width="30" Fill="Green" />
                <Ellipse Height="50" Width="50" Fill="Green" />
                <Ellipse Height="100" Width="100" Fill="Green" />
                <Ellipse Height="100" Width="100" Fill="Green" />
            </ItemsControl.Items>
        </ItemsControl>
    </ScrollViewer>
</Grid>

结果：

Answer 2

我认为，如果将包装板放在StackPanel中，那么您应该得到所需的结果