共用方式為

Xamarin.Forms SearchBar

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

iOS 和 Android 上 SearchBar 的螢幕快照

類別 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可以在 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 和 Android 上自定義 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 介面。

  • Last updated on