WPF databinding from DataTemplate - many-to-many relationship - wpf

Question

I have a WPF control for laying out items and set ItemsSource for it as
ItemsSource="{Binding item_portfolio}" DataContext="{Binding SelectedItem}"
In the layout control's Resources I set the template for its items:
<Style>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="{Binding portfolio.PortfolioName}" />
<ListView ItemsSource="{Binding ?}">
</ListView>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The data for the bindings is a many-to-many relationship (one item can have many portfolios and one portfolio can have many items) and specified in 3 separate tables in the database (I use Entity Framework to access it). Schema and example data below:
item item_portfolio portfolio
ID (PK) Name itemID (FK) portfolioID (FK) ID PortfolioName
1 Item 1 1 1 1 Portfolio 1
2 Item 2 1 2 2 Portfolio 2
1 3 3 Portfolio 3
2 2
2 3
TextBlock binding under DataTemplate works correctly.
I don't however know how to bind the ListView ItemsSource so that it would show all the item objects belonging to that portfolio.
Edit:
I want to list portfolios in the layout control. Then under portfolio, I want to show what items it contains. The below image shows the UI when the SelectedItem is Item 1.
(First I show what portfolios this item has. This gives 3 portfolios. This works ok. Then on UI I click the portfolio 3, and it should show all items (Item 1 and Item 2) belonging to that portfolio. That doesn't work yet.)

Answer 1

We don't model our data models in code in the same way as they are modelled in the database. We don't make 'joining classes' to model 'joining tables'. Instead, we create hierarchical data models. In your case, you should have an Item class that has a Portfolio property of type Portfolio. There should be no ItemPortfolio class, as it makes no sense. Then, your Binding should be this`:
<ItemsControl ItemsSource="{Binding Items}" ... />
Then your DataTemplate (which will automatically have its DataContext set to an item from the Item class collection) should look more like this:
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="{Binding PortfolioName}" />
<ListView ItemsSource="{Binding Portfolio}">
</ListView>
</StackPanel>
</DataTemplate>
Clearly, to make this work, you'd need to have those properties defined in your Item class.
UPDATE >>>
In that case, make a Portfolio class with an Items property of type ObservableCollection<Item> and set the ItemsSource like this:
<ItemsControl ItemsSource="{Binding Item.Portfolios}" ... />
To clarify, your Item class should also have a collection property of type ObservableCollection<Portfolio>... this will lead to some data object duplication, but in WPF it is more important to provide your views with the data that they require.

Answer 2

I used Expander control here as you want PortfolioName as header and on click of
PortfolioName you want to display corresponding PortfolioItemList.
xaml code
<ItemsControl MaxHeight="300" ItemsSource="{Binding PortfolioInfo}" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<TextBlock Background="YellowGreen" Text="{Binding name}"></TextBlock>
</Expander.Header>
<Expander.Content>
<ListBox ItemsSource="{Binding ItemList}"></ListBox>
</Expander.Content>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
C# code
public partial class MainWindow : Window
{
public ObservableCollection<Portfolio> PortfolioInfo { get; set; }
public MainWindow()
{
InitializeComponent();
PortfolioInfo = new ObservableCollection<Portfolio>()
{
new Portfolio(){name="Portfolio1", ItemList= new List<string>(){"Item1","Item2","Item3"}},
new Portfolio(){name="Portfolio2", ItemList= new List<string>(){"Item1","Item2","Item3"}},
new Portfolio(){name="Portfolio3", ItemList= new List<string>(){"Item1","Item2","Item3"}}
};
this.DataContext = this;
}
}
public class Portfolio
{
public string name { get; set; }
public List<string> ItemList { get; set; }
}
Note : Edit Expander style/template to achieve desired UI
Rseult