ایجاد کمبوباکس با قابلیت جستجو در wpf

پاسخ هوش مصنوعی

برای ایجاد یک کمبوباکس با قابلیت جستجو در WPF، ابتدا نیاز است که یک کلاس برای ذخیره سازی کشورها ایجاد کنیم، سپس با استفاده از Binding و یک Event برای فیلتر کردن نتایج به هنگام تایپ کاربر در کمبوباکس، این کار را انجام دهیم.

در اینجا یک مثال ساده برای ایجاد چنین کمبوباکسی آورده شده است:

کد XAML:

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ComboBox with Search" Height="350" Width="400">
    <Grid>
        <ComboBox Name="cmb_Countrytitle" 
                   IsEditable="True" 
                   StaysOpen="False" 
                   TextChanged="cmb_Countrytitle_TextChanged"
                   Margin="10" />
    </Grid>
</Window>

کدهای xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace YourNamespace
{
    public partial class MainWindow : Window
    {
        private List<Country> countries;

        public MainWindow()
        {
            InitializeComponent();
            LoadCountries();
        }

        private void LoadCountries()
        {
            countries = new List<Country>
            {
                new Country { CountryId = 1, Countrytitle = "ایران" },
                new Country { CountryId = 2, Countrytitle = "افغانستان" },
                new Country { CountryId = 3, Countrytitle = "عراق" },
                new Country { CountryId = 4, Countrytitle = "ترکیه" },
                // سایر کشورها را به اینجا اضافه کنید
            };

            cmb_Countrytitle.ItemsSource = countries;
            cmb_Countrytitle.DisplayMemberPath = "Countrytitle";
            cmb_Countrytitle.SelectedValuePath = "CountryId";
        }

        private void cmb_Countrytitle_TextChanged(object sender, TextChangedEventArgs e)
        {
            var filterText = cmb_Countrytitle.Text.ToLower();
            var filteredCountries = countries.Where(c => c.Countrytitle.ToLower().Contains(filterText)).ToList();

            cmb_Countrytitle.ItemsSource = filteredCountries;
            cmb_Countrytitle.IsDropDownOpen = true;
        }
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string Countrytitle { get; set; }
    }
}

در این کد:

• کمبوباکس در XAML به صورت ویرایشی (Editable) است، به این معنی که کاربر می تواند متن را وارد کند.
• با هر بار تغییر متن در کمبوباکس، متد cmb_Countrytitle_TextChanged فراخوانی می شود تا لیست کشورها بر اساس متن وارد شده فیلتر شود.
• کشورها در یک لیست نگهداری می شوند و با اعمال فیلتر بر روی این لیست، نتایج به روز رسانی می شوند.

این کد را در برنامه WPF خود قرار دهید و آن را اجرا کنید هر زمان کاربر متنی را وارد کند، کمبوباکس به طور خودکار نتایج را فیلتر می کند.

سلام

میتونید توی گوگل سرچ کنید و نتایج خوبی رو بهتون نمایش میده. اما این کدها رو براتون قرار میدم امیدوارم بتونید استفاده کنید

کدهای مربوط به بخش دستورات xaml

<Window x:Class="InterviewApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <WrapPanel Orientation="Horizontal">
        <ComboBox IsEditable="True"
                  Width="200"
                  Height="25"
                  IsTextSearchEnabled="False"
                  x:Name="cb"
                  PreviewTextInput="Cb_OnPreviewTextInput"
                  ItemsSource="{Binding ItemList}"
                  Text="{Binding SearchTextText}">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel />
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
        </ComboBox>
    </WrapPanel>
</Window>

و کدهای سمت سرور شما کدهای زیر میشن

namespace Application
{
    public partial class MainWindow : INotifyPropertyChanged
    {
        public MainWindow()
        {
            ItemList = new ObservableCollection<string>();
            for (var i = 0; i < 1000; i++)
            {
                ItemList.Add($"Item {i}");
            }

            InitializeComponent();
        }

        private void Cb_OnPreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            cb.IsDropDownOpen = true;
        }

        public ObservableCollection<string> ItemList { get; set; }

        public string SearchTextText
        {
            get => _searchTextText;
            set
            {
                if (_searchTextText == value) return;
                _searchTextText = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SearchTextText)));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

با استفاده از دستورات بالا می تونید یک کمبوباکس با قابلیت جتسجو در wpf ایجاد کنید. خروجی کار هم مشابه زیر میشه

به صورت پیش فرض Combobox خودش قابلیت جستجو رو داره. شما کمبوباکس خودتون رو انتخاب کنید و یک کلمه رو سرچ کنید میبینید که خودش میره و سر اون item وایمیسه . کد زیر رو دقت کنید.

<ComboBox x:Name="cmb_status" IsTextSearchEnabled="True" ></combobox>

اما اگر میخواید وقتی کمبوباکس رو باز می کنید یک تکست باکس نمایش داده بشه که اطلاعات رو فیلتر کنه و فقط اطلاعات فیلتر شده رو نمایش بده باید از یک کامپوننت استفاده کنید چون به صورت پیش فرض در WPF چنین چیزی وجود نداره. برای این منظور میتونید این لینک رو مطالعه بفرمایید.

اگر هم که استفاده از پکیج های nuget رو توی wpf بلد هستید می تونید از این پکیج برای این کار استفاده کنید.