WPF中的自动调整包装面板

Question

我有一个项目列表（气泡）项目的大小取决于重量（气泡的直径）。

我正在尝试在WrapPanel中添加气泡。我希望Wrap Panel应该包装，并在完整后将自动调整大小。

完整容量

元素已添加到完整容量

的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和P2具有不同的气泡，气泡（P1中的重量250）也应该与气泡（P2中的重量250）相同。 （重量与尺寸的比例应相同 对于所有小组中的所有气泡）

Answer 1

自动尺寸的真正含义是什么？如果你的意思是wrappanel应该扩展它的高度，我认为已经内置了wrappanel的行为。限制包裹物的高度是它的容器的高度。尝试将wrappanel放在scrollviewer中，你会随着内容继续扩展。随着wrappanel的高度超出可用空间，将出现滚动条。测试示例：

<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中，那么你应该得到你需要的结果