在列表框选择更改上执行页面导航的正确方法是什么

Question

我正在尝试MVVM Light Toolkit。虽然我仍然认为为这样的小应用程序使用多个ViewModel是过分的，但我喜欢这些概念。我仍然无法理解的是，当ListBox中的选择更改时，如何（或者我应该说“推荐的方式”）从一个页面导航到另一个页面。

这个工具包的一个大问题是，在使用它之前，它会迫使你通过其他源学习MVVM，而不是向你展示MVVM在MVVM框架中的样子和文档。那里有样品显示不同的概念吗？请，没有视频。

Answer 1

您是否尝试修改您的ListBox ItemTemplate，让每个项目都是HyperlinkBut​​ton，并将NavigateURI属性设置为您要导航到的页面？

Answer 2

我还没有想出如何做到这一点（在选择在列表框中改变时导航到一个详细信息页面），没有任何代码隐藏在视图中。但是，如果你用具有此观点只是一个小代码隐藏OK就是我的建议：

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" 
    SelectionChanged="MainListBox_SelectionChanged" 
    SelectedItem="{Binding Path=SelectedListItem, Mode=TwoWay}"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
       <StackPanel Margin="0,0,0,17" Width="432"> 
        <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> 
        <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> 
       </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

首先，按照上述绑定到一个双向您的视图模型绑定到一个属性的列表框的SelectedItem属性（在上面的SelectedListItem）。

然后在你的代码隐藏这个页面落实处理程序MainListBox_SelectionChanged：

// Handle selection changed on ListBox 
    private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     // If selected index is -1 (no selection) do nothing 
     if (MainListBox.SelectedIndex == -1) 
      return; 

     // Navigate to the new page 
     NavigationService.Navigate(new Uri("/DetailsPage.xaml", UriKind.Relative)); 

    } 

这是你在你的主视图唯一需要的代码隐藏。

在你的主视图模型，你需要一个SelectedListItem属性：

public const string SelectedListItemPropertyName = "SelectedListItem"; 
    private ItemViewModel _SelectedListItem; 
    /// <summary> 
    /// Sample ViewModel property; this property is used in the view to display its value using a Binding 
    /// </summary> 
    /// <returns></returns> 
    public ItemViewModel SelectedListItem 
    { 
     get 
     { 
      return _SelectedListItem; 
     } 
     set 
     { 
      if (value != _SelectedListItem) 
      { 
       _SelectedListItem = value; 
       RaisePropertyChanged(SelectedListItemPropertyName); 
      } 
     } 
    } 

现在，问题来获取传递到您的详细信息页面（上下文是选择什么样的列表项）的情况下，你需要设置的DataContext在您的详细信息视图中：

public DetailsPage() 
{ 
    InitializeComponent(); 
    if (DataContext == null) 
     DataContext = App.ViewModel.SelectedListItem; 

} 

希望这会有所帮助。

Answer 3

最终你会想做的不仅仅是导航，在设置自定义对象之后可能会导航。

这是一个MVVM-light的方式。

你会首先要你的列表框中选择项目属性在你的视图模型绑定

<ListBox ItemsSource="{Binding Events}" Margin="0,0,-12,0" SelectedItem="{Binding SelectedEvent, Mode=TwoWay}"> 

声明你SelectedEvent财产

public const string SelectedEventPropertyName = "SelectedEvent"; 

    private Event _selectedEvent; 


    public Event SelectedEvent 
    { 
     get {return _selectedEvent;} 

     set 
     { 
      if (_selectedEvent == value) 
      { 
       return; 
      } 

      var oldValue = _selectedEvent; 
      _selectedEvent = value; 

      // Update bindings and broadcast change using GalaSoft.MvvmLight.Messenging 
      RaisePropertyChanged(SelectedEventPropertyName, oldValue, value, true); 
     } 
    } 

然后，您可以定义绑定到水龙头的交互触发事件

<i:Interaction.Triggers> 
    <i:EventTrigger EventName="Tap"> 
     <cmd:EventToCommand Command="{Binding EventPageCommand, Mode=OneWay}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

在你的viewmodel中，定义你的EventPageCommand作为RelayCommand：

public RelayCommand EventPageCommand { get; private set; } 
public MainViewModel() 
{ 
    EventPageCommand = new RelayCommand(GoToEventPage); 
} 

终于宣布你GoToEventPage方法

private void GoToEventPage() 
{ 
    _navigationService.NavigateTo(new Uri("/EventPage.xaml", UriKind.Relative)); 
} 

注释，您可以导航到新页面之前做其他动作，再加上从列表框中选择的项目目前设定在财产你也绑定它。