如何修改StackLayout/Grid中Xamarin ComboBox下拉框高度及焦点事件问题

1. 修改StackLayout/Grid中ComboBox下拉框的高度 #

直接利用ComboBox的DropDownHeight属性指定固定高度，不受父布局（StackLayout/Grid）影响。在你的XAML代码中添加该属性即可：

<combobox:ComboBox x:Name="ComboProduct"                                      
                  ItemsSource="{Binding FilteredProductList}"    
                  Placeholder="Type 3 characters or more"
                  SelectedItem="{Binding Path=ProductInput,Mode=TwoWay}"  
                  EntryDisplayPath="Name"     
                  TextChanged="ComboProduct_TextChanged" 
                  Visual="Material"  
                  Focused="ComboProduct_Focused" 
                  Unfocused="ComboProduct_Unfocused"
                  DropDownHeight="350"> <!-- 设置下拉框固定高度 -->

    <combobox:ComboBox.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}" Padding="5,5,0,0"/>
            </ViewCell>
        </DataTemplate>
    </combobox:ComboBox.ItemTemplate>
</combobox:ComboBox>

若需要限制最大高度，可搭配MaxDropDownHeight属性使用。

2. 实现下拉框高度的动态修改 #

通过数据绑定将DropDownHeight关联到ViewModel的可绑定属性，实现高度的动态调整：

步骤1：ViewModel中定义可绑定属性 #

确保ViewModel实现INotifyPropertyChanged接口：

public class ProductViewModel : INotifyPropertyChanged
{
    private int _dropDownHeight = 200;
    public int DropDownHeight
    {
        get => _dropDownHeight;
        set
        {
            _dropDownHeight = value;
            OnPropertyChanged();
        }
    }

    // 其他业务属性与方法...

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

步骤2：XAML中绑定属性 #

<combobox:ComboBox x:Name="ComboProduct"                                      
                  ItemsSource="{Binding FilteredProductList}"    
                  Placeholder="Type 3 characters or more"
                  SelectedItem="{Binding Path=ProductInput,Mode=TwoWay}"  
                  EntryDisplayPath="Name"     
                  TextChanged="ComboProduct_TextChanged" 
                  Visual="Material"  
                  Focused="ComboProduct_Focused" 
                  Unfocused="ComboProduct_Unfocused"
                  DropDownHeight="{Binding DropDownHeight}"> <!-- 绑定到ViewModel属性 -->

    <combobox:ComboBox.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}" Padding="5,5,0,0"/>
            </ViewCell>
        </DataTemplate>
    </combobox:ComboBox.ItemTemplate>
</combobox:ComboBox>

步骤3：动态调整高度 #

比如根据筛选后的列表数量动态计算高度：

private void ComboProduct_TextChanged(object sender, TextChangedEventArgs e)
{
    var viewModel = BindingContext as ProductViewModel;
    if (viewModel == null) return;

    // 按条目数量计算高度，限制在200-400之间
    var itemCount = viewModel.FilteredProductList.Count;
    viewModel.DropDownHeight = Math.Clamp(itemCount * 50, 200, 400);
}

3. 解决ComboBox的Focus与Unfocus事件无法正常工作的问题 #

针对Visual="Material"下事件失效的场景，提供以下三种解决方案：

方案1：替换为Command绑定 #

使用FocusedCommand和UnfocusedCommand替代传统事件：

XAML修改：

<combobox:ComboBox x:Name="ComboProduct"                                      
                  ItemsSource="{Binding FilteredProductList}"    
                  Placeholder="Type 3 characters or more"
                  SelectedItem="{Binding Path=ProductInput,Mode=TwoWay}"  
                  EntryDisplayPath="Name"     
                  TextChanged="ComboProduct_TextChanged" 
                  Visual="Material"
                  FocusedCommand="{Binding ComboFocusedCommand}"
                  UnfocusedCommand="{Binding ComboUnfocusedCommand}">

    <combobox:ComboBox.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}" Padding="5,5,0,0"/>
            </ViewCell>
        </DataTemplate>
    </combobox:ComboBox.ItemTemplate>
</combobox:ComboBox>

ViewModel中添加命令：

public ICommand ComboFocusedCommand { get; }
public ICommand ComboUnfocusedCommand { get; }

public ProductViewModel()
{
    ComboFocusedCommand = new Command(OnComboFocused);
    ComboUnfocusedCommand = new Command(OnComboUnfocused);
}

private void OnComboFocused()
{
    // 处理焦点获取逻辑
}

private void OnComboUnfocused()
{
    // 处理焦点失去逻辑
}

方案2：移除Material视觉 #

若不需要Material样式，直接删除Visual="Material"属性，默认视觉下事件可正常触发：

<combobox:ComboBox x:Name="ComboProduct"                                      
                  ItemsSource="{Binding FilteredProductList}"    
                  Placeholder="Type 3 characters or more"
                  SelectedItem="{Binding Path=ProductInput,Mode=TwoWay}"  
                  EntryDisplayPath="Name"     
                  TextChanged="ComboProduct_TextChanged"
                  Focused="ComboProduct_Focused" 
                  Unfocused="ComboProduct_Unfocused">

方案3：自定义渲染器处理原生控件焦点 #

针对Android和iOS分别实现自定义渲染器，监听原生控件的焦点事件：

Android渲染器：

[assembly: ExportRenderer(typeof(ComboBox), typeof(CustomComboBoxRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomComboBoxRenderer : ComboBoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ComboBox> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.EditText.FocusChange += EditText_FocusChange;
            }
        }

        private void EditText_FocusChange(object sender, Android.Views.View.FocusChangeEventArgs e)
        {
            var element = Element as ComboBox;
            if (e.HasFocus)
                element?.Focused?.Invoke(element, new FocusEventArgs());
            else
                element?.Unfocused?.Invoke(element, new FocusEventArgs());
        }

        protected override void Dispose(bool disposing)
        {
            if (Control != null)
                Control.EditText.FocusChange -= EditText_FocusChange;
            base.Dispose(disposing);
        }
    }
}

iOS渲染器：

[assembly: ExportRenderer(typeof(ComboBox), typeof(CustomComboBoxRenderer))]
namespace YourApp.iOS.Renderers
{
    public class CustomComboBoxRenderer : ComboBoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ComboBox> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.TextField.DidBeginEditing += TextField_DidBeginEditing;
                Control.TextField.DidEndEditing += TextField_DidEndEditing;
            }
        }

        private void TextField_DidBeginEditing(object sender, EventArgs e)
        {
            Element?.Focused?.Invoke(Element, new FocusEventArgs());
        }

        private void TextField_DidEndEditing(object sender, EventArgs e)
        {
            Element?.Unfocused?.Invoke(Element, new FocusEventArgs());
        }

        protected override void Dispose(bool disposing)
        {
            if (Control != null)
            {
                Control.TextField.DidBeginEditing -= TextField_DidBeginEditing;
                Control.TextField.DidEndEditing -= TextField_DidEndEditing;
            }
            base.Dispose(disposing);
        }
    }
}

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