آموزش استفاده از Auto Complete در WPF
Loading...
Auto Complete

در این مقاله خواهیم دید که چگونه میتوان با استفاده از Model Data اسمبلی های .NET و اسمبلی های WPF ، تابعیت Auto Complete را به TextBox های برنامه ی WPF مان اضافه کنیم. نیازی به افزودن هیچ بسته ی NuGet یا فایل DLL دیگری نیست. میتوانید پس از مطالعه ی این مقاله و استفاده از Sample ای که برایتان قرار داده ام ، یکی برای خودتان بسازید.

Auto Complete

این نمونه یک دیدگاه کلی در رابطه با پر کردن اتوماتیک در WPF ارائه خواهد داد. تابع پر کردن خودکار بر اساس زیر است :
۱- یک query ارائه شده توسط کاربر. این یک ورودی است که کاربر در کنترل وارد میکند.

۲- لیست یا کالکشنی از داده ها که در حال حاضر در اختیار داریم.

۳- یک وضعیت شرطی برای چک کردن این که شئ درون لیستمان دارای محتوا هست یا خیر.

با استفاده از این میتوانیم ویژگی های پر کردن خودکارمان را برای هر TextBox ای ایجاد کنیم. ابتدا Model ای که میخواهیم از آن استفاده کنیم را مشخص میکنیم ، میتوانید Model را از یک SQL Server Database ، از قسمت Microsoft Azure Data Sources یا هر فایل اختصاصی دیگری استخراج کنید. من از کد های زیر استفاده کرده ام :

سی شارپ

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Text;    
using System.Threading.Tasks;    
    
namespace AutocompleteWpfSample    
{    
    class Model    
    {    
        static public List<string> GetData()    
        {    
            List<string> data = new List<string>();    
    
            data.Add("Afzaal");    
            data.Add("Ahmad");    
            data.Add("Zeeshan");    
            data.Add("Daniyal");    
            data.Add("Rizwan");    
            data.Add("John");    
            data.Add("Doe");    
            data.Add("Johanna Doe");    
            data.Add("Pakistan");    
            data.Add("Microsoft");    
            data.Add("Programming");    
            data.Add("Visual Studio");    
            data.Add("Sofiya");    
            data.Add("Rihanna");    
            data.Add("Eminem");    
    
            return data;    
        }    
    }    
}   

قطعه کد بالا به ما داده ی موردنیاز برای کامل کردن تابعیت ارائه میدهد. اکنون ، کنترل XAML که مانند این خواهد بود را بیافزایید. موارد زیر را نیاز داریم :

۱ – یک TextBox برای ورودی کاربر.

۲ – یک StackPanel برای مدیریت TextBlock هایی که اضافه میشوند.

۳ – یک Border برای جدا کردن موارد از از کنترل های زیرین.

XAML

<TextBox Width="300" Padding="5, 3, 5, 3"     
KeyUp="TextBox_KeyUp" Name="textBox" />    
<Border Width="298" Height="150" BorderBrush="Black"    
BorderThickness="1">    
<ScrollViewer VerticalScrollBarVisibility="Auto">    
<StackPanel Name="resultStack"></StackPanel>    
</ScrollViewer>    
</Border>

تا اینجای کار UI تکمیل شده است. میتوانید ببینید که من یک کنترل کننده ی رویداد را برای کنترل کردن ورودی کاربر نیز قرار داده ام. این زمانی شروع به کار میکند که کاربر یک کاراکتر وارد کند ، به دنبال نمونه ی مشابه آن در Model خودم میگردم. نگاهی به قطعه کد سی شارپ زیر که برای افزودن ویژگی پر کردن اتوماتیک در برنامه های WPF است ، بیاندازید.

سی شارپ

private void TextBox_KeyUp(object sender, KeyEventArgs e)    
{    
     bool found = false;    
     var border = (resultStack.Parent as ScrollViewer).Parent as Border;    
     var data = Model.GetData();    
    
     string query = (sender as TextBox).Text;    
    
     if (query.Length == 0)    
     {    
          // Clear    
          resultStack.Children.Clear();    
          border.Visibility = System.Windows.Visibility.Collapsed;    
      }    
      else    
      {    
          border.Visibility = System.Windows.Visibility.Visible;    
      }    
    
      // Clear the list    
      resultStack.Children.Clear();    
    
      // Add the result    
      foreach (var obj in data)    
      {    
          if (obj.ToLower().StartsWith(query.ToLower()))    
          {    
               // The word starts with this... Autocomplete must work    
               addItem(obj);    
               found = true;    
          }    
     }    
    
     if (!found)    
     {    
          resultStack.Children.Add(new TextBlock() { Text = "No results found." });    
     }    
}  

همچنین تابعی برای افزودن اشیا به StackPanel داشته ام ، که در زیر برایتان قرار داده ام :

سی شارپ

private void addItem(string text)    
{    
     TextBlock block = new TextBlock();    
    
     // Add the text    
     block.Text = text;    
    
     // A little style...    
     block.Margin = new Thickness(2, 3, 2, 3);    
     block.Cursor = Cursors.Hand;    
    
     // Mouse events    
     block.MouseLeftButtonUp += (sender, e) =>    
     {    
          textBox.Text = (sender as TextBlock).Text;    
     };    
    
     block.MouseEnter += (sender, e) =>    
     {    
          TextBlock b = sender as TextBlock;    
          b.Background = Brushes.PeachPuff;    
     };    
    
     block.MouseLeave += (sender, e) =>    
     {    
          TextBlock b = sender as TextBlock;    
          b.Background = Brushes.Transparent;    
     };    
    
     // Add to the panel    
     resultStack.Children.Add(block);    
}  

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

نکته :
تعداد زیادی تغییرات UI نیز من انجام داده ام. که البته میتوانید آنها را در نظر نگیرید. مانند کنترل رویداد های کلیک و خروج موس برای تغییر رنگ پس زمینه.

مثالی از پروژه

در زیر مثالی برایتان آورده ام :

Auto Complete

اگر ما شروع به تایپ چیزی در داخل آن کنیم ( که نمونه ی مشابه نداشته باشد) UI زیر را مشاهده خواهد کرد.

Auto Complete

حال اگر یک Query نمونه ی مشابهی در Model ما داشته باشد ، آنگاه لیست جدیدی برای نمایش به ما تولید میشود که مانند زیر خواهد بود :

Auto Complete

اگر شما در لیست حرکت کنید میتوانید رویداد Reflect که در نکته ی قسمت بالا توضیح دادم را ببینید.

Auto Complete

امیدوارم طریقه ی ایجاد تابعیت پر کردن اتوماتیک TextBox یا استفاده از WPF و کتابخانه های چارچوب .NET بدون استفاده از هیچ برنامه یا بسته های NuGet دیگری آموخته باشید.

موفق باشید!



 دانلود فايلهاي پروژه
  • پسورد: www.mspsoft.com


avatar داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

آخرین مطالب و تخفیفات در کانال تلگرام :) کانال تلگرام ام اس پی سافت
مطالب مرتبط
ديدگاه خود را ارسال کنيد


محبوب ترين ويدئو هاي انلاين
دوره برنامه نویسی فروشگاه اینترنتی
  • تعداد اعضا 80k
  • قيمت دوره۱۰۰,۰۰۰ تومان
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...
دوره آموزشی سیستم ثبت سفارش آنلاین
  • تعداد اعضا 80k
  • قيمت دوره۵۰,۰۰۰ تومان
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...
دوره طراحی سیستم مدیریت مشتریان
  • تعداد اعضا 80k
  • قيمت دوره۵۰,۰۰۰ تومان
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...