.NET Maui 如何创建带描述的输入字段？

你可以通过自定义Entry控件的样式来实现图中的简易输入字段效果，以下是具体实现步骤：

1. 基础XAML实现 #

直接在页面中添加Entry控件并设置相关属性，就能快速得到类似效果：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.MainPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <!-- 简易输入字段 -->
        <Entry Placeholder="请输入内容"
               BackgroundColor="#F0F0F0"
               BorderColor="#CCCCCC"
               CornerRadius="8"
               HeightRequest="45"
               Padding="15,0"
               PlaceholderColor="#999999"/>
    </StackLayout>
</ContentPage>

属性说明 #

• Placeholder：设置输入框的提示文本，对应图中的灰色占位文字
• BackgroundColor：设置浅灰色背景，匹配图中输入框的底色
• BorderColor：设置灰色边框，实现图中的边框效果
• CornerRadius：设置圆角，让输入框边角更圆润
• HeightRequest：指定输入框高度，保证视觉上的舒适感
• Padding：调整内部文本边距，避免文字贴边
• PlaceholderColor：自定义占位文本的灰色色调

2. 使用样式资源统一管理 #

如果需要在多个页面复用该输入框样式，可以定义页面级或全局样式：

<ContentPage.Resources>
    <Style x:Key="CustomInputEntry" TargetType="Entry">
        <Setter Property="BackgroundColor" Value="#F0F0F0"/>
        <Setter Property="BorderColor" Value="#CCCCCC"/>
        <Setter Property="CornerRadius" Value="8"/>
        <Setter Property="HeightRequest" Value="45"/>
        <Setter Property="Padding" Value="15,0"/>
        <Setter Property="PlaceholderColor" Value="#999999"/>
        <!-- 可选：添加聚焦时的样式变化 -->
        <Style.Triggers>
            <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                <Setter Property="BorderColor" Value="#007AFF"/>
                <Setter Property="BackgroundColor" Value="#FFFFFF"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ContentPage.Resources>

使用样式时只需引用即可：

<Entry Placeholder="请输入内容" Style="{StaticResource CustomInputEntry}"/>

3. 处理输入事件（可选） #

如果需要获取或处理输入的文本，可以绑定TextChanged事件：

XAML中添加事件绑定 #

<Entry Placeholder="请输入内容" 
       Style="{StaticResource CustomInputEntry}"
       TextChanged="OnInputTextChanged"/>

后台代码实现事件逻辑 #

private void OnInputTextChanged(object sender, TextChangedEventArgs e)
{
    string inputText = e.NewTextValue;
    // 这里可以添加文本验证、数据保存等逻辑
}

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