ItemControl with 2 sources

Question

I have the following Classes:

public class agentes
{
    [PrimaryKey]
    public string id { get; set; }
    public string idContinente { get; set; }
    public string idCountry { get; set; }
    public string title { get; set; }
    public string desc { get; set; }
}

and

public class country
{
    [PrimaryKey]
    public string id { get; set; }
    public string idContinent { get; set; }
    public string title { get; set; }

}

i also have 2 other classes, and have a List of objects of each of those types , country and agents.

my List is filled with the results from a Database query to a sqlite database that looks something like this:

public List<agentes> GetAllAgents()
        {
            List<agentes> AllAgents = new List<agentes>();
            using (var db = new SQLite.SQLiteConnection(app.DBPath))
            {
                var query = db.Table<agentes>().OrderBy(c => c.idCountry);
                foreach (var _Agent in query)
                {
                    var Agente = new agentes()
                    {
                        desc = _Agent.desc,
                        id = _Agent.id,
                        idContinente = _Agent.idContinente,
                        idCountry = _Agent.idCountry,
                        title = _Agent.title,
                    };
                    AllAgents.Add(Agente);
                }
            }
            return AllAgents;
        }

Now, what i intend to do , is a list of agents organized by country so it looks something like

i started with something like this but clearly it inst whats needed

<ScrollViewer  Margin="30,30,0,30" Height="444">
                <ItemsControl Name="ListCountries">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding title}" Foreground="Red" />
                                <ItemsControl Name="AgentsByCountry" >
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding desc}" Foreground="Black" />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

anyone got any suggestions how i can do this?

Answer 1

You can use LINQ to group by title which will create IGrouping for each country where Key will be your country:

ListCountries.ItemsSource = GetAllAgents().GroupBy(a => a.title);

and then change binding for inner TextBlock and ItemsControl like so

<ScrollViewer  Margin="30,30,0,30" Height="444">
    <ItemsControl Name="ListCountries">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Key}" Foreground="Red"/>
                    <ItemsControl ItemsSource="{Binding}" >
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding desc}" Foreground="Black" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>