ListPicker not working with MVVM Light

2
votes

I am building a simple windown phone 7 Page. I'm doing MVVM (using MVVM light) and binding a List<Category> type property to ListPicker. This property is defined in a view model named AddExpenseViewModel like below

public class AddExpenseViewModel:ViewModelBase 
{
    public List<Category> Categories
    {
        get { return categories; }
        set
        {
            categories = value;
            RaisePropertyChanged("Categories");
        }
    }
}

Category class is defined as 

public class Category
{
    public string Name { get; set; }
}

In my XAML I first define a resource as

<UserControl.Resources> <bs:ViewModelLocator x:Key="ViewModelLocator" /> </UserControl.Resources>

Then set the DataContext of the grid that contains the ListPicker as 

<Grid x:Name="ContentPanel" 
              Grid.Row="1" 
              Margin="13,1,11,-1" 
              DataContext="{Binding Path=AddExpenseViewModel, 
                                    Source={StaticResource ViewModelLocator}}">

And here is my XAML for ListPicker

<toolkit:ListPicker 
            HorizontalAlignment="Left" 
            Height="50" 
            Width="200" 
            Grid.Row="2" 
            Grid.Column="1" 
            DataContext="{Binding AddExpenseViewModel}"
            ItemsSource="{Binding Path=Categories, Mode=OneWay}" >
            <toolkit:ListPicker.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border Background="LightGreen" Width="*" Height="*">
                            <TextBlock Text="{Binding Name}"></TextBlock>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </toolkit:ListPicker.ItemTemplate>
</toolkit:ListPicker>`

This does not work. The ListPicker is always empty. Am I doing anything wrong here?

3
windows-phone-7mvvmmvvm-lightlistpicker

3 Answers

1
votes

Do you see any Xaml binding errors in the output while running your application?

You also shouldn't have to bind the DataContext on the ListPicker if you are doing it on a parent element (your Grid). This could be your issue, but the binding errors should give some detailed info.

1
votes

After lot of fire-fighting I got this to work myself. Here is what I changed to get this to work

I introduced a new class as below

public class Categories : ObservableCollection<Category>
{
}

Then I changed the property Categories on my AddExpenseViewModel as below

public Categories Categories
{
    get { return categories; }
    set
    {
        categories = value;
        RaisePropertyChanged("Categories");
   }
}
private Categories categories;

Then I changed the ItemsSource on listpicker as

ItemsSource="{Binding Path=Categories}"

This has got it working.

0
votes

Having the Key of your resource being the same as the type is likely the issue. You could change the case or rename entirely.

Try:

<bs:ViewModelLocator x:Key="locator" />

and 

DataContext="{Binding AddExpenseViewModel, Source={StaticResource locator}}"

You also shouldn't need to set the DataContext of the Grid and the ListPicker to the same thing. If you're only using the VML in the ListPicker I wouldn't set it on the grid also.

You should use a TwoWay binding with a ListPicker as it needs to track the selected Item