معرفی
این مقاله کنترل «جعبه تکمیل خودکار» جعبه ابزار ویندوز فون را توضیح می دهد. کادر تکمیل خودکار ترکیبی از دو کنترل است، یکی برای ورودی استفاده می شود و آن یک کادر متنی است، دومی برای انتخاب آیتم استفاده می شود و شبیه به یک لیست باکس است. در این مقاله به اصول کنترل "جعبه کامل خودکار" می پردازم. پس از خواندن این مقاله با کنترل "جعبه تکمیل خودکار" و نحوه اضافه کردن آن به برنامه یا پروژه موجود آشنا خواهید شد. بیایید با توضیح این کنترل شروع کنیم.
کنترل جعبه کامل خودکار
همانطور که از نام آن مشخص است، این کنترلی است که قابلیت تکمیل خودکار متن را بر اساس مجموعه های از پیش تعریف شده در اختیار کاربر قرار می دهد. این کنترل ترکیبی از جعبه متن و جعبه لیست است. جعبه متن جایی است که کاربر متن را تایپ می کند و کادر فهرست به عنوان محفظه ای از آیتم ها کار می کند که می تواند برای تکمیل مقدار جعبه متن انتخاب شود. کادر لیست شامل مواردی است که بر اساس ورودی فیلتر می شوند. کادر فهرست به عنوان کشویی شناخته می شود زیرا تنها زمانی باز می شود که موردی برای انتخاب وجود داشته باشد.
برخی از ویژگی های جعبه تکمیل خودکار که در این دمو استفاده کرده ام به شرح زیر است:
- Text
این ویژگی برای تنظیم متن پیشفرض در کادر متنی کادر تکمیل خودکار استفاده میشود.
- حالت فیلتر
یک حالت بسیار مهم و مفید. این به شما امکان می دهد نوع فیلتر مورد نظر خود را روی مجموعه ها تنظیم کنید. برخی از فیلترها مانند حاوی، حاوی حروف حساس، برابر و غیره هستند.
جدای از ویژگی های قبلی از دو رویداد زیر نیز استفاده می شود.
- انتخاب تغییر کرد
این رویداد زمانی فعال می شود که مورد انتخاب شده در منوی کشویی تغییر کند.
- Got Focus
این رویداد زمانی فعال می شود که کادر متن فوکوس شود.
قبل از اینکه بتوانید نسخه ی نمایشی زیر را اجرا کنید، باید یک جعبه ابزار Windows Phone 8 را در پروژه خود نصب کنید. انجام این کار بسیار آسان است.
نصب جعبه ابزار ویندوز فون 8
برای نصب جعبه ابزار Windows Phone 8 با استفاده از Nugget از روش زیر استفاده کنید.
- پروژه برنامه خود را باز کنید (اعم از موجود یا جدید).
- از نوار ابزار "Tools" -> "NuGet Package Manager" -> "Package Manager Console" را انتخاب کنید.
- اکنون در Package Manager Console عبارت زیر را تایپ کنید:
Install-Package WPtoolkit
- پس از تایپ این، احتمالاً گزارشی مشابه این خواهید دید:
install-package wptoolkit
'WPtoolkit 4.2013.08.16' قبلاً نصب شده است. - افزودن «WPtoolkit 4.2013.08.16» به نسخه نمایشی.
- "WPtoolkit 4.2013.08.16" با موفقیت به نسخه نمایشی اضافه شد.
- مرحله بعدی اضافه کردن مرجع آن به صفحه XAML است. برای انجام این کار فقط این خط را اضافه کنید:
xmlns : toolkit ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
نسخه ی نمایشی
دمو زیر کد اصلی مورد نیاز برای افزودن جعبه تکمیل خودکار در هر پروژه را نشان می دهد. دنبال کردن کد بسیار ساده است و در مراحل زیر کار می کند:
- کنترل جعبه کامل خودکار را به فایل طراحی خود اضافه کنید.
- هر نامی را که می خواهید برای کنترل قرار دهید. این نام از کد پشت برای ارجاع و کنترل رفتار آن استفاده خواهد شد.
- حالا به کد پشت سر بروید. در سازنده صفحه ما تابع "startDemo" را داریم که اساساً دمو را آغاز می کند.
- در داخل دمو شروع، تابع "createRandomItemSource" را داریم که مجموعه ای از رشته های تولید شده به طور تصادفی را آماده می کند. این رشته ها به منظور یک منبع تکمیل خودکار برای کنترل جعبه تکمیل خودکار خدمت می کنند.
- رویداد تغییر انتخاب برای واکشی مورد انتخاب شده استفاده می شود.
- متن جستجو متنی است که توسط کاربر در کادر متن تایپ می شود و توسط ویژگی Search text بازیابی می شود.
بیایید ببینیم چگونه آن را کدگذاری کنیم.
XAML
- <phone:PhoneApplicationPage
- x:Class="Demo.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
- xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
- mc:Ignorable="d"
- FontFamily="{StaticResource PhoneFontFamilyNormal}"
- FontSize="{StaticResource PhoneFontSizeNormal}"
- Foreground="{StaticResource PhoneForegroundBrush}"
- SupportedOrientations="Portrait" Orientation="Portrait"
- shell:SystemTray.IsVisible="True">
- <!--LayoutRoot is the root grid where all page content is placed-->
- <Grid x:Name="LayoutRoot" Background="Transparent">
- <Grid.RowDefinitions>
- <RowDefinition Height="768"/>
- </Grid.RowDefinitions>
- <!--TitlePanel contains the name of the application and page title-->
- <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,512">
- <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
- <TextBlock Text="Demo" Margin="9,-7,0,0" FontSize="40" />
- </StackPanel>
- <!--ContentPanel - place additional content here-->
- <StackPanel Margin="0,256,0,437" >
- <toolkit:AutoCompleteBox x:Name="acb" SelectionChanged="acb_SelectionChanged" Text="Start Typing..." GotFocus="acb_GotFocus" FilterMode="Contains" />
- </StackPanel>
- <TextBlock Text="Selected Item:" FontSize="25" Margin="0,519,307,214"></TextBlock>
- <TextBlock Name="selectedText" Text="None" FontSize="25" Margin="178,519,0,214"></TextBlock>
- <TextBlock Text="Searched Text:" FontSize="25" Margin="0,559,307,174"/>
- <TextBlock x:Name="searchText" FontSize="25" Text="None" Margin="178,559,0,174"/>
- </Grid>
- </phone:PhoneApplicationPage>
کد سی شارپ پشت سر
- using Microsoft.Phone.Controls;
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Net;
- using System.Windows;
- using System.Windows.Controls;
- using System.Diagnostics;
- using Microsoft.Phone.Tasks;
- using System.IO;
- namespace Demo
- {
- public partial class MainPage : PhoneApplicationPage
- {
- // Constructor
- public MainPage()
- {
- InitializeComponent();
- startDemo();
- }
- List<string> textList = new List<string>();
- private void startDemo()
- {
- createRandomItemSource();
- }
- private void createRandomItemSource()
- {
- for (int i = 0; i < 50; i++)
- {
- textList.Add(getRandomText());
- }
- acb.ItemsSource = textList;
- }
- Random random = new Random();
- private string getRandomText()
- {
- var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
- var result = new string(
- Enumerable.Repeat(chars, 8)
- .Select(s => s[random.Next(s.Length)])
- .ToArray());
- return result.ToLower();
- }
- private void acb_SelectionChanged(object sender, SelectionChangedEventArgs e)
- {
- if (acb.SelectedItem !=null)
- {
- selectedText.Text = acb.SelectedItem.ToString();
- searchText.Text = acb.SearchText;
- }
- }
- private void acb_GotFocus(object sender, RoutedEventArgs e)
- {
- acb.Text = "";
- }
- }
- }
خروجی
![](https://www.c-sharpcorner.com/UploadFile/4aac15/getting-started-with-auto-complete-box-in-wp8/Images/wp_ss_20140601_0003.png)