ViewModel or Model binding with Caliburn.Micro

Question

This is more of a MVVM question than a caliburn question, but it relates to how I can accomplish it with caliburn.

I am new to Sliverlight/WP7 development so please let me know if I'm not describing myself good enough.

I have caliburn.micro wired in properly to a WP7 app with phonecontainer/simplecontainer and viewmodels etc. The problem I am running into, is how to properly bind a collection of model's to the screen.

For instance I have the following model:

SummaryItem
{
    int Id
    string Name
    string Description
}

And the corresponding viewmodel:

SummaryViewModel : Conductor<IScreen>.Collection.OneActive
{
    ObservableCollection<SummaryItem> SummaryItems;

    OnInitialize()
    {
        SummaryItems = // REST api call to load items
    }
}

And the view:

         <ListBox x:Name="SummaryItems" Height="617" HorizontalAlignment="Left" VerticalAlignment="Top" Width="468" Background="Transparent">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Width="460" Height="120">
                        <Button.Content>
                            <StackPanel Orientation="Horizontal" Height="120" Width="400">
                                <TextBlock Text="{Binding Id}" Height="120" FontSize="40" Width="350" />
                                <TextBlock Text="{Binding Name}" Height="120" FontSize="40" Width="350" />
                                <TextBlock Text="{Binding Description}" FontSize="40" Width="50" TextAlignment="Right" />
                            </StackPanel>
                        </Button.Content>
                    </Button>
                    <ContentControl cal:View.Model="{Binding}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

My question is, What is the proper way in silverlight/caliburn to bind a collection of model objects to the view that you will use in navigation. As you can see, when someone clicks one of the buttons I will make another rest api call on the next viewmodel to get that items data and shot it on the screen. However, I can't get the items to appear on the screen using that listbox code. I tried using ItemsSource=SummaryItems, and that worked but it doesn't seem to be situated how the samples are seutp. I've noticed in the samples, that the Items property is used on the viewmodel's and I'm not sure how this integrates with the model objects.

I probably just don't have a clear view of how binding works in all these situations and how caliburn integrates with that. Could anyone point me in the right direction?

Any help would be greatly appreciated. Thanks!

Sean

Answer 1

You need to add the items to your ObservableCollection rather than creating a new ObservableCollection from the call:

SummaryViewModel : Conductor<IScreen>.Collection.OneActive
{
    private readonly ObservableCollection<SummaryItem> _items;
    public ObservableCollection<SummaryItem> SummaryItems 
    {
        get 
        {
            return _items;
        }
    }
    ObservableCollection<SummaryItem> SummaryItems;

    public SummaryViewModel() 
    {
        _items = new ObservableCollection<SummaryItem>();
    }

    protected override void OnInitialize()
    {
        var items = MyRestCall();
        SummaryItems.Clear();
        foreach(SummaryItem s in items)
        {
            SummaryItems.Add(s);
        }
    }
}