Как автоматически установить высоту itemscontrol в wpf?

Question

Я использую itemscontrol в WPF, я дал словарную коллекцию в качестве источника ресурсов для itemscontrol.В этом словаре будет использован ключевой и наблюдаемый набор.Различные предметы будут в наблюдаемой коллекции каждого словарного пункта.поэтому, когда мне дают источник предметов, он будет взят той же высоты.

см. код:

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

см. код класса:

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

Токовый выход: Ожидаемый выход: Мне нужносгруппируйте элементы как ожидаемый результат, поэтому не могли бы вы предоставить какое-либо решение для достижения этой цели?

Answer 1

Вот как работает WrapPanel. Если вы установите Горизонтально, все элементы в строке будут иметь одинаковую высоту, и это переносит элементы в следующую строку. Вы можете попробовать указать Orientation = "Vertical" для вашей WrapPanel , но не совсем уверены, подходит ли она вам. В этом случае все элементы в столбце будут иметь одинаковую ширину.

В противном случае вам не нужны ни WrapPanel, ни UniformGrid, вам нужна другая панель, которая называется StaggeredPanel . Исходный код для uwp может быть легко использован в WPF, я только что проверил. Нужно было переписать только одну строку, которая не имеет большого значения со следующим ответом : RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged); Объяснение аналогичного элемента управления можно найти в codeproject (Called VariableSizedWrapGrid). Но я проверил, и где-то есть ошибки.

В iOS это называется мозаичным представлением или StaggeredLayoutManager для RecyclerView на Android.

Answer 2

Вместо WrapPanel, попробуйте UniformGrid:

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

Кроме того, я не уверен насчет настройки Height="Auto".Убери это.Настройка относится к RowDefinition сетки.