ItemsControl fill remainder of columns - wpf

Question

We have a page which we use to display a lot of information at once.
On this page we want a readouts section in the top left, and then for the remainder of that columns, and for the rest of the page we want to display some sensor outputs. Layout is roughly the following.
What I have attemtped so far is as follows
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:ParameterDisplayPanel HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Columns="1"
Grid.Column="0"/>
<ItemsControl
Grid.Column="0"
Grid.ColumnSpan="3"
ItemsSource="{Binding ItemCollection, UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:SensorControlView
DataContext="{Binding}"
Width="280"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
This returns a layout where the sensors overlap the readout panel.
If instead of using a grid I use a wrap panel, I get a row at the top which displays the readouts, and then all the sensor states start beneath that first row.

Answer 1

You could try sth. like this.
Note that this is not done yet. It's just a raw example.
Basically what I did is I added the SensorReadoutControl first and then added the remaining SensorItems to the same collection.
I then used a WrapPanel.
This is what it looks like (added some BackgroundColors to make more clear what control is where !)
So here is my example code:
XAML:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="SensorItemTemplate">
<Grid Background="Gray" Height="50">
<Border BorderThickness="1" BorderBrush="Pink"
Margin="5">
<TextBlock Text="{Binding Name}"
Width="200"
TextAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding Items}"
Background="Green"
ItemTemplate="{StaticResource SensorItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
ViewModel:
public class ViewModel
{
public ViewModel()
{
Grid grid = new Grid() { Width = 200, Height = 150, Background = Brushes.Blue };
grid.Children.Add(new TextBlock()
{
Text = "Sensor readouts" ,
VerticalAlignment = System.Windows.VerticalAlignment.Center,
HorizontalAlignment = System.Windows.HorizontalAlignment.Center
});
Items.Add(grid);
for (int i = 0; i < 50; i ++)
{
Items.Add(new SensorItem() { Name = $"SensorItem {i}" });
}
}
public List<object> Items { get; set; } = new List<object>();
}
public class SensorItem
{
public string ItemTypeName { get; set; } = "SensorItem";
public string Name { get; set; }
}
I guess that won't satisfy your needs but it may help you to progress.