.NET MAUI 자동 완성 컨트롤 소개

20352 단어 mobile dotnet csharp maui

자동 완성 컨트롤은 모바일 앱 개발자가 가장 많이 요청한 컨트롤 중 하나였습니다. Syncfusion에서 이 필수 컨트롤에 대한 요구 사항을 이해하고 이제 .NET MAUI Autocomplete 릴리스에서 2022 Volume 3 컨트롤을 제공했습니다.

이 문서에서는 새로운 .NET MAUI 자동 완성 컨트롤의 주요 기능과 이를 시작하는 단계를 살펴봅니다.

.NET MAUI 자동완성

.NET MAUI Autocomplete 컨트롤은 사용자의 입력 문자에 따라 방대한 양의 데이터에서 제안을 로드하고 채우도록 고도로 최적화되어 있습니다. 이를 통해 사용자는 제안 목록에서 하나 이상의 항목을 선택할 수 있습니다. 입력 보기에서 선택한 항목을 텍스트로 표시하고 닫기 버튼을 탭하면 텍스트를 제거합니다.

.NET MAUI 자동완성 시작하기

이 섹션에서는 .NET MAUI 자동 완성 컨트롤을 시작하고 데이터로 채우고 제안을 필터링하는 단계를 설명합니다.

1단계: Syncfusion .NET MAUI 구성 요소는 NuGet Gallery에서 사용할 수 있습니다. 프로젝트에 SfAutoComplete를 추가하려면 Visual Studio에서 NuGet 패키지 관리자를 엽니다. Syncfusion.Maui.Inputs 를 검색한 다음 NuGet 패키지를 설치합니다.

2단계 : 그런 다음 MauiProgram.cs 파일에 Syncfusion 코어용 핸들러를 등록합니다.

using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.ListView.Hosting;

public static class MauiProgram
{
 public static MauiApp CreateMauiApp()
 {
  var builder = MauiApp.CreateBuilder();
  builder
  .UseMauiApp<App>()
  .ConfigureSyncfusionCore()
  .ConfigureSyncfusionListView()
  .ConfigureFonts(fonts =>
  {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
  });
  return builder.Build();
 }
}

3단계: XAML 페이지에서 SfAutoComplete 네임스페이스를 가져옵니다.

xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"

4단계: 그런 다음 다음 코드와 같이 빈 자동 완성 컨트롤을 초기화합니다.

<inputs:SfAutocomplete x:Name="autocomplete" WidthRequest="200"/>

5단계: 이제 제안 목록을 채우는 데 필요한 데이터를 만듭니다. 여기에는 예제 Person 클래스 생성과 Person 개체 목록이 있는 PersonsViewModel이 포함됩니다.

