다음을 통해 공유

SearchBar

  • 아티클

.NET 다중 플랫폼 앱 UI(.NET MAUI) SearchBar 는 검색을 시작하는 데 사용되는 사용자 입력 컨트롤입니다. 컨트롤은 SearchBar 자리 표시자 텍스트, 쿼리 입력, 검색 실행 및 취소를 지원합니다. 다음 iOS 스크린샷은 다음과 같은 SearchBar 결과가 표시된 쿼리를 ListView보여줍니다.

SearchBar의 스크린샷.

SearchBar는 다음 속성을 정의합니다.

  • CancelButtonColor 는 취소 단추의 색을 정의하는 Color />입니다.
  • HorizontalTextAlignment 는 TextAlignment 쿼리 텍스트의 가로 맞춤을 정의하는 열거형 값입니다.
  • SearchCommand 는 ICommand viewmodel에 정의된 명령에 손가락 탭 또는 클릭과 같은 사용자 작업을 바인딩할 수 있도록 하는 것입니다.
  • SearchCommandParameter 은 object 에 전달되어야 하는 매개 변수를 지정하는 입니다 SearchCommand.
  • VerticalTextAlignment 는 TextAlignment 쿼리 텍스트의 세로 맞춤을 정의하는 열거형 값입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 SearchBar 검색 단추를 클릭하거나 Enter 키를 누를 때 발생하는 이벤트를 정의 SearchButtonPressed 합니다.

SearchBar 는 InputView 다음 속성을 상속하는 클래스에서 파생됩니다.

  • CharacterSpacing형식 double의 경우 입력한 텍스트의 문자 사이의 간격을 설정합니다.
  • CursorPosition형식 int의 는 편집기 내에서 커서의 위치를 정의합니다.
  • FontAttributes형식 FontAttributes의 텍스트 스타일을 결정합니다.
  • FontAutoScalingEnabled형식 bool의 은 텍스트가 운영 체제에 설정된 크기 조정 기본 설정을 반영하는지 여부를 정의합니다. 이 속성의 기본값은 true입니다.
  • FontFamily형식 string의 글꼴 패밀리를 정의합니다.
  • FontSize형식 double의 글꼴 크기를 정의합니다.
  • IsReadOnly형식 bool의 은 사용자가 텍스트를 수정하지 못하도록 해야 하는지 여부를 정의합니다. 이 속성의 기본값은 false입니다.
  • IsSpellCheckEnabled형식 bool의 맞춤법 검사를 사용할지 여부를 제어합니다.
  • IsTextPredictionEnabled형식 bool의 는 텍스트 예측 및 자동 텍스트 수정을 사용할 수 있는지 여부를 제어합니다.
  • Keyboard형식 Keyboard의 는 텍스트를 입력할 때 표시되는 소프트 입력 키보드를 지정합니다.
  • MaxLength형식 int의 최대 입력 길이를 정의합니다.
  • Placeholder형식 string의 컨트롤이 비어 있을 때 표시되는 텍스트를 정의합니다.
  • PlaceholderColor형식 Color의 자리 표시자 텍스트 색을 정의합니다.
  • SelectionLength형식 int의 는 컨트롤 내에서 선택한 텍스트의 길이를 나타냅니다.
  • Text형식 string의 컨트롤에 입력된 텍스트를 정의합니다.
  • TextColor형식 Color의 은 입력한 텍스트의 색을 정의합니다.
  • TextTransform형식 TextTransform으로 입력한 텍스트의 대/소문자를 지정합니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 InputView 텍스트 Entry 가 TextChanged 변경될 때 발생하는 이벤트를 정의합니다. TextChangedEventArgs 이벤트 NewTextValue 와 함께 TextChanged 제공되는 개체와 새 텍스트와 OldTextValue 이전 텍스트를 각각 지정하는 속성이 있습니다.

검색 창을 만들려면 개체를 SearchBar 만들고 해당 Placeholder 속성을 사용자에게 검색어를 입력하도록 지시하는 텍스트로 설정합니다.

다음 XAML 예제에서는 다음을 만드는 방법을 보여줍니다.SearchBar

<SearchBar Placeholder="Search items..." />

해당하는 C# 코드는 다음과 같습니다.

SearchBar searchBar = new SearchBar { Placeholder = "Search items..." };

참고 항목

