Using .NET – RIA Services and AutoCompleteBox


Prerequisites

  1. Microsoft Silverlight 3 Tools for  VS2008 SP1
  2. Microsoft Expression Blend 3 + SketchFlow
  3. Silverlight 3 Toolkit July 2009 Installer
  4. Microsoft .NET RIA Services July 2009 Preview

 

สำหรับบทความนี้ เราไปใช้งานคอนโทรล AutoCompleteBox ซึ่งเป็นหนึ่งคอนโทรลที่อยู่ในชุดคอนโทรล Silverlight Toolkit โดยเราจะใช้แหล่งข้อมูล Datasource จาก .NET – RIA Services (สามารถทำความรู้จัก .NET RIA Services ได้ที่นี่ครับ) เป็นตัวโหลดข้อมูลให้กับคอนโทรล และปรับแต่ง Item template ของคอนโทรล AutoCompleteBox และเนื่องจากเราใช้ .NET RIA Service ฉะนั้นบทความนี้ ก็จะไม่มีโค้ด C# หรือ VB.Net แต่อย่างใด ภาพประกอบบทความอาจจะมากไปหน่อยนะครับ เพื่อว่าจะช่วยให้ผู้อ่านเข้าใจบทความได้ง่ายขึ้นกว่า วิธีการที่จะบรรยายเป็นข้อความ

โดยหน้าแอปพลิเคชันของเราจะง่ายๆ ดังรูปที่หนึ่ง เมื่อเราต้องการค้นหาข้อมูล เช่นต้องการค้นหา Category ที่มีตัวอักษร C อยู่ เมื่อเราพิมพ์ C ลงไปที่ Text Box ข้อมูลที่มีตัวอักษร C อยู่ก็จะแสดงออกมาให้เราเลือก โดยที่เราไม่ต้องเสียเวลาพิมพ์ข้อความนั้นครบทุกตัวอักษร

0

รูปที่ 1 .NET – RIA Services and AutoCompleteBox

 

เราไปดูวิธีการสร้างแอปพลิเคชันกันเลยครับ

ขั้นตอนการสร้างแอปพลิเคชัน

  • ขั้นตอนที่ หนึ่ง สร้างโปรเจ็กต์ Silverlight
  • ขั้นตอนที่ สอง สร้าง ADO.NET Entity Data Model
  • ขั้นตอนที่ สาม สร้าง Domain Service Class
  • ขั้นตอนที่ สี่ ออกแบบหน้าจอแอปพลิเคชันด้วย Expression Blend 3, เพิ่มคอนโทรล AutoCompleteBox และ DomainDataSource
  • ขั้นตอนที่ ห้า ผูกข้อมูล DataContext ให้กับ DomainDataSource control
  • ขั้นตอนที่ หก ผูกข้อมูล DataContext ให้กับ AutoCompleteBox
  • ขั้นตอนที่ เจ็ด ปรับแต่ง AutoCompleteBox Item template
  • ขั้นตอนที่ แปด ผูกข้อมูลให้กับ AutoCompleteBox Item template

 

ขั้นตอนที่ หนึ่ง สร้างโปรเจ็กต์ Silverlight

1 2

รูปที่ 2-3 สร้างโปรเจ็กต์ Silverlight

 

ขั้นตอนที่ สอง สร้าง ADO.NET Entity Data Model (DAL)

3 4

รูปที่ 4-5 สร้าง ADO.NET Entity Data Model

 

เลือกเฉพาะอ็อบเจ็กตาราง Categories

5 6

รูปที่ 6-7 สร้าง ConnectionString ชี้ไปยังแหล่ฐานข้อมูล และเลือกอ็อบเจ็กต์ตารางข้อมูลที่ต้องการ

 

ขั้นตอนที่ สาม สร้าง Domain Service Class (BAL)

7 8

รูปที่ 8-9 Build โปรเจ็กต์หนึ่งครั้ง และสร้าง Domain Service Class

 

เลือก Entities Categories จากนั้นไปที่โปรเจ็กต์ Silverlight แล้วทำการ Add reference

  • System.Windows.Controls.Toolkit.dll => ใช้งาน Chart control
  • System.Windows.Ria.Controls.dll => ใช้งาน DomainDataSource

9 10

รูปที่ 10-11 เลือก Entities Categories และ Add Reference

 

ขั้นตอนที่ สี่ ออกแบบหน้าจอแอปพลิเคชันด้วย Expression Blend 3, เพิ่มคอนโทรล AutoCompleteBox และ DomainDataSource

 

ไปที่โปรเจ็กต์ Silverlight คลิกขวาบนไฟล์ MainPage.xaml => Open in Expression Blend… => จากนั้นเพิ่ม เพิ่มคอนโทรล AutoCompleteBox

