Xamarin.Forms如何将页面绑定到ObservableCollection中的菜单项？

1. 扩展菜单模型类 #

先在你的菜单数据模型里新增一个属性，用来存储对应页面的类型：

public class MenuItem
{
    public string Title { get; set; }
    // 存储对应跳转页面的类型
    public Type TargetPageType { get; set; }
}

接着更新你的ObservableCollection数据源，给每个菜单项指定对应的页面：

public ObservableCollection<MenuItem> MenuItems { get; set; }

public YourViewModel()
{
    MenuItems = new ObservableCollection<MenuItem>
    {
        new MenuItem { Title = "首页", TargetPageType = typeof(HomePage) },
        new MenuItem { Title = "设置", TargetPageType = typeof(SettingsPage) },
        // 其他菜单项按此格式添加
    };
}

2. 用MVVM模式处理导航（推荐） #

在ViewModel里添加命令属性，处理菜单点击后的导航逻辑：

public ICommand MenuItemTappedCommand { get; }

public YourViewModel()
{
    MenuItemTappedCommand = new Command<MenuItem>(OnMenuItemTapped);
    // 初始化MenuItems的代码...
}

private void OnMenuItemTapped(MenuItem selectedItem)
{
    if (selectedItem?.TargetPageType == null) return;
    // 实例化目标页面并跳转
    var targetPage = (Page)Activator.CreateInstance(selectedItem.TargetPageType);
    Application.Current.MainPage.Navigation.PushAsync(targetPage);
}

对应的XAML（以CollectionView为例）：

<CollectionView ItemsSource="{Binding MenuItems}"
                Command="{Binding MenuItemTappedCommand}"
                CommandParameter="{Binding .}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Title}" Padding="12,8" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 直接在页面后台处理导航（非MVVM场景） #

如果用ListView，可绑定ItemSelected事件：

<ListView ItemsSource="{Binding MenuItems}"
          ItemSelected="OnMenuItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Title}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

后台代码实现跳转：

private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    var selectedItem = e.SelectedItem as MenuItem;
    if (selectedItem?.TargetPageType == null) return;
    
    var targetPage = (Page)Activator.CreateInstance(selectedItem.TargetPageType);
    Navigation.PushAsync(targetPage);
    // 取消选中状态，避免重复触发
    ((ListView)sender).SelectedItem = null;
}

关键注意点 #

• 确保你的主页面被NavigationPage包裹，否则无法使用PushAsync：

// 在App.xaml.cs的构造函数中
MainPage = new NavigationPage(new MainMenuPage());

• 如果页面需要传递参数，可以在MenuItem模型里新增object PageParameter属性，实例化页面时手动传递参数。

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