MAUI开发问题：选择Autocomplete项后自动填充电话号码字段

1. 定义数据模型 #

首先创建包含姓名和电话号码的实体类：

public class Contact
{
    public string Name { get; set; }
    public string PhoneNumber { get; set; }
}

2. 推荐方案：MVVM模式实现 #

这种方式符合MAUI开发规范，代码解耦性更好。

2.1 编写ViewModel

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourAppNamespace;

public class MainViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Contact> _contacts;
    public ObservableCollection<Contact> Contacts
    {
        get => _contacts;
        set
        {
            _contacts = value;
            OnPropertyChanged();
        }
    }

    private Contact _selectedContact;
    public Contact SelectedContact
    {
        get => _selectedContact;
        set
        {
            _selectedContact = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        // 模拟联系人数据源
        Contacts = new ObservableCollection<Contact>
        {
            new Contact { Name = "张三", PhoneNumber = "13800138000" },
            new Contact { Name = "李四", PhoneNumber = "13900139000" },
            new Contact { Name = "王五", PhoneNumber = "13700137000" }
        };
    }

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

2.2 编写XAML界面

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>

    <VerticalStackLayout Padding="20" Spacing="15">
        <!-- Autocomplete控件 -->
        <telerik:RadAutoCompleteView 
            ItemsSource="{Binding Contacts}"
            DisplayMemberPath="Name"
            SelectedItem="{Binding SelectedContact, Mode=TwoWay}">
            <telerik:RadAutoCompleteView.NoResultsTemplate>
                <Label Text="未找到匹配的联系人" Margin="10" />
            </telerik:RadAutoCompleteView.NoResultsTemplate>
        </telerik:RadAutoCompleteView>

        <!-- 电话号码输入框 -->
        <Entry 
            Placeholder="自动填充电话号码"
            Text="{Binding SelectedContact.PhoneNumber, Mode=OneWay}"
            IsReadOnly="True" />
    </VerticalStackLayout>
</ContentPage>

3. 快速实现：事件处理模式 #

如果暂时不想用MVVM，可直接通过控件选择事件实现：

3.1 XAML界面

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="YourAppNamespace.MainPage">

    <VerticalStackLayout Padding="20" Spacing="15">
        <telerik:RadAutoCompleteView x:Name="ContactAutoComplete">
            <telerik:RadAutoCompleteView.NoResultsTemplate>
                <Label Text="未找到匹配的联系人" Margin="10" />
            </telerik:RadAutoCompleteView.NoResultsTemplate>
        </telerik:RadAutoCompleteView>

        <Entry x:Name="PhoneEntry" Placeholder="自动填充电话号码" IsReadOnly="True" />
    </VerticalStackLayout>
</ContentPage>

3.2 代码后台逻辑

using System.Collections.ObjectModel;

namespace YourAppNamespace;

public partial class MainPage : ContentPage
{
    private ObservableCollection<Contact> _contacts;

    public MainPage()
    {
        InitializeComponent();
        InitContacts();
        ContactAutoComplete.SelectionChanged += ContactAutoComplete_SelectionChanged;
    }

    private void InitContacts()
    {
        _contacts = new ObservableCollection<Contact>
        {
            new Contact { Name = "张三", PhoneNumber = "13800138000" },
            new Contact { Name = "李四", PhoneNumber = "13900139000" }
        };
        ContactAutoComplete.ItemsSource = _contacts;
        ContactAutoComplete.DisplayMemberPath = "Name";
    }

    private void ContactAutoComplete_SelectionChanged(object sender, Telerik.Maui.Controls.AutoCompleteView.SelectionChangedEventArgs e)
    {
        if (e.AddedItems?.FirstOrDefault() is Contact selectedContact)
        {
            PhoneEntry.Text = selectedContact.PhoneNumber;
        }
        else
        {
            PhoneEntry.Text = string.Empty;
        }
    }
}

注意事项 #

• 确保项目已正确引入“.NET MAUI and Xamarin Controls”组件库，并在XAML中添加对应命名空间（示例中用telerik命名空间，可根据实际使用的组件库调整）。
• 使用MVVM模式时，需确保BindingContext设置正确，可在XAML中声明或在页面构造函数中手动赋值：BindingContext = new MainViewModel();。

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