How to bind an ObservableCollection to a Listpicker

Question

I am attmepting to bind an ObservableCollection of items to a ListPicker from the Silverlight toolkit for Windows Phone. I have done this before, but in my case now, my ObservableCollection contains items from a custom class. I do not know how to get each of the properties of the class (for each item) to bind to my ListPicker. To better illustrate what I have is as follows:

MainPage.xaml

<Grid.Resources>
        <DataTemplate x:Name="SearchProviderItemTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Favicon}" />
                <TextBlock Text="{Binding Name}" Margin="12,0,0,0"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Name="SearchProviderFullModeItemTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Favicon}" />
                <TextBlock Text="{Binding Name}" Margin="12,0,0,0"/>
            </StackPanel>
        </DataTemplate>
</Grid.Resources>

<toolkit:ListPicker x:Name="SearchProviderListPicker" ItemsSource="{Binding SearchProvider}" Margin="12,0,12,0" 
                            Header="Search provider" ItemTemplate="{Binding SearchProviderItemTemplate}"
                            FullModeHeader="Search provider" FullModeItemTemplate="{Binding SearchProviderFullModeItemTemplate}"
                            SelectedIndex="{Binding}"
                            SelectionChanged="SearchProviderListPicker_SelectionChanged" 
                            CacheMode="BitmapCache"/>

MainPage.xaml.cs

public MainPage()
    {
        InitializeComponent();

        //This data is placed here for convenience right now
        ListItem Bing = new ListItem { Favicon = "", Name = "Bing", Address = "http://www.bing.com/search?q=" };
        ListItem Google = new ListItem { Favicon = "", Name = "Google", Address = "http://www.google.com/search?q=" };
        ListItem Yahoo = new ListItem { Favicon = "", Name = "Yahoo", Address = "http://search.yahoo.com/search?p=" };
        ListItem Ask = new ListItem { Favicon = "", Name = "Ask", Address = "http://www.ask.com/web?q=" };
        ListItem Aol = new ListItem { Favicon = "", Name = "AOL", Address = "http://search.aol.com/search?q=" };

        Settings.SearchProvider.Value.Add(Bing);
        Settings.SearchProvider.Value.Add(Google);
        Settings.SearchProvider.Value.Add(Yahoo);
        Settings.SearchProvider.Value.Add(Ask);
        Settings.SearchProvider.Value.Add(Aol);

        // Set the data context of the SearchProviderListPicker control to the data
        DataContext = App.ViewModel;
    }

MainViewModel.cs

    public ObservableCollection<ListItem> SearchProvider { get; private set; }

    public MainViewModel()
    {
        SearchProvider = Settings.SearchProvider.Value;
    }

The Settings class referenced above is used to store the SearchProvider ObservableCollection in isolated storage.

Settings.cs

public static Setting<ObservableCollection<ListItem>> SearchProvider = new Setting<ObservableCollection<ListItem>>("SearchProvider", new ObservableCollection<ListItem>());

And the Setting class saves and gets the data from isolated storage. Also, my custom ListItem class demonstrates the properties I need to use.

ListItem.cs

public string Favicon
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public string Address
    {
        get;
        set;
    }

So basically each SearchProvider ObservableCollection item contains the Favicon, Name, and Address that I need to use, and I only want to bind the Favicon and Name to the ListPicker. My problem though, is the ListPicker presents the 5 search providers except the text for each says Project1.Common.ListItem where the ListItem class in in my Common folder. I must not be binding these correctly to the view, but I do not know how to properly accomplish this?

score 0 · Answer 1 · answered Sep 20 '12 at 06:32

0

Your ListPicker's templates are Static resources defined in Grid.Resources

Hence you have to change the ListPicker xaml code like the this

ItemTemplate="{Binding SearchProviderItemTemplate}"
FullModeItemTemplate="{Binding SearchProviderFullModeItemTemplate}"

replace the above two properties to the following

ItemTemplate="{StaticResource SearchProviderItemTemplate}"
FullModeItemTemplate="{StaticResource SearchProviderFullModeItemTemplate}"

answered Sep 20 '12 at 06:32

nkchandra

5,585
2
30
45

Thanks for your quick response. I tried your solution, but now nothing shows in up the ListPicker at all? – Matthew Sep 20 '12 at 07:17

score 0 · Answer 2 · answered Sep 20 '12 at 21:25

If you are getting 'Project1.Common.ListItem' as the text that means your binding is correct but there is a problem with your template.

The first correction is as given above, you need to use "StaticResource" instead of "Binding" when you are referring to templates.

Please recheck your template for any typos etc.

If i were you, i would first try to make it work without using the Settings class, See if that helps

How to bind an ObservableCollection to a Listpicker

2 Answers2