Binding in multiple views to ObservableCollection of selected items (MVVM, SL5)

Question

I'm using MVVM with Silverlight 5. What I want to achieve is to select items in a ListBox in one view (e.g. ListView.xaml) and display the selected items in a ListBox in another view (e.g. SelectionView.xaml).

My selected items are in an ObservableCollection<MyItem> (called SelectedItems) that is created via attached behaviour as described in this answer

The problem seems to be that I am using two different XAML files. If I bind a ListBox to SelectedItems in the same XAML file where the selection happens, the items show up in another ListBox in the same view without problems. But in a different file, the ListBox stays empty.

Both views use the same ViewModel as DataContext.

I would be very happy about some pointers in the right direction. I'm new to SL so perhaps I'm missing something obvious.

This is the code that works:

ListView.xaml

<UserControl x:Class="Silverlight5App.View.Content.ListView"
    xmlns:viewModel="clr-namespace:Silverlight5App.ViewModel"
    xmlns:behaviours="clr-namespace:Silverlight5App.Behaviours">


    <UserControl.Resources>
        <viewModel:XYPlotViewModel x:Key="ViewModelTest" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModelTest}}">
        <StackPanel>            
            <ListBox  ItemsSource="{Binding Path=XYPoints}"  behaviours:SelectedItems.Items="{Binding SelectedItems}" Name="XYPointsListbox" SelectionMode="Extended" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                            <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                            <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <ListBox ItemsSource="{Binding SelectedItems}"  Name="XYPointsListboxSelection">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                            <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                            <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</UserControl>

and this code just gives an empty listbox:

SelectionView.xaml

    <UserControl x:Class="Silverlight5App.View.Content.SelectionView"
    xmlns:viewModel="clr-namespace:Silverlight5App.ViewModel"     
    xmlns:behaviours="clr-namespace:Silverlight5App.Behaviours">

    <UserControl.Resources>
        <viewModel:XYPlotViewModel x:Key="ViewModelTest" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModelTest}}" >       
        <StackPanel>               
            <ListBox ItemsSource="{Binding Path=SelectedItems}"  Name="XYPointsListboxSelection2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                        <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                        <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        </StackPanel>
    </Grid>
</UserControl>

PS: syntax highlighting is set to language-all: lang-xml but doesn't seem to work?

Answer 1

You should use the same ViewModel Instance in order this to work.

You can do it by creating your view model as a Singleton and assign it not via the XAML, but by the code (in either the constructor, or in the PageLoaded Event).