11 12

รูปที่ 12-13 เปิดโซลุชันใน Blend 3 และเพิ่มคอนโทรล AutoCompleteBox

 

เพิ่มคอนโทรล DomainDataSource

13 14

 

รูปที่ 14-15 เพิ่มคอนโทรล DomainDataSource และจัดหน้าจอสักเล็กน้อย

 

 

ขั้นตอนที่ ห้า ผูกข้อมูล DataContext ให้กับ DomainDataSource control

 

Build โปรเจ็กต์หนึ่งครั้ง และผูกข้อมูลให้คอนโทรล  DomainDataSource โดยคลิกเลืออ็อบเจ็กต์ DomainDataSource => Properties =>กล่อง Commande Propertiess => DataContext คลิก New

15 16

รูปที่ 16-17 Build โปรเจ็กต์หนึ่งครั้ง และผูกข้อมูลให้คอนโทรล  DomainDataSource

 

ในหน้าต่าง Select Object => เลือก DomainService1=>OK จะเห็นว่า DataContext มีอ็อบเจ็กต์ DomainService1 เรียบร้อยแล้ว

17 18

รูปที่ 18-19 DomainDataSource DataContext  Binding

 

ในกล่อง Miscellaneous => DomainContext =>DataBinding

19 20

รูปที่ 20-21 DomainContext DataBinding

 

=> ในหน้าต่าง Create Data Binding คลิกแทบ Explicit Data Context => DomainService1=>คลิก OK => QueryName = GetCategoriesQuery

21 22

รูปที่ 22-23 QueryName DataBinding

 

ขั้นตอนที่ หก ผูกข้อมูล DataContext ให้กับ AutoCompleteBox

คลิกเลือกอ็อบเจ็กต์ AutoCompleteBox => Properties ไปที่กล่อง Miscellaneous = > ItemsSource => DataBinding…

23 24

รูปที่ 24-25 AutoCompleteBox ItemsSource DataBinding

 

ในหน้าต่าง create Data Binding => แทบ Element Property => เลือก DomainDataSource => Properties =>เลือก Data (IEnumerable) => คลิก OK 

จากนั้นไปที่กล่อง Auto Complete => ValueMemberPath = CategoryName

และที่กล่อง Command Properties => FilterMode = Contains

25 26 26_1

รูปที่ 26-27 AutoCompleteBox Configuration

 

ขั้นตอนที่ เจ็ด ปรับแต่ง AutoCompleteBox Item template

การปรับเทมเพลตคอนโทรล AutoCompleteBox ให้คลิกขวาบนอ็อบเจ็กต์ AutoCompleteBox =>Edit Additional Templates =>Edit Iten Template => Create Empty…
ในหน้าต่าง Create DataTemplate Resource =>Name(Key)=DataTempalate1 => Define in This document (Resource จะใช้งานได้เฉพาะในไฟล์ MainPage.xaml)=>คลิก OK

27 28

รูปที่ 28-29 ปรับเทมเพลตคอนโทรล AutoCompleteBox

 

เปลี่ยน Layout จาก Grid เป็น StackPanel โดยการคลิกขวาบน Grid=> Chang Laout Type => StackPanel

29 30

รูปที่ 30-31 เปลี่ยน Layout จาก Grid เป็น StackPanel

 

ทำการเพิ่ม TextBlock 2 อ็อบเจ็กต์ => ปรับ Layout Orientation = Horizontal

31 32

รูปที่ 32-33 เพิ่ม TextBlock 2 อ็อบเจ็กต์

 

ทำการปรับ Background ของStackPanel โดยเลือกฝีแปลงแบบใล่เฉดสี (Gradient brush) ใส่เฉดสีตามต้องการ

33 34

รูปที่ 34-35 ปรับ Background ของStackPanel

ปรับความกว้างของ TextBlockอ็อบเจ็กต์แรก = 40 ความกว้างของ TextBlockอ็อบเจ็กต์อันที่สอง = 200 และความสูงของ TextBlockทั้งสองอ็อบเจ็กต์เป็น = 30

35 36

รูปที่ 36-37 ปรับความกว้าง-สูงของ TextBlock

 

ขั้นตอนที่ แปด ผูกข้อมูลให้กับ AutoCompleteBox Item template

ผูกข้อมูลให้กับ AutoCompleteBox Item template (TextBlock ที่เราสร้างเมื่อสักครู่) โดยคลิกที่ TextBlock =>Properties ไปที่กล่อง Command Properties => คลิกตรง Text => DataBinding

37 38

รูปที่ 38-39 AutoCompleteBox Item template Binding

 

