Windows Phone 中的 ListBox 导航页 MVVM Light

Question

我正在构建基于位置的服务 Windows Phone 应用程序，这是我的第一个应用程序。我在使用 MVVM Light 时页面导航有困难。我正在关注Jesse Liberty Tutorial，到目前为止，当我在 FirstPage 中单击 ListBox 上的项目时，它可以导航到 SecondPage。

我想要做的是，用户从FirstPage 中的ListBox 中选择的内容与SecondPage 中的ListPicker 绑定。所以用户可以很容易地从SecondPage更改他们想要搜索的内容。

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}" />

希望任何人都可以帮助我解决问题。

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");
    }
}

Answer 1

这是您需要两个 ViewModel 相互通信的典型情况。

在这种情况下，最好的方法是使用框架的Messaging 功能，尤其是因为您正在使用mvvm-light。

如果您需要这方面的帮助，您会在网络上找到大量示例和文档（查找 Laurent Bugnion 在 channel9 上的网络广播，例如 this one），实际上只需注册一个回调某种类型的消息，然后从其他地方发送。

这样，您的第一个视图模型会向您的第二个视图模型发送一条消息，说明已选择了哪个列表项。您的目标视图模型会自行更新以反映这一点。然后您的初始视图模型命令导航到目标页面，并且由于它使用目标视图模型，它运行良好。

Answer 2

有几种可能，我主要使用列表框的SelectedItem解决方案……但纯消息传递也是可以的。

看看类似的问题有解决方案here on stack overflow