public class Person
{
 public string Name { get; set; }
 public string SecondName { get; set; }
}
public class PersonsViewModel : INotifyPropertyChanged
{
 readonly IList<Person> source;
 Person selectedPerson;
 private string selectedItem;
 public ObservableCollection<Person> Persons { get; private set; }
 public List<string> Items { get; private set; }
 public Person SelectedPerson
 {
  get
  {
    return selectedPerson;
  }
  set
  {
    if (selectedPerson != value)
    {
      selectedPerson = value;
      OnPropertyChanged("SelectedPerson");
    }
  }
}
public string SelectedItem
{
 get
 {
  return selectedItem;
 }
 set
 {
  if (selectedItem != value)
  {
   selectedItem = value;
   OnPropertyChanged("SelectedItem");
  }
 }
}
public PersonsViewModel()
{
  source = new List<Person>();
  CreatePersonCollection();

  SelectedPerson = Persons.Skip(3).FirstOrDefault();
}
void CreatePersonCollection()
{
  for (int i = 0; i < 1; i++)
  {
   source.Add(new Person { Name = "Adam", SecondName = "A" });
   source.Add(new Person { Name = "Bob", SecondName = "A" });
   source.Add(new Person { Name = "John", SecondName = "D" });
   source.Add(new Person { Name = "Alan", SecondName = "E" });
   source.Add(new Person { Name = "Alex", SecondName = "F" });
   source.Add(new Person { Name = "Jacob", SecondName = "R" });
   source.Add(new Person { Name = "Peter", SecondName = "J" });
   source.Add(new Person { Name = "Clark", SecondName = "L" });
   source.Add(new Person { Name = "Ben", SecondName = "A" });
   source.Add(new Person { Name = "Dave", SecondName = "S" });
  }
  Persons = new ObservableCollection<Person>(source);
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
  PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}

6단계: 마지막으로 바인딩 컨텍스트를 PersonsViewModel로 설정하고 ItemsSource를 Persons 목록과 바인딩하고 DisplayMemberPath 속성을 Name 속성과 바인딩합니다.

<ContentPage.BindingContext>
  <local:PersonsViewModel/>
</ContentPage.BindingContext>
<inputs:SfAutocomplete WidthRequest="200"
                       ItemsSource="{Binding Persons}"
                       DisplayMemberPath="Name"/>

그게 다야. 이제 .NET MAUI Autocomplete 컨트롤이 준비되었습니다.

.NET MAUI 자동 완성 컨트롤

.NET MAUI 자동 완성의 주요 기능

텍스트 검색 모드

.NET MAUI Autocomplete 컨트롤의 TextSearchMode 속성은 사용자 입력을 받을 때 컨트롤의 동작을 조절합니다. 사용 가능한 텍스트 필터 모드는 다음과 같습니다.

스타트위드

함유

자리표시자 텍스트

PlaceholderText 속성은 Autocomplete 컨트롤을 사용하여 검색할 수 있는 정보를 사용자에게 묻습니다. 이 텍스트는 선택된 항목이 없고 편집 텍스트가 비어 있는 경우에만 표시됩니다. PlaceholderText 속성의 기본값은 string.Empty입니다(문자열이 표시되지 않음).

다음 코드 예제를 참조하십시오.

<inputs:SfAutocomplete WidthRequest="200" 
                       HeightRequest="40"
                       ItemsSource="{Binding Persons}"
                       TextSearchMode="StartsWith"
                       PlaceholderText="Search"
                       DisplayMemberPath="Name"/>

자리 표시자 텍스트가 있는 .NET MAUI 자동 완성

색상 사용자 지정

또한 다음 코드 예제와 같이 테두리 색상, 자리 표시자 텍스트, 텍스트 색상 및 지우기 버튼 아이콘 색상을 사용자 지정할 수 있습니다.

<inputs:SfAutocomplete WidthRequest="200" 
                       HeightRequest="30"
                       ItemsSource="{Binding Persons}"
                       TextSearchMode="StartsWith"
                       PlaceholderText="Search"
                       ClearButtonIconColor="DeepPink"
                       PlaceholderTextColor="HotPink"
                       TextColor="DeepPink"
                       DisplayMemberPath="Name"/>

예정된 기능

이것은 Syncfusion .NET MAUI Autocomplete 컨트롤의 초기 버전입니다. 다음 릴리스에서 다음 기능을 기대할 수 있습니다.

칩 UI가 포함된 다중 선택

분음 부호 민감도

항목 템플릿

텍스트 일치 하이라이트

드롭다운 머리글 및 바닥글

사용자 정의 필터링

결론

읽어 주셔서 감사합니다! 이 블로그에서는 .NET MAUI Autocomplete 릴리스에서 사용할 수 있는 새로운2022 Volume 3 컨트롤의 기능을 살펴보았습니다. 다른 업데이트를 보려면 Release Notes 및 What’s New 페이지를 확인하십시오. Essential studio for .NET MAUI을 다운로드하여 이 컨트롤을 평가할 수 있습니다.

support forum , support portal 또는 feedback portal 을 통해 저희에게 연락하실 수 있습니다. 기꺼이 도와드리겠습니다!

.NET MAUI 자동 완성 컨트롤 소개