Question

I have 2 classes, one inside the other, and a prop with an ObservableCollection of the class with the sub-class collection. But I’m having a serious trouble in displaying the whole thing.

First my data, this is what I’ve got: (it may clarify my issue)

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

And a prop on the PageExample.xaml.cs

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

The idea is to display for each Environment a Grid of MyItems with an image(Red, Yellow or Green) on the semaphore enum

@Edit: This is almost working! Only the images won’t display.

This is My XAML but im newbie on wpf so It’s obvious I’m missing something.

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

These are my questions:

1. How is the correct way to write the XAML? @Edit: DONE!
2. How and where to bind
   the semaphore image to the datagrid?

@Edit: Semaphore is now a RelativeUri, because I didnt understand this answer.
I mean, I get the idea but not this thing:

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

With the RelativeUri and all It still does not display.

Answer 1

1. See here to find out how to set DataGrid.Columns and how to Bind them.
2. Check here how to convert semaphore enums into Images thru Converter and DataGridTemplateColumn.CellTemplate.
3. See here how to use grouping in DataGrid to group on the Environment property so that same Environment items are shown arranged under one group.