Aracılığıyla paylaş

Xamarin.Forms Arama Çubuğu

Xamarin.FormsSearchBar, bir arama başlatırken kullanılan bir kullanıcı girişi denetimidir. Denetim SearchBar yer tutucu metni, sorgu girişini, arama yürütmeyi ve iptali destekler. Aşağıdaki ekran görüntüsünde, içinde sonuçların görüntülendiği bir ListViewsorgu gösterilmektedirSearchBar:

iOS ve Android'de SearchBar'ın ekran görüntüsü

SearchBar sınıfı aşağıdaki özellikleri tanımlar:

  • CancelButtonColor , iptal düğmesinin rengini tanımlayan bir Color düğmedir.
  • CharacterSpacing, türündeki double, metnin karakterleri SearchBar arasındaki aralıktır.
  • FontAttributes, yazı tipinin kalın, italik veya hiçbiri olup olmadığını SearchBar belirleyen bir FontAttributes numaralandırma değeridir.
  • FontFamily , tarafından kullanılan yazı tipi ailesini belirleyen bir string öğedir SearchBar.
  • FontSize bir NamedSize sabit listesi değeri veya platformlar arasında belirli yazı tipi boyutlarını temsil eden bir double değer olabilir.
  • HorizontalTextAlignment , sorgu metninin yatay hizalamasını tanımlayan bir TextAlignment numaralandırma değeridir.
  • VerticalTextAlignment , sorgu metninin dikey hizalamasını tanımlayan bir TextAlignment numaralandırma değeridir.
  • Placeholder , "Ara..." gibi yer tutucu metni tanımlayan bir string metindir.
  • PlaceholderColor , yer tutucu metnin rengini tanımlayan bir Color metindir.
  • SearchCommandICommand, bir görünüm modelinde tanımlanan komutlara parmakla dokunma veya tıklama gibi kullanıcı eylemlerini bağlamaya olanak tanıyan bir işlemdir.
  • SearchCommandParameter , öğesine geçirilmesi gereken parametreyi belirten bir object değeridir SearchCommand.
  • Text içinde sorgu metnini içeren bir string ifadedir SearchBar.
  • TextColor , sorgu metin rengini tanımlayan bir Color ifadedir.
  • TextTransform , metnin büyük/küçük harflerini belirleyen bir TextTransform değerdir SearchBar .

Bu özellikler nesneler tarafından BindableProperty desteklenir; başka bir deyişle SearchBar , özelleştirilebilir ve veri bağlamalarının hedefi olabilir. üzerinde SearchBar yazı tipi özelliklerinin belirtilmesi, diğer Xamarin.Forms Metin denetimlerinde metin özelleştirmeyle tutarlıdır. Daha fazla bilgi için bkz. içindeki Xamarin.Formsyazı tipleri.

SearchBar XAML'de örneği oluşturulabilir. İsteğe bağlı Placeholder özelliği, sorgu giriş kutusundaki ipucu metnini tanımlamak için ayarlanabilir. için Placeholder varsayılan değer boş bir dize olduğundan ayarlı değilse yer tutucu görüntülenmez. Aşağıdaki örnek, isteğe bağlı Placeholder özellik kümesiyle XAML'de bir SearchBar örneği oluşturmayı gösterir:

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

SearchBar Kodda da oluşturulabilir:

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

SearchBar görünüm özellikleri

Denetim, SearchBar denetimin görünümünü özelleştiren birçok özelliği tanımlar. Aşağıdaki örnek, XAML'de birden çok özelliğin belirtildiği bir SearchBar örneği oluşturma işlemini gösterir:

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

Bu özellikler kodda nesne SearchBar oluşturulurken de belirtilebilir:

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
};

Aşağıdaki ekran görüntüsü, sonuçta SearchBar elde edilen denetimi gösterir:

iOS ve Android'de özelleştirilmiş SearchBar'ın ekran görüntüsü

Not

iOS'ta SearchBarRenderer sınıfı geçersiz kılınabilir UpdateCancelButton bir yöntem içerir. Bu yöntem, iptal düğmesinin ne zaman görüneceğini denetler ve özel işleyicide geçersiz kılınabilir. Özel işleyiciler hakkında daha fazla bilgi için bkz Xamarin.Forms . Özel oluşturucular.

Olay işleyicileriyle arama yapma

Arama, aşağıdaki olaylardan birine bir olay işleyicisi eklenerek denetim kullanılarak SearchBar yürütülebilir:

  • SearchButtonPressed , kullanıcı arama düğmesine tıkladığında veya enter tuşuna bastığında çağrılır.
  • TextChanged , sorgu kutusundaki metin her değiştirildiğinde çağrılır.

Aşağıdaki örnek, XAML'de olaya eklenmiş bir olay işleyicisini TextChanged gösterir ve arama sonuçlarını görüntülemek için bir ListView kullanır:

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

Olay işleyicisi, kodda oluşturulan bir SearchBar öğeye de eklenebilir:

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

arka TextChanged planda kod dosyasındaki olay işleyicisi, XAML veya kod aracılığıyla oluşturulup oluşturulmadığıyla SearchBar aynıdır:

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

Önceki örnek, bir DataService sorguyla eşleşen öğeleri döndürebilen bir yönteme sahip bir GetSearchResults sınıfın varlığını ifade eder. Denetimin SearchBar Text özellik değeri yöntemine GetSearchResults geçirilir ve sonuç denetimin ListView ItemsSource özelliğini güncelleştirmek için kullanılır. Genel etki, arama sonuçlarının denetimde ListView görüntülenmesidir.

Örnek uygulama, arama işlevselliğini test etmek için kullanılabilecek bir DataService sınıf uygulaması sağlar.

Görünüm modeli kullanarak arama yapma

ve özellikleri ICommand uygulamalara bağlanarak SearchCommand SearchCommandParameter olay işleyicileri olmadan bir arama yürütülebilir. Örnek proje, Model-View-ViewModel (MVVM) desenini kullanarak bu uygulamaları gösterir. MVVM ile veri bağlamaları hakkında daha fazla bilgi için bkz . MVVM ile Veri Bağlamaları.

Örnek uygulamadaki görünüm modeli aşağıdaki kodu içerir:

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();
        }
    }
}

Not

Viewmodel, arama yapabilen bir DataService sınıfın varlığını varsayar. DataService Örnek veriler de dahil olmak üzere sınıfı örnek uygulamada kullanılabilir.

Aşağıdaki XAML, arama sonuçlarını görüntüleyen bir ListView denetimle örnek görünüm modeline nasıl bağlanacağını SearchBar gösterir:

<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>

Bu örnek öğesini BindingContext sınıfının bir örneği SearchViewModel olarak ayarlar. Viewmodel içindeki özelliğine PerformSearch ICommand bağlar SearchCommand ve özelliğini özelliğine SearchCommandParameter bağlar SearchBar Text. ListView.ItemsSource özelliği viewmodel'in SearchResults özelliğine bağlıdır.

Arabirim ve bağlamalar hakkında ICommand daha fazla bilgi için bkz Xamarin.Forms . veri bağlama ve ICommand arabirimi.

  • Last updated on