Xamarin Forms：平板端非折叠主从布局的MVVM导航实现需求

针对你需要的左侧固定菜单+右侧内容同屏展示（无折叠/重叠）的需求，放弃MasterDetailPage，改用Grid布局配合MVVM导航逻辑实现，具体方案如下：

1. 核心布局结构（XAML） #

使用Grid实现固定分栏，左侧占25%宽度作为菜单区，右侧占75%作为内容区，完全避免折叠逻辑：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:YourApp.Converters"
             x:Class="YourApp.MainPage">
    <ContentPage.Resources>
        <converters:BoolToColorConverter x:Key="BoolToColorConverter" />
    </ContentPage.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <!-- 平板固定分栏，手机可通过OnIdiom调整为0隐藏菜单 -->
            <ColumnDefinition Width="{OnIdiom Tablet=0.25*, Phone=0}" />
            <ColumnDefinition Width="{OnIdiom Tablet=0.75*, Phone=*}" />
        </Grid.ColumnDefinitions>

        <!-- 左侧固定菜单 -->
        <StackLayout Grid.Column="0" BackgroundColor="#f5f5f5" Padding="12">
            <CollectionView 
                ItemsSource="{Binding MenuItems}"
                SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
                SelectionMode="Single"
                Margin="0,20,0,0">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label 
                            Text="{Binding Title}"
                            FontSize="Medium"
                            Padding="10,8"
                            CornerRadius="4"
                            BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}}"
                            TextColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter=text}" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>

        <!-- 右侧内容展示区（动态切换页面） -->
        <ContentView Grid.Column="1" Content="{Binding CurrentPageView}" />
    </Grid>
</ContentPage>

2. MVVM导航逻辑实现 #

菜单实体类 #

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourApp.Models
{
    public class MenuItem : INotifyPropertyChanged
    {
        public string Title { get; set; }
        public Type PageType { get; set; }
        
        private bool _isSelected;
        public bool IsSelected
        {
            get => _isSelected;
            set { _isSelected = value; OnPropertyChanged(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

主ViewModel（导航核心） #

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using YourApp.Models;
using Xamarin.Forms;

namespace YourApp.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<MenuItem> _menuItems;
        public ObservableCollection<MenuItem> MenuItems
        {
            get => _menuItems;
            set { _menuItems = value; OnPropertyChanged(); }
        }

        private MenuItem _selectedMenuItem;
        public MenuItem SelectedMenuItem
        {
            get => _selectedMenuItem;
            set 
            { 
                // 取消上一个选中项的高亮
                if (_selectedMenuItem != null)
                    _selectedMenuItem.IsSelected = false;
                _selectedMenuItem = value;
                if (_selectedMenuItem != null)
                {
                    _selectedMenuItem.IsSelected = true;
                    SwitchContentPage(_selectedMenuItem.PageType);
                }
                OnPropertyChanged();
            }
        }

        private View _currentPageView;
        public View CurrentPageView
        {
            get => _currentPageView;
            set { _currentPageView = value; OnPropertyChanged(); }
        }

        // 页面缓存，避免重复创建实例
        private readonly Dictionary<Type, View> _pageCache = new Dictionary<Type, View>();

        public MainViewModel()
        {
            LoadMenuItems();
            // 默认选中第一个菜单项
            SelectedMenuItem = MenuItems.FirstOrDefault();
        }

        private void LoadMenuItems()
        {
            MenuItems = new ObservableCollection<MenuItem>
            {
                new MenuItem { Title = "首页", PageType = typeof(HomePage) },
                new MenuItem { Title = "设置中心", PageType = typeof(SettingsPage) },
                new MenuItem { Title = "数据统计", PageType = typeof(StatsPage) }
            };
        }

        private void SwitchContentPage(Type pageType)
        {
            // 优先从缓存取页面
            if (_pageCache.TryGetValue(pageType, out var cachedView))
            {
                CurrentPageView = cachedView;
                return;
            }

            // 反射创建新页面，并绑定其ViewModel
            var page = (Page)Activator.CreateInstance(pageType);
            // 如果使用依赖注入，可在此注入页面ViewModel：
            // page.BindingContext = ServiceLocator.Current.GetInstance(pageType.GenericTypeArguments[0]);
            
            _pageCache.Add(pageType, page.Content);
            CurrentPageView = page.Content;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

选中状态转换器 #

实现菜单项选中时的高亮效果：

using System;
using System.Globalization;
using Xamarin.Forms;

namespace YourApp.Converters
{
    public class BoolToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var isSelected = (bool)value;
            if (parameter?.ToString() == "text")
                return isSelected ? Color.White : Color.Black;
            return isSelected ? Color.FromHex("#2563EB") : Color.Transparent;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

3. 关键优化点 #

• 平板/手机适配：通过OnIdiom在手机端隐藏左侧菜单，改用抽屉导航（可选）
• 页面缓存：用Dictionary缓存已创建的页面View，提升切换性能
• 依赖注入集成：如果使用Prism、MvvmCross等框架，可替换反射创建页面的逻辑，直接注入ViewModel和页面实例
• 菜单交互增强：可给菜单项添加点击命令，替代SelectedItem绑定，逻辑更灵活

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