Question

我们有一个用于一次显示大量信息的页面。

在这个页面上，我们想要一个左上角的读数部分，然后是剩下的那些列，而对于页面的其余部分，我们想要显示一些传感器输出。布局大致如下。

到目前为止，我所掌握的内容如下：

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

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

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

Answer 1

你可以尝试......像这样。

请注意，目前尚未完成此操作。这只是一个原始的例子。

基本上我所做的是先添加SensorReadoutControl，然后将剩余的SensorItems添加到同一个集合中。

然后我使用了WrapPanel。

这就是它的样子（添加了一些BackgroundColors以更清楚地说明控件在哪里！）

所以这是我的示例代码：

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>

视图模型：

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

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

ItemsControl填充列的剩余部分

1 个答案: