WPF - MVVM - Как реализовать структуру, похожую на прикрепленное изображение - PullRequest
1 голос
/ 14 марта 2019

Мое приложение отслеживает данные, относящиеся к различным аппаратным каналам. Каждый канал читает список предметов, названных ярлыками. Каждая метка состоит из числового идентификатора, логического значения, указывающего его действительность, и массива из трех байтов.

Моя модель в настоящее время производится следующим образом:

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 Логический индикатор PS уже доступен в качестве элемента WPF от National Instruments, нет необходимости рисовать его с нуля.

РЕДАКТИРОВАТЬ: ItemsControl с ItemTemplate, а также образец макета, решил мою проблему. Большое спасибо.

1 Ответ

2 голосов
/ 14 марта 2019

Вам нужно уточнить это, но это должно дать вам место для начала: вы должны превратить все это в пользовательский элемент управления, а столбцы - в другой пользовательский элемент управления, как сказано в комментариях.

Зеленые круги - это флажки со стилем, который показывает их состояние (отмечен или не отмечен) темным или лимонно-зеленым кругом

Результат:

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