iOS에서 소프트 입력 키보드는 필드가 화면 아래쪽 근처에 있을 때 텍스트 입력 필드를 커버할 수 있으므로 텍스트를 입력하기가 어렵습니다. 그러나 .NET MAUI iOS 앱에서는 소프트 입력 키보드가 텍스트 입력 필드를 덮을 때 페이지가 자동으로 스크롤되므로 필드가 소프트 입력 키보드 위에 있습니다. 네임스페이스에서 메서드 KeyboardAutoManagerScroll.Disconnect 를 Microsoft.Maui.Platform 호출하여 이 기본 동작을 사용하지 않도록 설정할 수 있습니다. 메서드를 KeyboardAutoManagerScroll.Connect 호출하여 비활성화된 후 동작을 다시 사용하도록 설정할 수 있습니다.

이벤트 처리기를 사용하여 검색 수행

다음 이벤트 중 하나에 이벤트 처리기를 연결하여 컨트롤을 사용하여 SearchBar 검색을 실행할 수 있습니다.

  • SearchButtonPressed사용자가 검색 단추를 클릭하거나 Enter 키를 누를 때 호출됩니다.
  • TextChanged쿼리 상자의 텍스트가 변경될 때마다 호출되는 입니다. 이 이벤트는 클래스에서 InputView 상속됩니다.

다음 XAML 예제에서는 이벤트에 연결된 TextChanged 이벤트 처리기를 보여 하며 검색 결과를 표시하는 데 사용합니다 ListView .

<SearchBar TextChanged="OnTextChanged" />
<ListView x:Name="searchResults" >

이 예제에서 TextChanged 이벤트는 이름이 지정된 OnTextChanged이벤트 처리기로 설정됩니다. 이 처리기는 코드 숨김 파일에 있습니다.

void OnTextChanged(object sender, EventArgs e)
{
    SearchBar searchBar = (SearchBar)sender;
    searchResults.ItemsSource = DataService.GetSearchResults(searchBar.Text);
}

이 예제에서는 메서드가 DataService 있는 클래스를 GetSearchResults 사용하여 쿼리와 일치하는 returnitems를 반환합니다. SearchBar 컨트롤의 Text 속성 값이 메서드에 GetSearchResults 전달되고 결과는 컨트롤의 ItemsSource 속성을 업데이트 ListView 하는 데 사용됩니다. 전체적인 효과는 검색 결과가 .에 표시된다는 것입니다 ListView.

viewmodel을 사용하여 검색 수행

속성을 구현에 바인딩 SearchCommand 하여 이벤트 처리기 없이 검색을 ICommand 실행할 수 있습니다. 명령에 대한 자세한 내용은 명령을 참조 하세요.

다음 예제에서는 명명PerformSearch된 속성을 포함하는 viewmodel 클래스를 ICommand 보여 줍니다.

public class SearchViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ICommand PerformSearch => new Command<string>((string query) =>
    {
        SearchResults = DataService.GetSearchResults(query);
    });

    private List<string> searchResults = DataService.Fruits;
    public List<string> SearchResults
    {
        get
        {
            return searchResults;
        }
        set
        {
            searchResults = value;
            NotifyPropertyChanged();
        }
    }
}

참고 항목

viewmodel은 검색을 수행할 수 있는 클래스가 DataService 있다고 가정합니다.

다음 XAML 예제에서는 클래스를 SearchViewModel 사용합니다.

<ContentPage ...
             xmlns:viewmodels="clr-namespace:SearchBarDemos.ViewModels"
             x:DataType="viewmodels:SearchViewModel">
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <SearchBar x:Name="searchBar"
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, x:DataType='SearchBar', Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

이 예제에서는 BindingContext 클래스의 인스턴스로 설정됩니다 SearchViewModel . 속성은 SearchBar.SearchCommand viewmodel 속성에 PerformSearch 바인딩되고 속성은 SearchCommandParameter 속성에 SearchBar.Text 바인딩됩니다. 마찬가지로 이 ListView.ItemsSource 속성은 viewmodel의 SearchResults 속성에 바인딩됩니다.

소프트 입력 키보드 숨기기 및 표시

네임스페이스의 클래스 Microsoft.Maui 는 SoftInputExtensions 텍스트 입력을 지원하는 컨트롤에서 소프트 입력 키보드와 상호 작용을 지원하는 일련의 확장 메서드를 제공합니다. 클래스는 다음 메서드를 정의합니다.

  • IsSoftInputShowing- 디바이스에 현재 소프트 입력 키보드가 표시되는지 확인합니다.
  • HideSoftInputAsync현재 표시되는 경우 소프트 입력 키보드를 숨기려고 합니다.
  • ShowSoftInputAsync- 현재 숨겨진 경우 소프트 입력 키보드를 표시하려고 시도합니다.

다음 예제에서는 현재 표시된 경우 이름이 지정된 searchBar소프트 입력 키보드를 SearchBar 숨기는 방법을 보여줍니다.

if (searchBar.IsSoftInputShowing())
   await searchBar.HideSoftInputAsync(System.Threading.CancellationToken.None);