Binding ListView inside a GridView

Question

I'd like to create a calendar week view and show some things inside. So it will have a header which is the date and additional a list of persons which have their birthday on this date. My approach was to use a GridView for showing each day of the week and inside the data template of the GridView I'd like to show a ListView of the list of persons.

My code looks like this:

1) the data stored within is an observable collection:

public class WeekView
{
    public System.DateTime Date { get; set; }
    public int MaxTemperature { get; set; }
    public int MinTemperature { get; set; }
    public string TemperatureIcon { get; set; }
    public ObservableCollection<CalendarItem> BirthdayList { get; set; }

    public WeekView(System.DateTime date, int v1, int v2, string temperatureIcon, ObservableCollection<CalendarItem> birthdayList)
    {
       this.Date = date;
       this.MaxTemperature = v1;
       this.MinTemperature = v2;
       this.TemperatureIcon = temperatureIcon;
       this.BirthdayList = birthdayList;
    }        
}

and the BirthdayList is another ObservableCollection with similar structure.

2) my user control looks like this (for easier understanding I've removed some formating stuff here):

<Grid>
<GridView ItemsSource="{Binding}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="360" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="180" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Date, Converter={StaticResource DateTimeToDayNameConverter}, FallbackValue=Donnerstag}" 
                                   Grid.Column="0"/>
                        <TextBlock Grid.Row="1" Text="{Binding Date, Converter={StaticResource DateTimeToDateStringConverter}, FallbackValue='16. Februar 2016'}" 
                               Grid.Column="0"/>
                    </Grid>
                    <TextBlock Text="{Binding TemperatureIcon}" 
                               Grid.Row="0"
                               Grid.Column="0"/>
                    </TextBlock>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="60" />
                        </Grid.ColumnDefinitions>
                        <TextBlock x:Name="MaxTemperatureIcon"    
                                   Grid.Row="0"
                                   Grid.Column="0"
                                   Text="&#xf055;">
                        </TextBlock>
                        <TextBlock Text="{Binding MaxTemperature, FallbackValue='23°C'}" 
                                   Grid.Row="0"
                                   Grid.Column="1">                                            
                        </TextBlock>
                        <TextBlock x:Name="MinTemperatureIcon"    
                                   Grid.Row="1"
                                   Grid.Column="0">
                        </TextBlock>
                        <TextBlock Text="{Binding MinTemperature, FallbackValue='15°C'}" 
                                   Grid.Row="1"
                                   Grid.Column="1">
                        </TextBlock>
                    </Grid>
                </StackPanel>
                <StackPanel Grid.Row="1">
                    <ListView ItemsSource="{Binding}" x:Name="BirthdayListView" >
                        <ListView.ItemTemplate>
                            <DataTemplate >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding BirthdayList.BirthdayString}" 
                                               Grid.Column="1"/>
                                    <TextBlock Text="{Binding BirthdayList.NameString}" 
                                               Grid.Column="2"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0,0,0,0"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0,20,0,0"/>
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

3) I'm binding the date to the GridView Item using the following code:

this.WeekView1.DataContext = this.WeekViewModel.WeekViewList1;

whereby WeekViewList1 is type of ObservableCollection<WeekView>

Showing the elements Date and weather works (so the basic grid view works), but how can I bind the BirthdayList to the ListView inside the GridView?

Answer 1

The DataContext of an item in the GridView will be the corresponding WeekView object so as suggested by @Aybe in the comments you should bind the ItemsSource property of the ListView to the BirthdayList property of the WeekView :

<ListView ItemsSource="{Binding BirthdayList}" x:Name="BirthdayListView">
...

The DataContext of an item in the inner "BirthdayListView" will then be a CalendarItem object so you should bind the TextBlocks in its DataTemplate to properties of the CalendarItem class.

Assuming that both "BirthdayString" and "NameString" are properties of the CalendarItem type the bindings should look like this:

<ListView ItemsSource="{Binding BirthdayList}" x:Name="BirthdayListView" >
    <ListView.ItemTemplate>
        <DataTemplate >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding BirthdayString}" 
                                               Grid.Column="1"/>
                <TextBlock Text="{Binding NameString}" 
                                               Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>