如何为Xamarin.Forms ListView实现MVVM：迁移ItemSelected逻辑至ViewModel

Got it, let's walk through how to move the OnItemSelected logic from your ItemsPage to the ItemsViewModel properly. The key here is shifting from event-based handling in the page to viewmodel-driven data binding, while working around the fact that viewmodels shouldn't directly depend on page navigation APIs (unless you use a service pattern, which we'll cover too).

Step 1: Update the XAML to Bind SelectedItem to the ViewModel #

First, we need to replace the hardcoded ItemSelected event in your ListView with a data binding to a property in your ItemsViewModel. This lets the viewmodel react when an item is selected.

Modify your ListView XAML like this:

<ListView x:Name="ItemsListView" 
          ItemsSource="{Binding Items}" 
          VerticalOptions="FillAndExpand" 
          HasUnevenRows="true" 
          RefreshCommand="{Binding LoadItemsCommand}" 
          IsPullToRefreshEnabled="true" 
          IsRefreshing="{Binding IsBusy, Mode=OneWay}" 
          CachingStrategy="RecycleElement"
          SelectedItem="{Binding SelectedItem, Mode=TwoWay}" >

We removed the ItemSelected="OnItemSelected" attribute and added SelectedItem="{Binding SelectedItem, Mode=TwoWay}" instead. This syncs the selected item between the ListView and the viewmodel.

Step 2: Implement the ViewModel Logic (Two Approaches) #

There are two common ways to handle navigation from the viewmodel—choose the one that fits your app's architecture:

Approach 1: Pass Navigation Reference to the ViewModel (Simple & Direct) #

If you don't mind a light dependency on INavigation, you can pass the page's navigation instance to the viewmodel. This is straightforward for smaller apps.

Update ItemsPage Constructor

Remove the old OnItemSelected method and pass Navigation to the viewmodel:

public partial class ItemsPage : ContentPage {
    ItemsViewModel viewModel;

    public ItemsPage() {
        InitializeComponent();
        // Pass the page's Navigation instance to the viewmodel
        viewModel = new ItemsViewModel(Navigation);
        BindingContext = viewModel;
    }

    // Remove the original OnItemSelected method entirely
}

Update ItemsViewModel

Add a SelectedItem property and handle navigation in its setter:

public class ItemsViewModel : BaseViewModel { // Assuming you inherit from a base viewmodel with SetProperty
    private readonly INavigation _navigation;
    private Item _selectedItem;

    public ObservableCollection<Item> Items { get; }
    public ICommand LoadItemsCommand { get; }

    public Item SelectedItem {
        get => _selectedItem;
        set {
            SetProperty(ref _selectedItem, value);
            // Trigger selection logic when the property changes
            OnItemSelected(value);
        }
    }

    // Constructor that accepts INavigation
    public ItemsViewModel(INavigation navigation) {
        _navigation = navigation;
        Items = new ObservableCollection<Item>();
        LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());
    }

    private async void OnItemSelected(Item item) {
        if (item == null) return;

        // Navigate to the detail page using the passed navigation instance
        await _navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));
        
        // Reset SelectedItem to null so tapping the same item again triggers selection
        SelectedItem = null;
    }

    // Keep your existing ExecuteLoadItemsCommand implementation
    private async Task ExecuteLoadItemsCommand() {
        // ... your existing logic here
    }
}

Approach 2: Use Messaging to Decouple ViewModel and Page (Loose Coupling) #

If you want to keep your viewmodel completely independent of page APIs, use MessagingCenter (or the newer WeakReferenceMessenger from MvvmHelpers) to send a navigation request from the viewmodel to the page.

Update ItemsViewModel

Send a message when an item is selected, and reset the SelectedItem:

public class ItemsViewModel : BaseViewModel {
    private Item _selectedItem;

    public ObservableCollection<Item> Items { get; }
    public ICommand LoadItemsCommand { get; }

    public Item SelectedItem {
        get => _selectedItem;
        set {
            SetProperty(ref _selectedItem, value);
            OnItemSelected(value);
        }
    }

    public ItemsViewModel() {
        Items = new ObservableCollection<Item>();
        LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());
    }

    private void OnItemSelected(Item item) {
        if (item == null) return;

        // Send a message to the page to trigger navigation
        MessagingCenter.Send(this, "NavigateToDetail", item);
        
        // Reset SelectedItem to allow re-selection
        SelectedItem = null;
    }

    // Existing ExecuteLoadItemsCommand logic...
}

Update ItemsPage to Listen for the Message

Register to receive the navigation message, and handle the navigation in the page:

public partial class ItemsPage : ContentPage {
    ItemsViewModel viewModel;

    public ItemsPage() {
        InitializeComponent();
        BindingContext = viewModel = new ItemsViewModel();

        // Subscribe to the navigation message
        MessagingCenter.Subscribe<ItemsViewModel, Item>(this, "NavigateToDetail", async (sender, item) => {
            await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));
        });
    }

    // Unsubscribe when the page disappears to avoid memory leaks
    protected override void OnDisappearing() {
        base.OnDisappearing();
        MessagingCenter.Unsubscribe<ItemsViewModel, Item>(this, "NavigateToDetail");
    }
}

Key Notes #

• Resetting SelectedItem: Setting SelectedItem = null after navigation ensures that tapping the same item again will trigger the selection logic (since the property changes from null to the item again).
• Architecture Considerations: Approach 1 is great for small to medium apps where simplicity matters. Approach 2 is better for larger apps where you want strict separation of concerns.
• MvvmHelpers/CommunityToolkit: If you're using libraries like Xamarin Community Toolkit, consider using WeakReferenceMessenger instead of MessagingCenter—it's more performant and avoids some memory leak risks.

内容的提问来源于stack exchange，提问作者DevX