Auto Sizing Wrap Panel in WPF

Question

I have a list of items (Bubbles) Size of the Items depends on the weight (Diameter of the bubble).

I am trying to add bubbles in a WrapPanel . I want that Wrap Panel should Wrap and will as Auto size item after its full.

Full Capacity

Element Added to Full Capacity

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>

Also

If there are more number of Panels (lets name them P1 and P2 containing bubbles) then Bubble (Weight 250 in P1) should look same as Bubble (Weight 250 in P2) even though P1 and P2 have different bubbles. (ratio of weight to size should be same for all Bubbles in all Panels)

Answer 1

What did you really mean by auto size ? If you meant wrappanel should expand it's height, i think that already built in behavior of wrappanel. What limiting wrappanel's height is height of it's container. Try to put the wrappanel inside scrollviewer, and you'll get it keep expanding along with the content. And as wrappanel's height grows beyond available space, scroll bar will appears. Test example :

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

Result :

Answer 2

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