WPF - MVVM - 如何实现类似于附图的结构

Question

我的应用程序监控与不同硬件通道相关的数据。每个频道都在读取一个名为标签的项目列表。每个标签由一个数字 ID、一个表示其有效性的布尔值和一个三字节数组组成。

我的模型目前制作如下：

public class ArincLabel
{
    public byte Label { get; set; }
    public byte[] Content { get; set; }
}

public class ArincLabelRx
{
    public bool IsValid { get; set; }
    public ArincLabel ArincLabel { get; set; }
}

public Dictionary<string, List<ArincLabelRx>> Arinc429RxData;

每次读取一批新标签时，ViewModel 都会引发并使用一个事件。

我需要向最终用户展示所有标签的内容。在LabVIEW中，我可以画出这样的结构：

我不知道如何在 WPF 中实现类似的结构。你能给我一些建议吗？

请考虑到我完全控制了应用程序，我可以修改它的各个方面，我试图了解实现我的要求的最佳方式。

PS 布尔指标已经作为 NI 的 WPF 项目提供，无需从头开始绘制。

编辑：带有 ItemTemplate 的 ItemsControl 以及示例布局解决了我的问题。非常感谢。

Answer 1

您需要对其进行改进，但它应该为您提供一个开始的地方：您应该将整个东西变成一个自定义控件，并将列变成另一个自定义控件，正如它在 cmets 中所说的那样。

绿色圆圈是复选框，其样式以深色或浅绿色圆圈显示其状态（选中或未选中）

结果：

         <Border BorderBrush="Gray" Background="LightGray" BorderThickness="2" MaxWidth="142" HorizontalAlignment="Left">
            <StackPanel HorizontalAlignment="Left">                    
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock>Channel</TextBlock>
                    <TextBox Grid.Column="1" Margin="5,0,0,0">AMMC_TX1</TextBox>
                </Grid>
                    <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible">
                <UniformGrid HorizontalAlignment="Left" Rows="1">
                        <!--Turn me into a custom control-->
                        <Border BorderBrush="Gray" BorderThickness="2" MaxWidth="50">
                            <StackPanel>
                                <TextBlock>Label</TextBlock>
                                <TextBox>1</TextBox>
                                <CheckBox IsChecked="True" Margin="5">
                                    <CheckBox.Style>
                                        <Style TargetType="CheckBox">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="CheckBox">
                                                        <Grid>
                                                            <Ellipse Name="eli" Height="30" Width="30" Fill="DarkGreen"/>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>

                                                            <Trigger Property="IsChecked" Value="True">
                                                                <Setter TargetName="eli" Property="Fill" Value="Lime"/>
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>

                                        </Style>
                                    </CheckBox.Style>
                                </CheckBox>
                                <TextBlock>Content</TextBlock>
                                <TextBox>11</TextBox>
                                <TextBox>22</TextBox>
                                <TextBox>33</TextBox>
                            </StackPanel>
                        </Border>
                        <!--Turn me into a custom control-->
                        <Border BorderBrush="Gray" BorderThickness="2" MaxWidth="50">
                            <StackPanel>
                                <TextBlock>Label</TextBlock>
                                <TextBox>1</TextBox>
                                <CheckBox IsChecked="True" Margin="5">
                                    <CheckBox.Style>
                                        <Style TargetType="CheckBox">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="CheckBox">
                                                        <Grid>
                                                            <Ellipse Name="eli" Height="30" Width="30" Fill="DarkGreen"/>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>

                                                            <Trigger Property="IsChecked" Value="True">
                                                                <Setter TargetName="eli" Property="Fill" Value="Lime"/>
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>

                                        </Style>
                                    </CheckBox.Style>
                                </CheckBox>
                                <TextBlock>Content</TextBlock>
                                <TextBox>11</TextBox>
                                <TextBox>22</TextBox>
                                <TextBox>33</TextBox>
                            </StackPanel>
                        </Border>
                        <!--Turn me into a custom control-->
                        <Border BorderBrush="Gray" BorderThickness="2" MaxWidth="50">
                            <StackPanel>
                                <TextBlock>Label</TextBlock>
                                <TextBox>1</TextBox>
                                <CheckBox IsChecked="True" Margin="5">
                                    <CheckBox.Style>
                                        <Style TargetType="CheckBox">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="CheckBox">
                                                        <Grid>
                                                            <Ellipse Name="eli" Height="30" Width="30" Fill="DarkGreen"/>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>

                                                            <Trigger Property="IsChecked" Value="True">
                                                                <Setter TargetName="eli" Property="Fill" Value="Lime"/>
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>

                                        </Style>
                                    </CheckBox.Style>
                                </CheckBox>
                                <TextBlock>Content</TextBlock>
                                <TextBox>11</TextBox>
                                <TextBox>22</TextBox>
                                <TextBox>33</TextBox>
                            </StackPanel>
                        </Border>
                    </UniformGrid>
                    </ScrollViewer>
            </StackPanel>
            </Border>