ListBox Navigation Page MVVM Light in Windows Phone

Question

I am Building location based services Windows Phone App and this is my first app. I have a difficulty in page navigation by using MVVM Light. I am following Jesse Liberty Tutorial and so far, when I click the item on my ListBox in the FirstPage, it can navigate to SecondPage.

What I want to do is, what user select from ListBox in the FirstPage bind with my ListPicker in the SecondPage. So user can easily change what they want to search from SecondPage.

enter image description here

MainPage.xaml

<ListBox x:Name="MainMenu" ItemTemplate="{StaticResource MainMenu}" ItemsSource="{Binding Categories}" Margin="0,97,0,0">
    <Custom:Interaction.Triggers>
        <Custom:EventTrigger EventName="SelectionChanged">
            <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MainMenuCommand, Mode=OneWay}"/>
        </Custom:EventTrigger>
    </Custom:Interaction.Triggers>
</ListBox>

MainPage.xaml.cs

public MainPage()
{
    InitializeComponent();

    Messenger.Default.Register<CategoryModel>(this,c => NavigationService.Navigate(new Uri("/Views/VenueList.xaml", UriKind.Relative)));
}

MainViewModel.cs

public MainViewModel()
{
     MainMenuCommand = new RelayCommand<CategoryModel>((msg) => GoToVenueList(msg));
}

public RelayCommand<CategoryModel> MainMenuCommand
{
    get;
    private set;
}

private void GoToVenueList(CategoryModel msg)
{
    Messenger.Default.Send(msg);
}

private CategoryModel _selectedItem;
public CategoryModel SelectedItem
{
    get { return _selectedItem; }
    set
    {
        if (_selectedItem == value)
        {
            return;
        }

        var oldValue = _selectedItem;
        _selectedItem = value;

        RaisePropertyChanged("SelectedItem", oldValue, value, true);
    }
}

VenueList.xaml

<toolkit:ListPicker Margin="0,153,0,0" Background="{StaticResource PhoneAccentBrush}" VerticalAlignment="Top"
                            SelectedItem="{Binding Item, Mode=TwoWay}"
                            ItemsSource="{Binding Categories}"
                            ItemTemplate="{StaticResource CategorySelector}" FullModeHeader="Category" FullModeItemTemplate="{StaticResource FullCategorySelector}" BorderBrush="{StaticResource PhoneAccentBrush}" />

Hope anyone can help my problem.

VenueListViewModel

public VenueListViewModel()
{
    Messenger.Default.Register<PropertyChangedMessage<CategoryModel>>(
        this,
        (action) => Item = action.NewValue
    );
}

private CategoryModel _item;
public CategoryModel Item
{
    get
    {
        return _item;
    }
    set
    {
        if (_item == value)
        {
            return;
        }

        _item = value;

        // Update bindings, no broadcast
        RaisePropertyChanged("Item");
    }
}

Qortex Qortex · Accepted Answer · 2013-02-25T20:44:05

This is a typical case where you need two ViewModels to communicate with eachother.

In that situation, the best way to go, especially because you are using mvvm-light is to use the Messaging capabilities of the framework.

If you need some assistance on that, you'll find plenty of examples and documentation on the web (look for Laurent Bugnion's webcasts on channel9, for example this one), it is really just a matter of registering a callback for a certain type of messages and then sending them from elsewhere.

That way, your first viewmodel sends a message to your second viewmodel stating what list item has been selected. Your target viewmodel updates itself to reflect this. Then your initial viewmodel command navigates to the target page, and as it uses the target viewmodel it works well.

ListBox Navigation Page MVVM Light in Windows Phone

2 Answers