How to auto height set to itemscontrol in wpf?

Question

I have using the itemscontrol in WPF, I have given the dictionary collection as itemsource for itemscontrol. In this dictionary collection, will be used key and observablecollection. Different items will be in observablecollection of each dictionary items. so, when i'm given an itemsource it will be taken same height.

see the code:

 <ItemsControl
            Grid.Row="1"
            Height="Auto"
            ItemsSource="{Binding Values}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Top"
                        IsItemsHost="True"
                        Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <GroupBox
                        MinWidth="303"
                        Margin="5,0,0,0">
                        <ItemsControl Margin="20,5,0,5">
                            <ItemsControl.Resources>
                                <CollectionViewSource x:Key="Collection" Source="{Binding Value}" />
                                <DataTemplate DataType="{x:Type Model:Sensor}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Label
                                            Grid.Column="1"
                                            Content="{Binding Name}"
                                            FontFamily="SegoeUI-Semibold"
                                            FontSize="12"
                                            FontWeight="SemiBold" />
                                        <Label
                                            Grid.Column="2"
                                            HorizontalContentAlignment="Center"
                                            Content="{Binding Value}"
                                            FontFamily="SegoeUI"
                                            FontSize="12" />
                                    </Grid>
                                </DataTemplate>

                                <DataTemplate DataType="{x:Type Model:DigitalInput}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                         <Label
                                            Grid.Column="1"
                                            Content="{Binding Name}"
                                            FontFamily="SegoeUI-Semibold"
                                            FontSize="12"
                                            FontWeight="SemiBold" />
                                        <Label
                                            Grid.Column="2"
                                            HorizontalContentAlignment="Center"
                                            Content="{Binding InputState}"
                                            FontFamily="SegoeUI"
                                            FontSize="12" />
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.Resources>
                            <ItemsControl.ItemsSource>
                                <CompositeCollection>
                                    <CollectionContainer Collection="{Binding Source={StaticResource Collection}}" />
                                </CompositeCollection>
                            </ItemsControl.ItemsSource>
                        </ItemsControl>
                    </GroupBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

see the class code:

 private Dictionary<string, ObservableCollection<IValue>> values;
 public Dictionary<string, ObservableCollection<IValue>> Values
    {
        get { return values; }
        set { values = value; }
    }

Current output: Expected output: I need to group the items as an expected output, so could you please provide any solution to achieve that?

Finally I found StaggeredPanel source code. See my answer. – Access Denied Sep 26 '18 at 11:56 — Access Denied, Sep 26 '18 at 11:56

Access Denied · Answer 1 · 2018-09-26T13:25:11.990

This is how WrapPanel works. If you set Horizontal all items in row will have same height and it wraps elements to the next row. You can try specifying Orientation="Vertical" for your WrapPanel, but not quite sure if it suits you. In this case all elements in column will have same width.

Otherwise you don't need either WrapPanel or UniformGrid, you need different panel which is called StaggeredPanel. Source code for uwp can be easily used in WPF, I just checked it. Only had to rewrite one line which is not a big deal with the following answer: RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged); An explanation for similar control can be found on codeproject (Called VariableSizedWrapGrid). But I checked it and it has errors somewhere.

On ios it's called mosaic view or StaggeredLayoutManager for RecyclerView on Android.

I have a Resizable panel inside the wrap panel. So user can resize the Panel inside the wrap panel. When drag and drop the another Resizable panel It will align remaining space. — Achu_L, Sep 25 '18 at 09:19

score 1 · Answer 2 · answered Sep 25 '18 at 07:50

1

Instead of WrapPanel, try a UniformGrid:

<UniformGrid Columns="1" IsItemsHost="True" />

Also, I'm not sure about the Height="Auto" setting. Remove it. The setting belongs to the RowDefinition of the grid.

answered Sep 25 '18 at 07:50

l33t

18,692
16
103
180

1

So you mean you want to minimize the spacing between your items? Sounds like a [bin packing problem](https://en.wikipedia.org/wiki/Bin_packing_problem). You probably need to create a custom panel with custom logic for this. – l33t Sep 25 '18 at 11:17
I have fixed size that needs to be filled uniformly with a varying number of elements. This does exactly that. – AyCe May 13 '22 at 12:48

How to auto height set to itemscontrol in wpf?

2 Answers2