切换页面时如何修改弹出菜单中对应选中项的图片源

问题根因 #

1. HomeMenuItem类没有实现属性变更通知，你直接修改Source属性后，绑定了该属性的菜单UI收不到变更通知，自然不会刷新。首次加载生效是因为此时UI还未渲染，绑定的是修改后的初始值，后续切换页面时UI已经渲染完成，没有变更通知就不会更新展示。
2. 直接在子页面构造函数中修改静态列表的元素值，状态变更逻辑分散，很容易出现旧图标恢复和新图标设置的时序冲突，导致逻辑失效。

解决步骤 #

第一步：改造HomeMenuItem类，实现属性变更通知 #

public class HomeMenuItem : INotifyPropertyChanged
{
    private string _source;
    public string Source 
    { 
        get => _source; 
        set 
        { 
            _source = value;
            OnPropertyChanged(nameof(Source));
        } 
    }
    // 其他属性按需按同样格式改造即可
    public MenuItemType Id { get; set; }
    public string Title { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

第二步：统一在MenuPage中处理图标切换逻辑，移除各子页面中修改菜单图标的代码 #

首先在MenuPage中存储默认图标映射、当前选中项的标识：

public static List<HomeMenuItem> menuItems;
// 存储所有菜单项的默认图标，用于切换时恢复
private Dictionary<MenuItemType, string> _defaultIconMap = new Dictionary<MenuItemType, string>();
// 记录当前处于选中状态的菜单项ID
private MenuItemType _currentSelectedId;

public MenuPage()
{   
    InitializeComponent();

    menuItems = new List<HomeMenuItem>
    {
        new HomeMenuItem {Id = MenuItemType.Dashboard, Title="Dashboard", Source="Dashboard.png"},
        new HomeMenuItem {Id = MenuItemType.Anagrafica, Title="Anagrafica", Source="Anagrafica.png"},
        new HomeMenuItem {Id = MenuItemType.Marchi, Title="Marchi", Source="Marchi2.png"},
        new HomeMenuItem {Id = MenuItemType.Matrici, Title="Matrici", Source="Matrici.png"},
        new HomeMenuItem {Id = MenuItemType.Documenti, Title="Documenti", Source="Documenti.png"}
    };

    // 初始化默认图标映射
    foreach (var item in menuItems)
    {
        _defaultIconMap.Add(item.Id, item.Source);
    }

    // 初始化默认选中项的橙色图标，按需修改默认选中项即可
    _currentSelectedId = MenuItemType.Dashboard;
    menuItems.First(x => x.Id == _currentSelectedId).Source = "DashboardArancione.png";

    // 给菜单列表控件绑定选中事件，此处控件名替换为你实际的菜单列表名
    MenuListView.ItemSelected += OnMenuItemSelected;
}

然后实现菜单选中事件的处理逻辑，统一处理旧图标恢复、新图标设置：

private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (e.SelectedItem is HomeMenuItem selectedItem)
    {
        // 先恢复上一个选中项的默认图标
        menuItems.First(x => x.Id == _currentSelectedId).Source = _defaultIconMap[_currentSelectedId];
        // 设置当前选中项的橙色图标，橙色图标命名如果不符合规则可以单独写映射匹配
        selectedItem.Source = $"{selectedItem.Id}Arancione.png";
        // 更新当前选中项记录
        _currentSelectedId = selectedItem.Id;

        // 此处添加你原有的切换页面逻辑
        // ......

        // 取消选中高亮，避免下次点击同一项不触发选中事件
        ((ListView)sender).SelectedItem = null;
    }
}

注意事项 #

• 确认所有橙色图标的命名、路径、资源生成操作和默认图标配置一致，避免出现资源找不到的问题
• 如果你使用的是MAUI框架，建议用字体图标替换图片图标，仅需修改图标颜色属性即可，不需要维护两套图片资源

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