Visual Studio中Netflix克隆应用VerticalOptions属性绑定错误求助

错误信息 #

级别 代码 描述 项目 文件 行 抑制状态 错误 XFC0009 未找到“VerticalOptions”对应的属性、BindableProperty或事件，或者值与属性类型不匹配。NetflixCloneApp

问题场景 #

开发Netflix克隆应用时，自定义控件MovieInfoBox已正确定义Media绑定属性，但在MainPage中使用该控件并设置VerticalOptions="End"时触发上述错误。

相关代码 #

MovieInfoBox.xaml.cs

using NetflixCloneApp.Models;

namespace NetflixCloneApp.Controls;

public partial class MovieInfoBox : ContentPage
{
    public static readonly BindableProperty MediaProperty =
        BindableProperty.Create(nameof(Media), typeof(Media), typeof(MovieInfoBox), null);
    public MovieInfoBox()
    {
        InitializeComponent();
    }

    public Media Media 
    { get => (Media)GetValue(MovieInfoBox.MediaProperty); 
      set => SetValue(MovieInfoBox.MediaProperty, value);
    }
}

HomeViewModel

using CommunityToolkit.Mvvm.ComponentModel;
using NetflixCloneApp.Models;
using NetflixCloneApp.Services;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace NetflixCloneApp.ViewModels
{
    public partial class HomeViewModel : ObservableObject
    {
        private readonly TmdbService _tmdbService;
        public HomeViewModel(TmdbService tmdbService)
        {
            _tmdbService = tmdbService;
        }
        [ObservableProperty]
        private Media _trendingMovie;

        [ObservableProperty]
        private Media _selectedMedia;
        public ObservableCollection<Media> Trending { get; set; } = new();
        public ObservableCollection<Media> TopRated { get; set; } = new();
        public ObservableCollection<Media> NetflixOriginals { get; set; } = new();
        public ObservableCollection<Media> ActionMovies { get; set; } = new();

        public async Task InitializeAsync()
        {
            var trendingListTask =  _tmdbService.GetTrendingAsync();
            var netflixOriginalsListTask =  _tmdbService.GetNetflixOriginalsAsync();
            var topRatedListTask =  _tmdbService.GetTopRatedAsync();
            var actionListTask =  _tmdbService.GetActionAsync();

            var medias = await Task.WhenAll(trendingListTask,
                                            netflixOriginalsListTask,
                                            topRatedListTask,
                                            actionListTask);

            var trendingList = medias[0];
            var netflixOriginalsList = medias[1];
            var topRatedList = medias[2];
            var actionList = medias[3];

            TrendingMovie = trendingList.OrderBy(t => Guid.NewGuid())
                               .FirstOrDefault(t => 
                               !string.IsNullOrWhiteSpace(t.DisplayTitle)
                               && !string.IsNullOrWhiteSpace(t.Thumbnail));

            SetMediaCollection(trendingList, Trending);
            SetMediaCollection(netflixOriginalsList, NetflixOriginals);
            SetMediaCollection(topRatedList, TopRated);
            SetMediaCollection(actionList, ActionMovies);

            SelectedMedia = TrendingMovie;
        }
        private static void SetMediaCollection(IEnumerable<Media> medias, ObservableCollection<Media> collecion)
        {
            collecion.Clear();
            foreach (var media in medias)
            {
                collecion.Add(media);
            }
        }
    }
}

MainPage XAML

<controls:MovieInfoBox Media="{Binding SelectedMedia}"
                       VerticalOptions="End"></controls:MovieInfoBox>

解决方案 #

错误原因：MovieInfoBox继承了ContentPage，而ContentPage是页面级根元素，不具备VerticalOptions这类子布局属性。VerticalOptions属于View派生的可嵌入控件（如ContentView、StackLayout）的布局属性，用于控制控件在父布局中的对齐方式。

需做两处修改：

1. 修改控件基类：将MovieInfoBox的基类从ContentPage改为ContentView

using NetflixCloneApp.Models;

namespace NetflixCloneApp.Controls;

public partial class MovieInfoBox : ContentView // 替换ContentPage为ContentView
{
    public static readonly BindableProperty MediaProperty =
        BindableProperty.Create(nameof(Media), typeof(Media), typeof(MovieInfoBox), null);
    
    public MovieInfoBox()
    {
        InitializeComponent();
    }

    public Media Media 
    { 
        get => (Media)GetValue(MovieInfoBox.MediaProperty); 
        set => SetValue(MovieInfoBox.MediaProperty, value);
    }
}

2. 同步修改XAML根元素：如果MovieInfoBox有对应的XAML文件，需将根标签从<ContentPage>改为<ContentView>

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NetflixCloneApp.Controls.MovieInfoBox">
    <!-- 保留原控件内容 -->
</ContentView>

修改完成后，MovieInfoBox作为可嵌入的子控件，就能正常使用VerticalOptions属性，错误即可消除。

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