Wpf ItemsControl填充列的其余部分

我们有一个页面，可以一次显示大量信息

在这一页上，我们希望在左上角有一个readouts部分，然后对于该列的其余部分，我们希望在该页的其余部分显示一些传感器输出。布局大致如下

到目前为止，我所做的努力如下

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

这将返回传感器与读出面板重叠的布局

---

如果不是使用网格，而是使用一个包裹面板，我会在顶部得到一行，显示读数，然后所有传感器状态从第一行下方开始。

您可以尝试这样的操作

请注意，这项工作尚未完成。这只是一个简单的例子。

基本上，我首先添加了

SensorReadoutControl

，然后将剩余的

SensorItems

添加到同一个集合中

然后我使用了一个

WrapPanel

这就是它看起来的样子（添加了一些背景色，以更清楚地说明控件在哪里！）

下面是我的示例代码：

XAML：

视图模型：

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

公共类视图模型
{
公共视图模型（）
{
Grid Grid=new Grid（）{Width=200，Height=150，Background=brusks.Blue}；
grid.Children.Add（新文本块（）
{
Text=“传感器读数”，
垂直对齐=System.Windows.VerticalAlignment.Center，
HorizontalAlignment=System.Windows.HorizontalAlignment.Center
});
项目。添加（网格）；
对于（int i=0；i<50；i++）
{
添加（新的SensorItem（）{Name=$“SensorItem{i}”）；
}
}
公共列表项{get；set；}=new List（）；
}
公共类项目
{
公共字符串ItemTypeName{get；set；}=“SensorItem”；
公共字符串名称{get；set；}
}

---

我想这不能满足您的需要，但它可能会帮助您进步。

尝试将

网格

与

网格.RowDefinitions

和

网格.ColumnDefinitions

结合使用。这样，我就可以看到传感器与读出面板重叠，或者读出面板和所有列从其下方开始，而不仅仅是第一个。（取决于我是如何整理网格的）我真的不知道你在实现什么，因为我没有得到你想要的输出。也许你可以更精确一点。然后我可以举出一个例子，我把我糟糕的ascii艺术换成了一幅图像。基本上，我想要的是类似报纸专栏布局的东西，如果这更有意义的话。我可以将列表拆分成更小的列表，然后手动添加。这可能比弄明白更容易。这是我的目标。我需要对它稍加修改，但它肯定会让我走上正确的方向。谢谢，不客气！我想如果您需要，滚动将是一个问题：/

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