Я использую элемент управления элементами в WPF, я дал коллекцию словарей в качестве источника элементов для элемента управления. В этой коллекции словарей будут использоваться key и observablecollection. Различные элементы будут находиться в наблюдаемой коллекции каждого элемента словаря. Итак, когда мне дается источник предметов, он будет такой же высоты.
посмотреть код:
<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; }
}
Токовый выход:
Ожидаемый результат:
Мне нужно сгруппировать элементы в соответствии с ожидаемым результатом, не могли бы вы предоставить какое-либо решение для этого?





Вместо WrapPanel попробуйте UniformGrid:
<UniformGrid Columns = "1" IsItemsHost = "True" />
Кроме того, я не уверен в настройке Height = "Auto". Убери это. Настройка принадлежит RowDefinition сетки.
То есть вы имеете в виду, что хотите минимизировать расстояние между вашими предметами? Похоже на проблема с упаковкой бункера. Возможно, для этого вам потребуется создать настраиваемую панель с настраиваемой логикой.
Так работает WrapPanel. Если вы установите Horizontal, все элементы в строке будут иметь одинаковую высоту, и это будет переносить элементы в следующую строку. Можно попробуйте указать Orientation = "Vertical" для WrapPanel, но не совсем уверен, подходит ли вам. В этом случае все элементы в столбце будут иметь одинаковую ширину.
В противном случае вам не понадобится ни WrapPanel, ни UniformGrid, вам понадобится другая панель, которая называется StaggeredPanel. Исходный код для uwp можно легко использовать в WPF, я только что проверил.
Пришлось переписать только одну строку, что не имеет большого значения, со следующим отвечать: RegisterPropertyChangedCallback(Panel.HorizontalAlignmentProperty, OnHorizontalAlignmentChanged);
Объяснение подобного элемента управления можно найти в кодпроект (Called VariableSizedWrapGrid). Но я проверил, где-то есть ошибки.
В iOS это называется мозаичным представлением или StaggeredLayoutManager для RecyclerView на Android.
У меня есть панель с изменяемым размером внутри панели обтекания. Таким образом, пользователь может изменить размер панели внутри панели обтекания. При перетаскивании другой панели с изменяемым размером она выравнивает оставшееся пространство.
Наконец-то нашел код StaggeredPanel, который работает лучше.
Наконец я нашел исходный код StaggeredPanel. Смотрите мой ответ.