毛伊岛应用程序菜单项未正确显示

Question

我有以下代码，但我不明白为什么不显示菜单项。我确实已经尝试了很多，但在我看来这应该有效。

using System.Collections.Generic;
using Microsoft.Maui.Controls;

namespace SideManagementTool
{
    public class MenuItem
    {
        public string Icon { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }

    public partial class MainPage : ContentPage
    {
        public List<MenuItem> MenuItems { get; set; }

        public MainPage()
        {
            InitializeComponent();

            // Define the menu items using local images
            MenuItems = new List<MenuItem>
            {
                new MenuItem { Icon = "icon_dashboard.png", Title = "Dashboard", Description = "Overview of activities" },
                new MenuItem { Icon = "icon_projects.png", Title = "Projects", Description = "Manage your projects" },
                new MenuItem { Icon = "icon_notifications.png", Title = "Notifications", Description = "Check notifications" },
                new MenuItem { Icon = "icon_analytics.png", Title = "Analytics", Description = "View analytics data" },
                new MenuItem { Icon = "icon_items.png", Title = "Items", Description = "Manage items" },
                new MenuItem { Icon = "icon_settings.png", Title = "Settings", Description = "Configure settings" }
            };

            // Set the BindingContext to self so that the XAML can access the properties
            BindingContext = this;
        }

        // Command for handling item click
        public Command<MenuItem> OnMenuItemClicked => new Command<MenuItem>((item) =>
        {
            DisplayAlert("Menu Clicked", $"You clicked on {item.Title}", "OK");
        });
    }
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SideManagementTool.MainPage"
             BackgroundColor="#5AA1D7"
             Shell.NavBarIsVisible="False">

    <Grid RowDefinitions="*" ColumnDefinitions="Auto,*">

        <!-- Sidebar -->
        <Frame Grid.Row="0" Grid.Column="0" 
               BackgroundColor="LightGray" 
               WidthRequest="250" 
               VerticalOptions="FillAndExpand"
               CornerRadius="0">

            <VerticalStackLayout Padding="10">
                <!-- Header -->
                <Label Text="CodingLab" FontSize="24" FontAttributes="Bold" HorizontalOptions="Center" />

                <!-- Menu Items List -->
                <CollectionView ItemsSource="{Binding MenuItems}" SelectionMode="None">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="10" ColumnDefinitions="Auto,*">
                                <!-- Icon -->
                                <Image Source="{Binding Icon}" WidthRequest="20" HeightRequest="20" VerticalOptions="Center" />

                                <!-- Text -->
                                <VerticalStackLayout Grid.Column="1" Spacing="2" Padding="10,0,0,0">
                                    <Label Text="{Binding Title}" FontSize="16" TextColor="Black" />
                                    <Label Text="{Binding Description}" FontSize="12" TextColor="Gray" />
                                </VerticalStackLayout>

                                <!-- Hover and Click Animations -->
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter TargetName="Grid" Property="BackgroundColor" Value="#E0E0E0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter TargetName="Grid" Property="BackgroundColor" Value="#B0B0B0" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>

                                <!-- Tap Gesture for Click Animation -->
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={x:Reference Name=MainPage}, Path=OnMenuItemClicked}" />
                                </Grid.GestureRecognizers>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </VerticalStackLayout>
        </Frame>

        <!-- Main Content -->
        <ContentView Grid.Row="0" Grid.Column="1" 
                     BackgroundColor="White" 
                     Padding="20"
                     VerticalOptions="FillAndExpand"
                     HorizontalOptions="FillAndExpand">
            <Label Text="Content goes here" FontSize="24" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="Black" />
        </ContentView>

    </Grid>
</ContentPage>

我试图让我的问题和代码尽可能小，以找出问题的根源。

也许你们中的某个人可以进一步帮助我。

Answer 1

我看到你使用了

x:Reference

绑定表达式，如下所示，

 <Grid.GestureRecognizers>
     <TapGestureRecognizer Command="{Binding Source={x:Reference Name=MainPage}, Path=OnMenuItemClicked}" />
 </Grid.GestureRecognizers>

我完全理解你想要什么，尽管你必须做出一些改变。

当您想使用 x:Reference 设置绑定源时，您应该首先设置 ContentPage 的

x:Name

，如下所示，

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         ...
         BackgroundColor="#5AA1D7"
         Shell.NavBarIsVisible="False"
         x:Name="this">

<TapGestureRecognizer Command="{Binding Source={x:Reference Name=this}, Path=OnMenuItemClicked}" />

请注意，不要将名称设置为

MainPage

，因为它会引发错误。