How to bind data to Dynamic LongListSelector - xaml

Question

Hi I have a Pivot with dynamic PivotItems and I need put LongListSelector with StackPanels with TextBlock into PivotItem. I have a problem with binding text in TextBlock. Binding PivotHeader works fine but I don't know how to bind Name with TextBlock.
XAML
<phone:Pivot x:Name="ShelfsPivot">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<phone:LongListSelector ItemsSource="{Binding LongListSelector}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
and code behind
public class LongListData
{
public string Name { get; set; }
}
public class PivotData
{
public string Header { get; set; }
public LongListSelector LongListSelector { get; set; }
}
public partial class MainPage
{
public MainPage()
{
InitializeComponent();
var pivotDataList = new List<PivotData>();
var pivotItem1 = new PivotData {Header = "Header1", LongListSelector = new LongListSelector()};
var pivotItem2 = new PivotData {Header = "Header2", LongListSelector = new LongListSelector()};
pivotDataList.Add(pivotItem1);
pivotDataList.Add(pivotItem2);
ShelfsPivot.ItemsSource = pivotDataList;
var list = new List<LongListData>();
var item0 = new LongListData {Name = "Item1"};
var item1 = new LongListData {Name = "Item2"};
var item2 = new LongListData {Name = "Item3"};
list.Add(item0);
list.Add(item1);
list.Add(item2);
foreach (var pivotItem in ShelfsPivot.Items)
{
var longlist = pivotItem as PivotData;
if (longlist != null)
longlist.LongListSelector.ItemsSource = list;
}
}
}

Answer 1

The item binding for LongListSelector shouldn't be itself a LongListSelector, it should be either a List or an ObservableCollection. If it's static data, use a List. If it's dynamic data, use an ObservableCollection.
So, it should look similar to this.
public class LongListData
{
public string Name { get; set; }
}
public class PivotData
{
public string Header { get; set; }
public ObservableCollection<LongListData> ListData { get; set; }
}
public MainPage()
{
InitializeComponent();
var list = new ObservableCollection<LongListData>();
var item0 = new LongListData {Name = "Item1"};
var item1 = new LongListData {Name = "Item2"};
var item2 = new LongListData {Name = "Item3"};
list.Add(item0);
list.Add(item1);
list.Add(item2);
var pivotDataList = new List<PivotData>();
var pivotItem1 = new PivotData {Header = "Header1", ListData = list};
var pivotItem2 = new PivotData {Header = "Header2", ListData = list};
pivotDataList.Add(pivotItem1);
pivotDataList.Add(pivotItem2);
ShelfsPivot.ItemsSource = pivotDataList;
}
With your binding looking like this.
<phone:Pivot.ItemTemplate>
<DataTemplate>
<phone:LongListSelector ItemsSource="{Binding ListData}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</DataTemplate>
</phone:Pivot.ItemTemplate>
Hope this helps and happy coding!