XAML: Binding scrollviewer with 2 sources - xaml

Question

Trying to learn xaml designing. I got this picture from internet and use it as a model to practice. There is a problem: When I click one of day buttons, a scrollviewer with a list of day tasks appears. Each task has a list of hours in day, from start time to end time. I don't know whether they are from one source or 2 source (one describes day task and the other one is a list of hours of this task).
I tried with this
public async void ShowTasks()
{
ObservableCollection<DayTask> Data = await App.DataSource.GetData();
DateListBox.ItemsSource = Data;
DayTask daytask = Data.Where(x => x.Day.Date == App.Day.Date).FirstOrDefault();
TasksListView.ItemsSource = daytask.Tasks;
List<HoursModel> HoursList = new List<HoursModel>();
foreach (var simpletask in daytask.Tasks)
{
HoursList.Add(new HoursModel(simpletask.StartTimeHour, simpletask.EndTimeHour));
}
HoursListView.ItemSource = HoursList;
}
This is my xaml code:
<ScrollViewer Height="730" Width="300" >
<ListView
x:Name="TasksListView" Height="730" Width="300"
HorizontalAlignment="Right">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<ListView
Grid.Column="0"
x:Name="HoursListView">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock
x:Name="ShowedHours"
Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Grid Grid.Column="1">
<Rectangle
Fill="Pink"
Height="75"
Width="150"
Margin="60,20,0,0"/>
<TextBlock
Text="{Binding Description}"
FontSize="17"
TextWrapping="Wrap"
Margin="80,20,0,0"/>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
I got an error with HoursListView.ItemSource = HoursList;. The detail of this error is
The name 'HoursListView' does not exist in the current context. Does anyone have any suggestions how I can do this ?

Answer 1

You can't access control in DataTemplate directly by it's name. That makes sense because DataTemplate in this case is generated repeatedly for each item within TasksListView.
According to XAML markup posted, you want to have different HoursList for each DayTask. That can be achieved by adding an HoursList property in DayTask class. I'd suggest to use ObservableCollection instead of List because the former has built-in feature to notify bound UI to refresh whenever item added to or removed from collection :
public class DayTask
{
public ObservableCollection<HoursModel> HoursList { get; set; }
.....
}
Then bind HoursListView's ItemsSource to above property :
.....
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<ListView
Grid.Column="0"
ItemsSource="{Binding HoursList}"
x:Name="HoursListView">
.....
</ListView>
</Grid>
</DataTemplate>
.....
Don't forget to populate all HoursList properties before setting DateListBox.ItemsSource.