Xamarin Forms添加菜单磁贴：无需渲染器/效果的实现方案咨询

嘿，这个需求完全可以用Xamarin Forms原生控件和MVVM模式搞定，根本不需要碰渲染器或者效果，而且代码易维护、扩展性强。下面是我认为最靠谱的实现方案：

磁贴本质就是可点击的绑定容器，我们只需要把磁贴和你的菜单项数据模型绑定，点击时触发导航或菜单展开逻辑，同时和原有左侧展开菜单共享同一数据源，实现联动效果。

1. 定义菜单项数据模型 #

先创建一个包含磁贴和展开菜单所需属性的ViewModel，记得实现INotifyPropertyChanged来支持数据绑定：

public class MenuItemViewModel : INotifyPropertyChanged
{
    public string Title { get; set; }
    public string IconSource { get; set; }
    public Type TargetPageType { get; set; }
    
    private bool _isExpanded;
    public bool IsExpanded
    {
        get => _isExpanded;
        set
        {
            _isExpanded = value;
            OnPropertyChanged();
        }
    }
    
    public ObservableCollection<MenuItemViewModel> SubItems { get; set; } = new();

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

2. 构建Master Page的磁贴布局 #

用BindableLayout配合FlexLayout来动态生成磁贴（自动换行、自适应布局），每个磁贴用Frame做容器，添加点击手势：

<MasterDetailPage.Master>
    <ContentPage Title="菜单" Padding="10">
        <ScrollView>
            <!-- 用FlexLayout实现磁贴网格布局 -->
            <FlexLayout Direction="Row" Wrap="Wrap" AlignItems="Center" 
                        JustifyContent="SpaceAround" Spacing="10">
                <BindableLayout.ItemsSource>
                    <Binding Path="MainMenuItems" />
                </BindableLayout.ItemsSource>
                
                <!-- 磁贴模板 -->
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Frame CornerRadius="8" BackgroundColor="#f5f5f5" 
                               Padding="15" WidthRequest="120" HeightRequest="120">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type local:MenuViewModel}}, Path=TapCommand}"
                                                      CommandParameter="{Binding .}" />
                            </Frame.GestureRecognizers>
                            
                            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                                <Image Source="{Binding IconSource}" WidthRequest="40" HeightRequest="40" />
                                <Label Text="{Binding Title}" HorizontalTextAlignment="Center" 
                                       Margin="0,8,0,0" FontSize="Small" />
                            </StackLayout>
                            
                            <!-- 点击动画，不用效果就能实现 -->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="#e0e0e0" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Frame>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </FlexLayout>
        </ScrollView>
    </ContentPage>
</MasterDetailPage.Master>

3. 实现点击逻辑（ViewModel层） #

在菜单的主ViewModel里添加命令，处理磁贴点击的导航或菜单展开逻辑：

public class MenuViewModel
{
    public ObservableCollection<MenuItemViewModel> MainMenuItems { get; set; }
    public ICommand TapCommand { get; }

    public MenuViewModel()
    {
        TapCommand = new Command<MenuItemViewModel>(OnMenuItemTapped);
        
        // 初始化菜单项数据
        MainMenuItems = new ObservableCollection<MenuItemViewModel>
        {
            new() { Title = "首页", IconSource = "home_icon.png", TargetPageType = typeof(HomePage) },
            new() { Title = "设置", IconSource = "settings_icon.png", TargetPageType = typeof(SettingsPage) },
            // 带子项的父菜单
            new() 
            { 
                Title = "更多", 
                IconSource = "more_icon.png",
                SubItems = new()
                {
                    new() { Title = "关于", TargetPageType = typeof(AboutPage) }
                }
            }
        };
    }

    private void OnMenuItemTapped(MenuItemViewModel item)
    {
        // 如果是父菜单，切换展开状态
        if (item.SubItems.Count > 0)
        {
            item.IsExpanded = !item.IsExpanded;
        }
        // 如果是子菜单/单级菜单，导航到目标页面
        else if (item.TargetPageType != null)
        {
            var targetPage = (Page)Activator.CreateInstance(item.TargetPageType);
            Application.Current.MainPage.Detail = new NavigationPage(targetPage);
            // 关闭Master页面
            ((MasterDetailPage)Application.Current.MainPage).IsPresented = false;
        }
    }
}

4. 和原有展开菜单联动 #

如果你的左侧展开菜单是用ListView实现的，只需要让它绑定同一个MainMenuItems集合，然后根据IsExpanded属性控制子项显示：

<!-- 原有展开菜单的ListView ItemTemplate示例 -->
<DataTemplate>
    <ViewCell>
        <StackLayout>
            <Label Text="{Binding Title}" Padding="10" />
            <!-- 子项列表，根据IsExpanded控制显示 -->
            <ListView ItemsSource="{Binding SubItems}" 
                      IsVisible="{Binding IsExpanded}" 
                      HeightRequest="{Binding SubItems.Count, Converter={StaticResource CountToHeightConverter}}" />
        </StackLayout>
    </ViewCell>
</DataTemplate>

• 可以用DataTrigger给父/子菜单磁贴设置不同样式（比如父磁贴加边框）
• 如果需要更复杂的磁贴布局，把Frame换成ContentView自定义样式
• 给导航逻辑加加载状态，避免重复点击

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