WPF：以自定义格式（带图像）显示数据网格的集合

Question

我有 2 个类，一个在另一个类中，还有一个带有 ObservableCollection 的类的子类集合的道具。但是我在显示整个内容时遇到了严重的问题。

首先是我的数据，这就是我所拥有的：（它可能会澄清我的问题）

public class MyItem
{
    public string Id { get; set; }
    public string Front { get; set; }
    public Props.StateSemaphore Semaphore{ get; set; } // this is an enum w/ints
    public string ToolTip { get; set; }
    public string Architect { get; set; }
    public string Status { get; set; }

    public MyItem(){}
    public MyItem(string id, string front, 
            Props.StateSemaphore semaphore, string toolTip, 
            string architect, string status)
    {
        Id = id;
        Front = frente;
        Semaphore = semaphore;
        ToolTip = toolTip;
        Architect = architect;
        Status = status;
    }
}

public class MyTab
{
    public List<MyItem> MyItems { get; set; }
    public string Environment { get; set; }
    public MyTab() { }
    public MyTab(string environment)
    {
        Environment = environment;
        MyItems = new List<MyItem>();
    }
}

还有一个关于 PageExample.xaml.cs 的道具

  private ObservableCollection<MyTab> myPanel;
  public ObservableCollection<MyTab> MyPanel
  {
      get { return myPanel; }
      set { myPanel = value; }
  }

这个想法是为每个环境在信号量枚举上显示一个带有图像（红色、黄色或绿色）的 MyItems 网格

@Edit：这几乎可以工作了！只有图像不会显示。

这是我的 XAML，但我是 wpf 的新手，所以很明显我遗漏了一些东西。

<Page x:Class="MyBoard.PageMain"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:w="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:MyBoard"
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="PageMain">
       <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center">
        <DataGrid Name="EnvironmentDataGrid" IsReadOnly="True" ItemsSource="{Binding}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Id}" Header="Id"/>
                <DataGridTextColumn Binding="{Binding Front}" Header="Front"/>
                <DataGridTemplateColumn Header="Semaphore">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Semaphore}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Binding="{Binding ToolTip}" Header="ToolTip"/>
                <DataGridTextColumn Binding="{Binding Architect}" Header="Architect"/>
                <DataGridTextColumn Binding="{Binding Status}" Header="Status"/>
            </DataGrid.Columns>

            <DataGrid.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Path=Environment}" FontWeight="Bold" Padding="3"/>
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander>
                                            <Expander.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="{Binding Path=Name}" />
                                                    <TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
                                                    <TextBlock Text="Element(s)"/>
                                                </StackPanel>
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </DataGrid.GroupStyle>
        </DataGrid>
    </Grid>
</Page>

这些是我的问题：

1. 如何正确编写 XAML？ @Edit：完成！
2. 绑定方式和位置 信号量图像到数据网格？

@Edit：Semaphore 现在是一个 RelativeUri，因为我不理解 this answer。 我的意思是，我明白了这个想法，但不是这个：

<MultiBinding Converter={StaticResource catMultiConverter}>
      <Binding .../>
      <Binding .../>
    </MultiBinding>

使用RelativeUri 和所有它仍然不显示。

Answer 1

1. 请参阅here，了解如何设置DataGrid.Columns 以及如何设置Bind。
2. 通过Converter 和DataGridTemplateColumn.CellTemplate 检查here 如何将信号量枚举转换为图像。
3. 请参阅here 如何使用DataGrid 中的分组对Environment 属性进行分组，以便将相同的Environment 项目显示在一个组下。