검색바

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

검색 바의 스크린샷.

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

• CancelButtonColor는 취소 단추의 색을 정의하는 Color입니다.
• HorizontalTextAlignment는 TextAlignment 열거형 값으로 쿼리 텍스트의 가로 정렬을 정의합니다.
• SearchCommand는 ICommand를 사용하여 사용자 동작, 예를 들어 손가락 탭 또는 클릭을 뷰모델에 정의된 명령에 연결할 수 있게 합니다.
• SearchCommandParameter은 SearchCommand에 전달되어야 하는 매개 변수를 지정하는 object입니다.
• 는 쿼리 텍스트의 수직 맞춤을 정의하는 열거형 값입니다.

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

또한 SearchBar는 검색 버튼을 클릭하거나 Enter 키를 눌렀을 때 발생하는 SearchButtonPressed 이벤트를 정의합니다.

SearchBar 클래스는 InputView 클래스에서 파생되어 다음 속성을 상속합니다.

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

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

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

SearchBar 만들기

검색 창을 만들려면 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 메서드로 쿼리와 일치하는 항목을 반환합니다. SearchBar 컨트롤의 Text 속성 값이 GetSearchResults 메서드에 전달되고, 결과는 ListView 컨트롤의 ItemsSource 속성을 업데이트하는 데 사용됩니다. 전체적인 효과는 검색 결과가 ListView에 표시된다는 것입니다.

viewmodel을 사용하여 검색 수행

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

다음 예제는 'PerformSearch'라는 속성을 포함하는 viewmodel 클래스를 보여 줍니다.

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>

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

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

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

• IsSoftInputShowing, 장치에 현재 소프트 입력 키보드가 표시되는지 확인합니다.
• HideSoftInputAsync, 현재 표시되고 있는 소프트 입력 키보드를 숨기려 시도할 것입니다.
• ShowSoftInputAsync는 현재 숨겨져 있는 경우 소프트 입력 키보드를 표시하려고 할 수 있습니다.

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

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