Как привязать данные к динамическому LongListSelector

Question

Привет, у меня есть Pivot с динамическими PivotItems, и мне нужно положить LongListSelector со StackPanels с TextBlock в PivotItem. У меня проблема с привязкой текста в TextBlock. Связывание PivotHeader работает нормально, но я не знаю, как связать имя с 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>

и код позади

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

Привязка элемента для LongListSelector сама по себе не должна быть LongListSelector, это должна быть либо List, либо ObservableCollection. Если это статические данные, используйте список. Если это динамические данные, используйте ObservableCollection.

Итак, это должно выглядеть примерно так.

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;
}

С вашей привязкой выглядит вот так.

<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>

Надеюсь, это поможет и счастливого кодирования!