Xamarin Forms按钮绑定异常：添加绑定后页面内容不显示

核心问题：绑定引用错误导致页面加载失败 #

页面无法显示的直接原因是Button的Command绑定引用了不存在的控件：

Command="{Binding BindingContext.JoinEvent, Source={x:Reference Events}}"

这里Source={x:Reference Events}试图引用名为Events的控件，但你的<ListView>并未设置x:Name="Events"，XAML解析器找不到目标元素，引发绑定异常，导致整个页面无法正常渲染。

解决步骤 #

1. 修正Command绑定的Source引用 #

提供两种可靠的修正方式：

方式一：绑定到页面的BindingContext

给ContentPage添加x:Name="HomePage"：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:EventWebApp.ViewModels"
             x:Class="EventWebApp.Views.HomePage"
             x:Name="HomePage"
             Title="{Binding Title}">

然后修改Button的Command绑定：

<Button Grid.Column="0" Text="Join" Grid.ColumnSpan="2"
        Command="{Binding BindingContext.JoinEvent, Source={x:Reference HomePage}}" 
        CommandParameter="{Binding .}" />

方式二：给ListView设置对应名称

直接给ListView添加x:Name="Events"：

<ListView x:Name="Events" ItemsSource="{Binding Events}" HasUnevenRows="True">

这样原有的Command绑定就能正常找到目标控件。

2. 修正属性绑定的大小写问题 #

XAML中绑定的userId与ViewModel里的UserId（大写开头）大小写不匹配，会导致绑定失效，修改Label的绑定：

<Label Text="{Binding UserId}"/>

3. 实现INotifyPropertyChanged接口，确保属性更新同步UI #

你的ViewModel未实现INotifyPropertyChanged，导致Title等属性更新时UI无法同步变化。修改HomeViewModel：

public class HomeViewModel : EventsInterface, INotifyPropertyChanged
{
    private string _title;
    public string Title
    {
        get => _title;
        set
        {
            if (_title != value)
            {
                _title = value;
                OnPropertyChanged();
            }
        }
    }

    private int _userId;
    public int UserId
    {
        get => _userId;
        private set
        {
            if (_userId != value)
            {
                _userId = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

    // 原有构造函数、JoinEvent命令、OnJoin方法等代码保持不变
}

4. 确认Events集合的有效性 #

确保EventsInterface中正确定义了Events集合（如public ObservableCollection<Event> Events { get; set; }），若接口未定义，需在ViewModel中补充：

public ObservableCollection<Event> Events { get; set; } = new ObservableCollection<Event>();

验证效果 #

完成以上修改后，页面可正常显示，点击Join按钮会触发OnJoin方法，弹出预期的提示框。

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