How to bind ObservableCollection to LongListSelector?

Question

I have a problem with binding ObservableCollection to LongListSelector and I don't know how to solve this. I have two pivot items and at second one I want to have list of favourite banks. When I tap "add_to_favourites" button two banks (selected in listPicker at first pivot item) should add to ObservableCollection and they do but they don't show in UI.

XAML for LongListSelector is:

</phone:PivotItem>
        <!--Pivot item two-->
        <phone:PivotItem  Header="Ulubione" Margin="10,0,10,7">
            <phone:LongListSelector x:Name ="FavouritesLongList" HorizontalAlignment="Left" Height="531" VerticalAlignment="Top" Width="456" Margin="-251,647,0,-647" LayoutMode="List" IsGroupingEnabled="False" SelectionChanged="Lista_Ulubione_SelectionChanged">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <TextBlock FontSize="35">
                            <Run Text="{Binding name1}"></Run>
                            <Run Text=" >> "></Run>
                            <Run Text="{Binding name2}"></Run>
                        </TextBlock>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
            <!--Double line list no text wrapping-->
        </phone:PivotItem>
    </phone:Pivot>

Now it's how looks my ObservableCollection:

public partial class MainPage : PhoneApplicationPage
{
    public List<Bank> list = new List<Bank>();
    private ObservableCollection<Ulubione> favourites = new ObservableCollection<Ulubione>();

    Wynik wy = new Wynik();
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        zak.DataContext = wy;//TextBlocks DataContext
        ban1.DataContext = wy;
        ban2.DataContext = wy;
        zle.DataContext = wy;
        czas.DataContext = wy;

        DataContext = App.ViewModel;
        this.Banki1.ItemsSource = list;//Item sources for ListPicker
        this.Banki2.ItemsSource = list;}

And my add_to_favourites button click:

private void addToFavourites(object sender, EventArgs e)
    {
        int b1 = this.Bank1.SelectedIndex;//ListPicker selected index of Bank1
        int b2 = this.Bank2.SelectedIndex;//ListPicker selected index of Bank2
        String n1 = list[this.Banki1.SelectedIndex].name;//Name od Bank1 from list of banks
        String n2 = list[this.Banki2.SelectedIndex].name;/Name od Bank2 from list of banks
        Ulubione fav = new Ulubione(b1, b2, n1, n2);

        bool ifCanAdd = true;
        foreach (Ulubione itm in favourites)
        {
            if (itm.index1 == b1 && itm.index2 == b2)
            {
                MessageBox.Show("This banks are already in favourites");
                ifCanAdd = false;
            }
        }
        if (ifCanAdd == true)
        {
            favourites.Add(fav);
            MessageBox.Show("Added to favourites");
            FavouritesLongList.ItemsSource = favourites;
        }
    }

Please help me how to bind this ObservableCollection to LongListSelector and update UI every time I add something to to collection.

What is name1 and name2 in Binding? Are these properties of Ulubione? Can you show Ulubione? Why are you setting FavouritesLonglist.ItemsSource every time you add item? Move it just behind this.Banki2.ItemsSource = list; - there is no need to set it every time as it's ObservableCollection — Romasz
Yes name1 and name 2 are proporties of Ulubione. Ulubione looks like that: public class Ulubione { public int index1 { get; set; } public int index2 { get; set; } public String name1 { get; set; } public String name2 { get; set; } public Ulubione(int i1, int i2, String n1, String n2) { index1 = i1; index2 = i2; name1 = n1; name2 = n2; } } — Zygi
Is this Margin="-251,647,0,-647" ok? Can you see something if you add something to favourites after InitializeComponent()? — Romasz

Romasz Romasz · Accepted Answer · 2013-12-24T13:15:53

The problem is with margin you have set in LLS - Margin="-251,647,0,-647". That's why you probabaly can't see anything. Best wishes and happy coding.

How to bind ObservableCollection to LongListSelector?

1 Answers