ในหน้าต่าง Create Data Binding => แทบ Explicit Data Context => ติกเมาส์เลือก Use a custom path expression CategoryID=> คลิก OK จะเห็นว่า Text ถูก Binding เรียบร้อยแล้ว

39 40

รูปที่ 40-41 TextBlock Text binding

 

จากที่เราทำมาทั้งหมดจากรูปที่ รูปที่ 12-13 ถึงรูปที่ 40-41 Expression Blend3 สร้างโค้ด xaml ให้เราดังนี้ครับ

XAML Code:

<UserControl 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"
             xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"
             xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"
             xmlns:Using_NET___RIA_Services_and_AutoCompleteBox_Web="clr-namespace:Using.NET___RIA_Services_and_AutoCompleteBox.Web"
             x:Class="Using.NET___RIA_Services_and_AutoCompleteBox.MainPage"
             d:DesignWidth="640"
             d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <input:AutoCompleteBox Margin="8,37,0,0"
                               VerticalAlignment="Top"
                               ItemsSource="{Binding Data, ElementName=domainDataSource, Mode=OneWay}"
                               ValueMemberPath="CategoryName"
                               HorizontalAlignment="Left"
                               Width="240"
                               IsTextCompletionEnabled="True"
                               FilterMode="Contains" d:LayoutOverrides="HorizontalAlignment">
            <input:AutoCompleteBox.Resources>
                <DataTemplate x:Key="DataTemplate1">
                    <StackPanel Orientation="Horizontal" Width="240">
                        <StackPanel.Background>
                            <LinearGradientBrush EndPoint="0.5,1"
                                                 StartPoint="0.5,0">
                                <GradientStop Color="#FF83BEF8"
                                              Offset="0.5" />
                                <GradientStop Color="White"
                                              Offset="1" />
                                <GradientStop Color="White" />
                            </LinearGradientBrush>
                        </StackPanel.Background>
                        <TextBlock x:Name="textBlock"
                                   Text="{Binding CategoryID, Mode=OneWay}"
                                   Width="40"
                                   Height="30"
                                   Foreground="#FF0D068C" />
                        <TextBlock x:Name="textBlock1"
                                   Text="{Binding CategoryName, Mode=OneWay}"
                                   Width="200"
                                   Height="30"
                                   Foreground="#FF0D068C" />
                    </StackPanel>
                </DataTemplate>
            </input:AutoCompleteBox.Resources>
          <input:AutoCompleteBox.ItemTemplate>
            <StaticResource ResourceKey="DataTemplate1"/>
          </input:AutoCompleteBox.ItemTemplate>
            
        </input:AutoCompleteBox>
        
        <TextBlock Height="25"
                   HorizontalAlignment="Left"
                   Margin="8,8,0,0"
                   VerticalAlignment="Top"
                   Width="119"
                   FontSize="18.667"
                   TextWrapping="Wrap" Text="Category"/>
        <riaControls:DomainDataSource x:Name="domainDataSource"
                                      Height="100"
                                      HorizontalAlignment="Left"
                                      VerticalAlignment="Top"
                                      Width="100"
                                      QueryName="GetCategoriesQuery"
                                      DomainContext="{Binding Mode=OneWay}">
            <riaControls:DomainDataSource.DataContext>
                <Using_NET___RIA_Services_and_AutoCompleteBox_Web:DomainService1 />
            </riaControls:DomainDataSource.DataContext>
        </riaControls:DomainDataSource>
    </Grid>
</UserControl>

 

แล้วทำการทดสอบรันดู แล้วทำการค้นหาข้อมูลท่านผู้อ่านก็จะได้หน้าจอแอปพลิเคชันประมาณรูปที่ 1 ที่กล่าวถึงไปแล้วก่อนหน้านี้ครับ

 

บทความนี้ท่านผู้อ่านได้รู้จัก และใช้งานคอนโทรล AutoCompleteBox และการปรับ Item Template ของAutoCompleteBox เพื่อให้แสดงข้อมูลตามแบบที่เราต้องการรวมถึงการผูกข้อมูลจาก DomainDataSource 

 

หากเกิดข้อผิดพลาดประการใดในบทความนี้ ผู้เขียนขอน้อมรับความผิดพลาดทั้งหมดนั้นไว้แต่เพียงผู้เดียว และยินดีน้อมรับฟังคำชี้แนะ เพื่อแก้ไข และเปลี่ยนแปลงในครั้งต่อๆ ไป (ขอน้อมรับคำชี้แนะผ่าน E-mail:nuchitrwi@hotmail.com)

 

แหล่งข้อมูลดาวน์โหลด
http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/Using.NET-RIAServicesandAutoCompleteBox.zip

 

แหล่งข้อมูลอ้างอิง

ผู้เขียน
Columnist

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน RIA Services

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: