我有以下代码,但我不明白为什么不显示菜单项。我确实已经尝试了很多,但在我看来这应该有效。
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>
我试图让我的问题和代码尽可能小,以找出问题的根源。
也许你们中的某个人可以进一步帮助我。
我看到你使用了
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
,因为它会引发错误。