How to bind data to Dynamic LongListSelector

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!