如何在Xamarin Forms中实现点击按钮弹出下拉菜单？解决按钮重叠问题

问题分析 #

你当前的代码中，RelativeLayout 内的三个按钮因未设置布局位置导致重叠，且缺少菜单显示/隐藏的控制逻辑。以下是两种实用方案，实现点击"Aktionen"按钮弹出垂直排列的下拉菜单：

方案1：使用内置 Expander 控件（推荐，Xamarin Forms 5.0+ 支持） #

Expander 是官方提供的原生控件，自带展开/收起功能，无需额外处理显示逻辑：

<Grid Grid.Row="1">
    <!-- 下拉菜单触发按钮 + 菜单内容 -->
    <Expander Grid.Column="0">
        <Expander.Header>
            <Button Text="Aktionen" FontSize="22" HorizontalOptions="StartAndExpand"
                    Style="{DynamicResource topActBtnStyle}"/>
        </Expander.Header>
        <Expander.Content>
            <StackLayout>
                <Button Text="Reset" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                        HorizontalOptions="StartAndExpand"/>
                <Button Text="Exit" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                        HorizontalOptions="StartAndExpand"/>
                <Button Text="Logout" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                        HorizontalOptions="StartAndExpand"/>
            </StackLayout>
        </Expander.Content>
    </Expander>

    <!-- 用户信息按钮 -->
    <Button Grid.Column="1" Text="{Binding UserNameText}" Style="{DynamicResource topActBtnStyle}"
            HorizontalOptions="EndAndExpand"/>
</Grid>

关键点：

• Expander 的 Header 作为触发按钮，点击自动展开/收起 Content 区域的菜单
• StackLayout 让三个按钮垂直排列，彻底解决重叠问题
• 直接复用你现有的 topActBtnStyle 保持样式统一

方案2：自定义显示/隐藏逻辑（适合低版本Xamarin Forms或需自定义动画场景） #

通过绑定属性控制菜单可见性，配合命令切换状态：

XAML 代码：

<Grid Grid.Row="1">
    <!-- 触发按钮 -->
    <Button Grid.Column="0" Text="Aktionen" FontSize="22" HorizontalOptions="StartAndExpand"
            Style="{DynamicResource topActBtnStyle}"
            Command="{Binding ToggleDropdownCommand}"/>

    <!-- 下拉菜单 -->
    <StackLayout Grid.Column="0" IsVisible="{Binding IsDropdownVisible}"
                 Margin="0,5,0,0"> <!-- 顶部留白区分触发按钮和菜单 -->
        <Button Text="Reset" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                HorizontalOptions="StartAndExpand"/>
        <Button Text="Exit" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                HorizontalOptions="StartAndExpand"/>
        <Button Text="Logout" Style="{DynamicResource topActBtnStyle}" FontSize="22"
                HorizontalOptions="StartAndExpand"/>
    </StackLayout>

    <!-- 用户信息按钮 -->
    <Button Grid.Column="1" Text="{Binding UserNameText}" Style="{DynamicResource topActBtnStyle}"
            HorizontalOptions="EndAndExpand"/>
</Grid>

对应 ViewModel 代码：

public class YourViewModel : INotifyPropertyChanged
{
    private bool _isDropdownVisible;
    public bool IsDropdownVisible
    {
        get => _isDropdownVisible;
        set
        {
            _isDropdownVisible = value;
            OnPropertyChanged();
        }
    }

    public ICommand ToggleDropdownCommand { get; }

    public YourViewModel()
    {
        ToggleDropdownCommand = new Command(() => 
        {
            IsDropdownVisible = !IsDropdownVisible;
        });
    }

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

关键点：

• IsDropdownVisible 属性控制菜单的显示/隐藏状态
• ToggleDropdownCommand 点击触发按钮时切换属性值
• StackLayout 垂直排列按钮，Margin 避免菜单和触发按钮紧贴

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