c# - 如何在 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.Horizo​​ntalAlignmentProperty, OnHorizo​​ntalAlignmentChanged);
可以在 codeproject 上找到类似控制的解释。 (称为 VariableSizedWrapGrid)。但是我检查了一下，它在某处有错误。

在 ios 上它被称为马赛克 View 或 StaggeredLayoutManager for RecyclerView 在 Android 上。