Xamarin Forms自定义下拉控件无法正常工作问题求助

看起来你在制作自定义下拉控件时遇到了卡点，我帮你梳理一下常见的问题根源，然后给出完整的可运行实现方案，涵盖可绑定属性、布局约束和交互逻辑这几个核心部分。

首先，先给出完整的Dropdown.xaml代码，确保RelativeLayout的约束正确，让ListView始终贴在Label下方：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomViewXam.CustomViews.Dropdown">
    <RelativeLayout x:Name="MainLayout">
        <!-- 显示选中项的Label，添加点击手势触发下拉 -->
        <Label x:Name="SelectedItemLabel"
               Text="{Binding SelectedItemText, Mode=TwoWay}"
               Padding="10,8"
               BackgroundColor="LightGray"
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=40}">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnLabelTapped"/>
            </Label.GestureRecognizers>
        </Label>

        <!-- 下拉列表ListView，默认隐藏 -->
        <ListView x:Name="DropdownList"
                  ItemsSource="{Binding ItemsSource}"
                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                  IsVisible="False"
                  BackgroundColor="White"
                  RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                  <!-- 关键约束：Y轴对齐Label的底部 -->
                  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=SelectedItemLabel, Property=Height, Factor=1}"
                  RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=200}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativeLayout>
</ContentView>

接下来是Dropdown.xaml.cs，重点是正确定义可绑定属性——这是很多自定义控件失效的核心原因：

using Xamarin.Forms;

namespace CustomViewXam.CustomViews
{
    public partial class Dropdown : ContentView
    {
        // 定义ItemsSource可绑定属性，用于绑定下拉选项列表
        public static readonly BindableProperty ItemsSourceProperty =
            BindableProperty.Create(nameof(ItemsSource), typeof(System.Collections.IEnumerable), typeof(Dropdown), null);

        // 定义SelectedItem可绑定属性，双向绑定选中项，添加属性变更回调
        public static readonly BindableProperty SelectedItemProperty =
            BindableProperty.Create(nameof(SelectedItem), typeof(object), typeof(Dropdown), null, BindingMode.TwoWay,
                propertyChanged: OnSelectedItemChanged);

        // 定义SelectedItemText可绑定属性，用于显示选中项的文本
        public static readonly BindableProperty SelectedItemTextProperty =
            BindableProperty.Create(nameof(SelectedItemText), typeof(string), typeof(Dropdown), "请选择");

        // 对应的CLR属性，必须调用GetValue/SetValue关联可绑定属性
        public System.Collections.IEnumerable ItemsSource
        {
            get => (System.Collections.IEnumerable)GetValue(ItemsSourceProperty);
            set => SetValue(ItemsSourceProperty, value);
        }

        public object SelectedItem
        {
            get => GetValue(SelectedItemProperty);
            set => SetValue(SelectedItemProperty, value);
        }

        public string SelectedItemText
        {
            get => (string)GetValue(SelectedItemTextProperty);
            set => SetValue(SelectedItemTextProperty, value);
        }

        public Dropdown()
        {
            InitializeComponent();
            // 将BindingContext设为自身，确保XAML中的绑定能关联到自定义控件的属性
            BindingContext = this;
        }

        // 点击Label切换下拉列表的显示状态
        private void OnLabelTapped(object sender, System.EventArgs e)
        {
            DropdownList.IsVisible = !DropdownList.IsVisible;
        }

        // SelectedItem变更时的回调：更新显示文本+自动隐藏列表
        private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var dropdown = (Dropdown)bindable;
            dropdown.SelectedItemText = newValue?.ToString() ?? "请选择";
            dropdown.DropdownList.IsVisible = false;
        }
    }
}

关键注意点（解决你控件失效的核心） #

1. 可绑定属性的规范定义：

   • 必须通过BindableProperty.Create创建静态属性，CLR属性只是包装，不能自己实现字段存储值。
   • SelectedItem设置了BindingMode.TwoWay和propertyChanged回调，确保选中项变更时能同步UI并自动隐藏列表。

2. RelativeLayout约束正确性：

   • ListView的YConstraint绑定到Label的Height，确保它始终在Label正下方，不会重叠或错位。
   • 宽度都绑定到父容器，保证控件自适应布局。

3. BindingContext的处理：

   • 在构造函数中设置BindingContext = this，让XAML中的绑定直接指向自定义控件自身的可绑定属性，避免和外部页面的BindingContext冲突。如果需要外部绑定，也可以改用RelativeSource，比如{Binding SelectedItem, RelativeSource={RelativeSource AncestorType={x:Type local:Dropdown}}}。

使用示例（在页面中调用自定义下拉控件） #

在MainPage.xaml中引入自定义控件：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:custom="clr-namespace:CustomViewXam.CustomViews"
             x:Class="CustomViewXam.MainPage">

    <StackLayout Padding="20">
        <custom:Dropdown ItemsSource="{Binding Fruits}"
                         SelectedItem="{Binding SelectedFruit}"
                         HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>

对应的MainPage.xaml.cs：

using System.Collections.Generic;
using Xamarin.Forms;

namespace CustomViewXam
{
    public partial class MainPage : ContentPage
    {
        public List<string> Fruits { get; set; } = new List<string>
        {
            "苹果", "香蕉", "橙子", "草莓", "芒果"
        };

        public string SelectedFruit { get; set; }

        public MainPage()
        {
            InitializeComponent();
            BindingContext = this;
        }
    }
}

排查如果还是不工作的情况 #

如果按照上面的代码实现后依然有问题，可以检查这几点：

• 确认可绑定属性的名称和XAML中的绑定名称完全一致（Xamarin Forms对大小写敏感）。
• 检查ListView的ItemsSource是否有数据，可以临时给个静态列表测试。
• 检查父布局是否开启了ClipToBounds，如果是，可能会把超出父布局的ListView部分裁剪掉。
• 确认没有其他布局元素遮挡了ListView，比如StackLayout的Spacing设置导致错位。

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