Tags: Article

Using .NET - RIA Services and AutoCompleteBox

Prerequisites

 

สำหรับบทความนี้ เราไป ใช้งานคอนโทรล 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 อยู่ก็จะแสดงออกมาให้เราเลือก โดยที่เราไม่ต้องเสียเวลาพิมพ์ข้อความนั้นครบทุกตัวอักษร

 

รูปที่ 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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

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

 

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

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

 

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

รูปที่ 20-21 DomainContext DataBinding

 

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

รูปที่ 22-23 QueryName DataBinding

 

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

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

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

 

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

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

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

รูปที่ 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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

รูปที่ 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>

 

แหล่งข้อมูลดาวน์โหลด

 

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

• .NET RIA Services+Silverlight3 Charting DomainDataSource Binding step by step
• Silverlight RIA Services and AutoCompleteBox

nano

วันที่ส่ง: 15 ก.ย. 52 15:27 GMT+7 วันที่ปรับล่าสุด: 29 ก.ย. 52 16:49 GMT+7

REPLY #1 (113745)

---

REPLY #2 (113748)

---

REPLY #3 (113939)

---

REPLY #4 (114491)

---