Blogger news

Blogger templates

Sunday, February 27, 2011

Silverlight Autocompletebox

The AutoCompleteBox toolkit control that is included in Silverlight SDK. As you start typing in a textbox, items that match what you are typing are displayed below. You can pick an item from the list instead of having to finish typing it yourself, that's Autocompletebox.

Let's start by step by step explanation with practical.

Step 1:

Open Visual studio 2010 for Silverlight and name the project Autocompletebox as shown below,
Step 2:

Allow to "host the silverlight application in a new website as shown below. Click image to expand


Step 3:

If Autocompletebox is not in tool box add it from Silverlight components as show below. Click images to expand,




Select AutoCompleteBox from components and click ok. Now AutoCompleteBox will add to your tool box.


Add Autocompletebox from the tool box to LayOutRoot grid of MainPage.Xaml

Step 4:

Drag and drop AutoCompleteBox from toolbox to LayoutRoot grid of MainPage.XAML. Now reference to sdk will automatically add to XAML as shown below,

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="Autocompletebox.MainPage"

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" d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<sdk:AutoCompleteBox />
Grid>
UserControl>


set the width and height of AutoCompleteBox as show below,

<sdk:AutoCompleteBox Name="ActCountry" Width="200" Height="25" />


Step 5:

In the code behind, you can then easily add the items that are displayed when the user types by binding a collection to the ItemsSource property. For example, you can bind to a simple collection containing country names as shown below,


using System.Collections.Generic;
using System.Windows.Controls;
namespace Autocompletebox
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.ActCountry.ItemsSource = new List<string> {
"India","Indonesia","Italy","Japan","America","Australia","Germany", "France","Finland","Kuwait","Canada","Switzerland","Quba","Malasia","Netherland","Sweeden"};
}
}
}

Step 6:

Run the application and type Country names in AutoCompleteBox.



No comments:

Post a Comment