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

时间:2019-03-14 15:42:36

标签: c# wpf mvvm controls

我的应用程序监视与不同硬件通道有关的数据。每个通道都在读取一个名为标签的项目列表。每个标签由一个数字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中,我将能够绘制这样的结构:

LabVIEW array of cluster

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

请考虑到我完全控制了该应用程序,可以对其进行各个方面的修改,我试图了解什么是实现我的要求的最佳方法。

PS布尔指示器已经可以从National Instruments作为WPF项使用,无需从头开始绘制。

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

1 个答案:

答案 0 :(得分:1)

您需要对其进行优化,但它应该为您提供一个起点:您应该将整个内容变成一个自定义控件,将列变成另一个自定义控件,如注释中所述。

绿色圆圈是复选框,其样式用深色或柠檬绿色圆圈显示其状态(已选中或未选中)

结果:

enter image description here

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