如何在wpf中将高度自动设置为itemscontrol？

Question

我在 WPF 中使用了 itemscontrol，我将字典集合作为 itemscontrol 的 itemsource。在这个字典集合中，将使用 key 和 observablecollection。不同的项目将在每个字典项目的 observablecollection 中。所以，当我得到一个 itemsource 时，它​​将采用相同的高度。

查看代码：

 <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 的工作原理。如果您设置水平，则行中的所有项目都将具有相同的高度，并将元素包装到下一行。 您可以尝试为 WrapPanel 指定 Orientation="Vertical"，但不太确定它是否适合您。在这种情况下，列中的所有元素都将具有相同的宽度。

否则您不需要 WrapPanel 或 UniformGrid，您需要不同的面板，称为 StaggeredPanel。 Source code uwp 可以很容易地在 WPF 中使用，我刚刚检查过。 只需要重写一行这不是什么大不了的answer：RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged); 在codeproject（称为VariableSizedWrapGrid）上可以找到类似控制的解释。但是我检查了它，它在某处有错误。

在 ios 上它被称为镶嵌视图或 StaggeredLayoutManager 用于 Android 上的 RecyclerView。

Answer 2

试试WrapPanel，而不是UniformGrid：

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

另外，我不确定Height="Auto" 设置。去掉它。该设置属于网格的RowDefinition。