Customize AutoCompleteBox In Silverlight

Intruduction :

Trong bài này mình xin chia sẽ về cách Customize AutoCompleteBox in Silverlight .

Creating Silverlight Project :

image

Tiếp theo chúng ta tạo một Basic Database :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;


namespace CustomizeAutocompleteBoxSL

{

    public class Codes

    {

        public List<Codes> Load()

        {

            List<Codes> codes = new List<Codes>

            {

                new Codes

                {

                    Code = "PN", Name = "Phạm Nguyên"

                },

                new Codes

                {

                    Code = "PD", Name = "Phi Diệp"

                },

                new Codes

                {

                    Code = "CK", Name = "Chí Khang"

                },

                new Codes

                {

                    Code = "MP", Name = "Minh Phúc"

                },

                new Codes

                {

                    Code = "NS" , Name = "Ngọc Sơn"

                },

                new Codes

                {

                    Code = "TK", Name = "Trọng Khoa"

                },

                new Codes

                {

                    Code = "MS", Name = "Minh Sang"

                },

                new Codes

                {

                    Code = "NH", Name = "Ngọc Hiển"

                },

            };

            return codes;

        }


        public string Code { get; set; }


        public string Name { get; set; }

    }

}

Sau đó chúng ta Design Giao diện ứng dụng (dùng Expresstion Blend) :

image

Tiếp theo chúng ta Customize AutoCompleteBox trong code XAML :

<UserControl x:Class="CustomizeAutocompleteBoxSL.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" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">


    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="300">

        <Grid.RowDefinitions>

            <RowDefinition Height="34*" />

            <RowDefinition Height="266*" />

        </Grid.RowDefinitions>

        <Grid.Background>

            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                <GradientStop Color="#FFB7DBB7" Offset="0" />

                <GradientStop Color="White" Offset="1" />

            </LinearGradientBrush>

        </Grid.Background>

        <sdk:AutoCompleteBox  Height="28" ValueMemberPath="Name" HorizontalAlignment="Left" Margin="61,51,0,0" Name="autoCompleteBox" VerticalAlignment="Top" Width="278" Grid.Row="1" >

            <sdk:AutoCompleteBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="{Binding Code}" FontWeight="Bold" Foreground="Black" Width="30"/>

                        <TextBlock Text="{Binding Name}" Foreground="Black"/>

                    </StackPanel>

                </DataTemplate>

            </sdk:AutoCompleteBox.ItemTemplate>

        </sdk:AutoCompleteBox>

        <StackPanel Height="34" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="400">

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="White" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

        </StackPanel>

    </Grid>

</UserControl>

Tiếp theo là Load dữ liệu vào AutoCompletebox :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;


namespace CustomizeAutocompleteBoxSL

{

    public partial class MainPage : UserControl

    {

        Codes code;

        public MainPage()

        {

            code = new Codes();

            List<Codes> myList = new List<Codes>();

            myList = code.Load();

            InitializeComponent();

            autoCompleteBox.ItemsSource = myList;

        }

    }

}

Run Application (Ctrl+ F5) và xem kết quả :

image

image

2 thoughts on “Customize AutoCompleteBox In Silverlight

Leave a comment