Xamarin.Forms SearchBar

發行項
07/21/2020

Xamarin.FormsSearchBar是用來起始搜尋的使用者輸入控件。控制件 SearchBar 支援佔位元文字、查詢輸入、搜尋執行和取消。下列螢幕快照顯示 SearchBar 查詢，其中包含中 ListView顯示的結果：

類別 SearchBar 會定義下列屬性：

CancelButtonColorColor是，定義取消按鈕的色彩。
CharacterSpacing類型 double為的，是文字字元 SearchBar 之間的間距。
FontAttributesFontAttributes是列舉值，可判斷字型是否SearchBar為粗體、斜體或兩者。
FontFamilystring是，決定所使用的SearchBar字型系列。
FontSize 可以是 NamedSize 列舉值或 double 代表跨平臺特定字型大小的值。
HorizontalTextAlignmentTextAlignment是定義查詢文字水準對齊的列舉值。
VerticalTextAlignmentTextAlignment是列舉值，定義查詢文字的垂直對齊方式。
Placeholderstring是定義佔位元文字的，例如「Search...“。
PlaceholderColorColor是，定義佔位元文字的色彩。
SearchCommandICommand是，允許將用戶動作，例如手指點選或按下，系結至 ViewModel 上定義的命令。
SearchCommandParameterobject是，指定應該傳遞至的參數SearchCommand。
Textstring是，包含中的SearchBar查詢文字。
TextColorColor是訂查詢文字色彩的。
TextTransform 是決定 TextTransform 文字大小寫的值 SearchBar 。

這些屬性是由 BindableProperty 物件所支援，這表示 SearchBar 可以自定義，並且成為數據系結的目標。在上 SearchBar 指定字型屬性與自定義其他 Xamarin.Forms 文字控制件上的文字一致。如需詳細資訊，請參閱中的字型 Xamarin.Forms。

建立 SearchBar

SearchBar可以在 XAML 中具現化。其選擇性 Placeholder 屬性可以設定為在查詢輸入方塊中定義提示文字。的預設值 Placeholder 是空字串，因此如果未設定佔位元，就不會顯示任何佔位元。下列範例示範如何使用選擇性Placeholder屬性集在 XAML 中具現化 SearchBar ：

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

SearchBar也可以在程式代碼中建立：

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

SearchBar 外觀屬性

控件 SearchBar 會定義許多屬性，以自定義控件的外觀。下列範例示範如何在 XAML 中具現化 SearchBar ，並指定多個屬性：

<SearchBar Placeholder="Search items..."
           CancelButtonColor="Orange"
           PlaceholderColor="Orange"
           TextColor="Orange"
           TextTransform="Lowercase"
           HorizontalTextAlignment="Center"
           FontSize="Medium"
           FontAttributes="Italic" />

在程式代碼中建立 SearchBar 物件時，也可以指定這些屬性：

SearchBar searchBar = new SearchBar
{
    Placeholder = "Search items...",
    PlaceholderColor = Color.Orange,
    TextColor = Color.Orange,
    TextTransform = TextTransform.Lowercase,
    HorizontalTextAlignment = TextAlignment.Center,
    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(SearchBar)),
    FontAttributes = FontAttributes.Italic
};

下列螢幕快照顯示產生的 SearchBar 控制項：

注意

在 iOS 上，類別 SearchBarRenderer 包含可 UpdateCancelButton 覆寫的方法。這個方法會控制取消按鈕何時出現，而且可以在自定義轉譯器中覆寫。如需自定義轉譯器的詳細資訊，請參閱 Xamarin.Forms 自定義轉譯器。

使用事件處理程式執行搜尋

藉由將事件處理程式附加至下列其中一個事件，即可使用 SearchBar 控件執行搜尋：

SearchButtonPressed 當使用者按下搜尋按鈕或按下 Enter 鍵時呼叫。
TextChanged 每當查詢方塊中的文字變更時，就會呼叫。

下列範例顯示附加至 TextChanged XAML 中事件的事件處理程式，並使用 ListView 來顯示搜尋結果：

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

事件處理程式也可以附加至 SearchBar 程式碼中建立的：

SearchBar searchBar = new SearchBar {/*...*/};
searchBar.TextChanged += OnTextChanged;

程式 TextChanged 代碼後置檔案中的事件處理程式是相同的，無論是 SearchBar 透過 XAML 或程式代碼建立：

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

上一個DataServiceGetSearchResults範例表示類別的存在，其方法能夠傳回符合查詢的專案。控件 SearchBar 的 Text 屬性值會傳遞至方法， GetSearchResults 而結果會用來更新 ListView 控件的 ItemsSource 屬性。整體效果是搜尋結果會顯示在控件中 ListView 。

範例應用程式提供類別 DataService 實作，可用來測試搜尋功能。

使用 viewmodel 執行搜尋

您可以藉由將和 SearchCommandParameter 屬性系結SearchCommand至ICommand實作，在沒有事件處理程序的情況下執行搜尋。範例專案會使用 Model-View-ViewModel （MVVM）模式來示範這些實作。如需使用MVVM進行數據系結的詳細資訊，請參閱使用MVVM的數據系結。

範例應用程式中的 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 執行搜尋的類別。範例 DataService 應用程式中提供類別，包括範例數據。

下列 XAML 示範如何將系結 SearchBar 至範例 viewmodel，以及 ListView 顯示搜尋結果的控件：

<ContentPage ...>
    <ContentPage.BindingContext>
        <viewmodels:SearchViewModel />
    </ContentPage.BindingContext>
    <StackLayout ...>
        <SearchBar x:Name="searchBar"
                   ...
                   SearchCommand="{Binding PerformSearch}"
                   SearchCommandParameter="{Binding Text, Source={x:Reference searchBar}}"/>
        <ListView x:Name="searchResults"
                  ...
                  ItemsSource="{Binding SearchResults}" />
    </StackLayout>
</ContentPage>

這個範例會將設定 BindingContext 為類別的 SearchViewModel 實例。它會將 SearchCommand 屬性系結至 ICommand PerformSearch viewmodel 中的，並將屬性系結SearchBarText至 SearchCommandParameter 屬性。屬性 ListView.ItemsSource 會系結至 SearchResults viewmodel 的屬性。

如需介面和系結的詳細資訊 ICommand ，請參閱 Xamarin.Forms 數據系結和 ICommand 介面。

共用方式為

Xamarin.Forms SearchBar

建立 SearchBar

SearchBar 外觀屬性

使用事件處理程式執行搜尋

使用 viewmodel 執行搜尋

其他資源

共用方式為

Xamarin.Forms SearchBar

建立 SearchBar

SearchBar 外觀屬性

使用事件處理程式執行搜尋

使用 viewmodel 執行搜尋

相關連結

其他資源