Xamarin Forms：点击按钮切换Entry可见性及外部点击隐藏问题求助

我来帮你搞定这个需求！这种显示隐藏的交互在Xamarin.Forms里其实不难实现，结合XAML和一点代码逻辑就能完美解决。下面是完整的实现方案，分两种方式给你——直接用Code-Behind的快速实现，还有更符合架构规范的MVVM模式实现：

这种方式适合简单场景，直接在页面的代码文件里处理事件逻辑。

1. 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"
             x:Class="YourAppNamespace.HideShowEntryPage">
    <!-- 根布局用Grid铺满整个页面，添加TapGestureRecognizer捕捉空白区域点击 -->
    <Grid x:Name="MainPageGrid">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnPageBlankTapped" />
        </Grid.GestureRecognizers>

        <!-- 垂直布局容器，居中放置按钮和输入框 -->
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="10">
            <!-- 切换按钮：点击切换Entry显示状态 -->
            <Button Text="显示/隐藏输入框" 
                    Clicked="OnToggleButtonClicked">
                <!-- 阻止事件冒泡：点击按钮时不触发Grid的Tap事件 -->
                <Button.GestureRecognizers>
                    <TapGestureRecognizer CancelTouchesInView="True"/>
                </Button.GestureRecognizers>
            </Button>
            
            <!-- 输入框：初始设置为隐藏 -->
            <Entry x:Name="InputEntry"
                   Placeholder="请输入内容"
                   IsVisible="False"/>
        </StackLayout>
    </Grid>
</ContentPage>

2. 代码隐藏逻辑 #

using Xamarin.Forms;

namespace YourAppNamespace
{
    public partial class HideShowEntryPage : ContentPage
    {
        public HideShowEntryPage()
        {
            InitializeComponent();
        }

        // 按钮点击事件：切换输入框的显示/隐藏状态
        private void OnToggleButtonClicked(object sender, EventArgs e)
        {
            InputEntry.IsVisible = !InputEntry.IsVisible;
            // 优化体验：显示输入框时自动获取焦点
            if (InputEntry.IsVisible)
            {
                InputEntry.Focus();
            }
        }

        // 页面空白区域点击事件：隐藏输入框
        private void OnPageBlankTapped(object sender, EventArgs e)
        {
            if (InputEntry.IsVisible)
            {
                InputEntry.IsVisible = false;
            }
        }
    }
}

如果你的项目采用MVVM架构，这种方式更符合代码分层的规范，逻辑和视图分离。

1. 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:vm="clr-namespace:YourAppNamespace.ViewModels"
             x:Class="YourAppNamespace.HideShowEntryMVVMPage">
    <!-- 设置ViewModel为页面的绑定上下文 -->
    <ContentPage.BindingContext>
        <vm:HideShowEntryViewModel/>
    </ContentPage.BindingContext>

    <Grid>
        <Grid.GestureRecognizers>
            <!-- 绑定隐藏输入框的命令 -->
            <TapGestureRecognizer Command="{Binding HideEntryCommand}"/>
        </Grid.GestureRecognizers>

        <StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="10">
            <Button Text="显示/隐藏输入框" 
                    Command="{Binding ToggleEntryVisibilityCommand}">
                <Button.GestureRecognizers>
                    <TapGestureRecognizer CancelTouchesInView="True"/>
                </Button.GestureRecognizers>
            </Button>
            
            <!-- 绑定输入框的可见性和文本 -->
            <Entry Placeholder="请输入内容"
                   IsVisible="{Binding IsEntryVisible}"
                   Text="{Binding InputText}"/>
        </StackLayout>
    </Grid>
</ContentPage>

2. ViewModel代码 #

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using Xamarin.Forms;

namespace YourAppNamespace.ViewModels
{
    public class HideShowEntryViewModel : INotifyPropertyChanged
    {
        private bool _isEntryVisible;
        // 绑定输入框的可见性
        public bool IsEntryVisible
        {
            get => _isEntryVisible;
            set
            {
                _isEntryVisible = value;
                OnPropertyChanged();
            }
        }

        private string _inputText;
        // 绑定输入框的文本内容
        public string InputText
        {
            get => _inputText;
            set
            {
                _inputText = value;
                OnPropertyChanged();
            }
        }

        // 切换输入框可见性的命令
        public ICommand ToggleEntryVisibilityCommand { get; }
        // 隐藏输入框的命令
        public ICommand HideEntryCommand { get; }

        public HideShowEntryViewModel()
        {
            ToggleEntryVisibilityCommand = new Command(ToggleVisibility);
            HideEntryCommand = new Command(HideEntry);
        }

        private void ToggleVisibility()
        {
            IsEntryVisible = !IsEntryVisible;
            // 如果需要自动获取焦点，可以通过MessagingCenter通知页面处理
            // MessagingCenter.Send(this, "FocusEntry");
        }

        private void HideEntry()
        {
            if (IsEntryVisible)
            {
                IsEntryVisible = false;
            }
        }

        // 实现INotifyPropertyChanged接口，通知UI更新
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

• 事件冒泡处理：必须给按钮添加TapGestureRecognizer并设置CancelTouchesInView="True"，否则点击按钮时会同时触发Grid的Tap事件，导致输入框刚显示就被隐藏。
• 布局选择：根布局用Grid是因为它能铺满整个页面，确保点击任何空白区域都能触发隐藏逻辑；如果用StackLayout，只有StackLayout覆盖的区域会响应点击。
• 用户体验优化：显示输入框时调用Focus()可以让用户直接开始输入，提升交互流畅度。

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