Aracılığıyla paylaş

Otomatik öneri kutusu

Bir kullanıcının yazarken seçecekleri önerilerin listesini sağlamak için AutoSuggestBox kullanın.

Otomatik öneri kutusu

Doğru kontrol bu mu?

Öneri listesi içeren metin aramasına izin veren basit, özelleştirilebilir bir denetim istiyorsanız, otomatik öneri kutusunu seçin.

Doğru metin denetimini seçme hakkında daha fazla bilgi için Metin denetimleri makalesine bakın.

Anatomi

Otomatik öneri kutusunun giriş noktası isteğe bağlı bir üst bilgiden ve isteğe bağlı ipucu metni içeren bir metin kutusundan oluşur:

Otomatik öneri denetimi için giriş noktası örneği

Otomatik öneri sonuçları listesi, kullanıcı metin girmeye başladığında otomatik olarak doldurulur. Sonuç listesi metin giriş kutusunun üstünde veya altında görünebilir. "Tümünü temizle" düğmesi görüntülenir:

Genişletilmiş otomatik öneri denetimi örneği

Recommendations

  • Otomatik öneri kutusunu kullanarak arama yaparken ve girilen metin için arama sonucu olmadığında, sonuç olarak tek satırlık bir "Sonuç yok" iletisi görüntüleyip kullanıcıların arama isteklerinin yürütüldüğünü bilmesini sağlar:

    Arama sonucu içermeyen otomatik öneri kutusu örneği

Otomatik öneri kutusu oluşturma

WinUI 3 Galeri uygulamasını açın ve AutoSuggestBox'ı çalışır durumda görün

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

AutoSuggestBox kullanmak için 3 kullanıcı eylemini yanıtlamanız gerekir.

  • Metin değiştirildi - Kullanıcı metin girdiğinde öneri listesini güncelleştirin.
  • Öneri seçildi - Kullanıcı öneri listesinden bir öneri seçtiğinde metin kutusunu güncelleştirin.
  • Sorgu gönderildi - Kullanıcı bir sorgu gönderdiğinde sorgu sonuçlarını gösterin.

Metin değiştirildi

Metin kutusunun içeriği her güncelleştirildiğinde TextChanged olayı gerçekleşir. Değişikliğin kullanıcı girişine bağlı olup olmadığını belirlemek için event args Reason özelliğini kullanın. Değişiklik nedeni userInput ise, verilerinizi girişe göre filtreleyin. Ardından, öneri listesini güncelleştirmek için filtrelenmiş verileri AutoSuggestBox'ın ItemsSource olarak ayarlayın.

Öğelerin öneri listesinde nasıl görüntüleneceğini denetlemek için DisplayMemberPath veya ItemTemplate kullanabilirsiniz.

  • Veri öğenizin tek bir özelliğinin metnini görüntülemek için, DisplayMemberPath özelliğini öneri listesinde nesnenizden hangi özelliğin görüntüleneceğini seçecek şekilde ayarlayın.
  • Listedeki her öğe için özel bir görünüm tanımlamak için ItemTemplate özelliğini kullanın.

Öneri tercih edildi

Kullanıcı klavyeyi kullanarak öneri listesinde gezindiğinde, metin kutusundaki metni eşleşecek şekilde güncelleştirmeniz gerekir.

Metin kutusunda veri nesnenizden hangi özelliğin görüntüleneceğini seçmek için TextMemberPath özelliğini ayarlayabilirsiniz. TextMemberPath belirtirseniz, metin kutusu otomatik olarak güncelleştirilir. Metnin öneri listesinde ve metin kutusunda aynı olması için genellikle DisplayMemberPath ve TextMemberPath için aynı değeri belirtmeniz gerekir.

Basit bir özellikten daha fazlasını göstermeniz gerekiyorsa, metin kutusunu seçili öğeye göre özel metinle doldurmak için SuggestionChosen olayını işleyebilirsiniz.

Sorgu gönderildi

Uygulamanıza uygun bir sorgu işlemi gerçekleştirmek ve sonucu kullanıcıya sunmak için QuerySubmitted olayını işleyin.

QuerySubmitted olayı, kullanıcı bir sorgu dizesi işlediğinde gerçekleşir. Kullanıcı şu yollardan biriyle sorgu işleyebilir:

  • Odak metin kutusundayken Enter tuşuna basın veya sorgu simgesine tıklayın. ChosenSuggestion olay argümanı özelliği null.
  • Odak öneri listesindeyken Enter tuşuna basın, bir öğeye tıklayın veya dokunun. Event args ChosenSuggestion özelliği, listeden seçilen öğeyi içerir.

Her durumda, olay bağımsız değişkeni QueryText özelliği metin kutusundan gelen metni içerir.

Aşağıda, gerekli olay işleyicilerine sahip basit bir AutoSuggestBox yer alır.

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
                TextChanged="AutoSuggestBox_TextChanged"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // Only get results when it was a user typing,
    // otherwise assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen.
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        //Set the ItemsSource to be your filtered dataset
        //sender.ItemsSource = dataset;
    }
}


private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    // Set sender.Text. You can use args.SelectedItem to build your text string.
}


private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
        // User selected an item from the suggestion list, take an action on it here.
    }
    else
    {
        // Use args.QueryText to determine what to do.
    }
}

Bir kullanıcının yazarken seçecekleri önerilerin listesini sağlamak için AutoSuggestBox kullanın.

Varsayılan olarak, metin giriş kutusunda bir sorgu düğmesi gösterilmez. QueryIcon özelliğini, metin kutusunun sağ tarafında belirtilen simgeyi içeren bir düğme eklemek için ayarlayabilirsiniz. Örneğin, AutoSuggestBox'ın tipik bir arama kutusu gibi görünmesini sağlamak için şuna benzer bir 'bul' simgesi ekleyin.

<AutoSuggestBox QueryIcon="Find"/>

Burada 'bul' simgesine sahip bir AutoSuggestBox bulunur.

Arama simgesiyle otomatik öneri kontrolü örneği.

  • Last updated on