Windows Phone中的列表框导航页MVVM指示灯 [英] ListBox Navigation Page MVVM Light in Windows Phone

问题描述

我正在构建基于位置的服务Windows Phone应用程序，这是我的第一个应用程序.我在使用MVVM Light进行页面导航时遇到困难.我正在追踪 Jesse Liberty教程到目前为止，当我单击FirstPage上列表框上的项目时，它可以导航到SecondPage.

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.

我想做的是，用户从FirstPage的ListBox中选择的内容与SecondPage中的我的ListPicker绑定.因此，用户可以轻松地从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.

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

推荐答案

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

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

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

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

如果您需要帮助，可以在网上找到很多示例和文档(在channel9上查找Laurent Bugnion的网络广播，例如

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.

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

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.

这篇关于Windows Phone中的列表框导航页MVVM指示灯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！