Blog

How to create a "Autocomplete in Silverlight Box 3" with MS Expression Blend 3

By Omar L.

In this tutorial, I will explain how to easily create an autocomplete with simple steps, with help of Microsoft Expression Blend 3.0

1 – We create a new application type: Silverlight 3 APPLICATION + WEBSITE, WE CLICK THE PATH, where Our solution will stay,  Then we choose the language and press the OK button.

2 – On the project tab, we open the MainPage.xaml archive, where we have the following code.

 

We now implement a  StackPanel control with the following properties, which will be the container of our Autocomplete control.

<Grid x:Name=”LayoutRoot” Background=””>
    <StackPanel HorizontalAlignment="Center" Margin="0" Width="400" VerticalAlignment="Center"/>
</Grid>

3- No we must insert three new controls within our stackpanel, the code should look like this.

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel HorizontalAlignment="Center" Margin="0" Width="400" Height="120">
         <TextBlock Margin="0" Text="Serch Resources"  TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="24" FontWeight="Bold"/>
        <input:AutoCompleteBox Margin="0,10,0,0" VerticalAlignment="Bottom" FontFamily="Verdana" FontSize="18"/>
        <Button Height="27" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Bottom" Width="105" Content="Button"/>
    </StackPanel>
</Grid>

Así es como estaría nuestro UI, con el código anterior.

4-  As an extra we will add the sieena logo to our UI, dragging it to the UserControl, to the level of the “Root” Grid (the logo was previously added to the image folder).   

This is the way the UI should look like.

5- At last the AutoCompleteBox needs to be populated, for this we will implement a list within our archive,    MainPage.xaml.cs

5.1 We will add the following usings.

using System.Collections;
using System.Collections.Generic;

 

5.2 We assign a name to our AutoCompleteBox control like “resourcesABC”.

 

<input:AutoCompleteBox x:Name="resourcesACB">

 

5.3 After the component has been launched we add the next code, with this code we will start a list to populate our ABC.

 

List<string> resources = new List<string>();

                    

                           resources.Add("Cesar Diaz");

                           resources.Add("Cesar Vazquez");

                           resources.Add("Cesar Olivas");

                           resources.Add("Fer Quiros");

                           resources.Add("Fer Mendoza");

                           resources.Add("Fer Gutierrez");

                           resources.Add("Marlen Rocha");

                           resources.Add("Nicolas Porto");

                           resources.Add("Oliver Nunez");

                           resources.Add("Omar Lara");

                           resources.Add("Otoniel Diaz");

                           resources.Add("Yair Guajardo");

 

5.4 We assign the ItemSource to the AutoCompleteBox, through the x:name to populate it.

 

resourcesACB.ItemsSource = resources;

 

 

5.5 At last we publish our solution with the f5, which will be published at our browser.

 

Thank you.

 

Complete example.

 

 

MainPage.xaml

 

<UserControl

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"

        x:Class="ACB_Silverlight.MainPage"

        Width="640" Height="480">

 

        <Grid x:Name="LayoutRoot" Background="White">

                <StackPanel x:Name="sp" HorizontalAlignment="Center" Margin="0" Width="400" Height="120">

                        <TextBlock Margin="0" Text="Serch Resources:" TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="24" FontWeight="Bold"/>

                        <input:AutoCompleteBox x:Name="resourcesACB" Margin="0,10,0,0" VerticalAlignment="Bottom" FontFamily="Verdana" FontSize="18"/>

                        <Button Height="27" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Bottom" Width="80" Content="OK" FontWeight="Bold" FontSize="14"/>

                </StackPanel>

                <Image Height="88" Margin="0,0,233,0" VerticalAlignment="Top"

                Source="Images/logo_sieena.png" Stretch="Fill"/>

        </Grid>

</UserControl>

 

 

MainPage.xaml.cs

 

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections;

using System.Collections.Generic;

 

namespace SilverlightAutocomplete

{

        public partial class MainPage : UserControl

        {

                public MainPage()

                {

                        // Required to initialize variables

                        InitializeComponent();

                       

                       

                        List<string> resources = new List<string>();

                       

                                resources.Add("Cesar Diaz");

                                resources.Add("Cesar Vazquez");

                                resources.Add("Cesar Olivas");

                                resources.Add("Fer Quiros");

                                resources.Add("Fer Mendoza");

                                resources.Add("Fer Gutierrez");

                                resources.Add("Marlen Rocha");

                                resources.Add("Nicolas Porto");

                                resources.Add("Oliver Nunez");

                                resources.Add("Omar Lara");

                                resources.Add("Otoniel Diaz");

                                resources.Add("Yair Guajardo");

                               

                                resourcesACB.ItemsSource = resources;

 

                }

        }

}

 

 

Comments

On 09 Sep 2010 05:30, kamal Rimal said:

nice post

Leave a comment

 
 
 
 
CAPTCHA Image Validation