Giáo trình Giảng dạy silverlight 2

Nếu bạn đã quen thuộc với công nghệ .Net Framework thì khi tiếp cận với Silverlight bạn sẽ tích kiện được rất nhiều thời gian và chi phí cho công nghệ web mới Nhu cầu cần thiết của thế g

GIÁO TRÌNH GIẢNG DẠY SILVERLIGHT 2

Nhóm tác gi thu c công ty Infoway:

Ph m Chí Cư ng

Tr n Duy Biên

Tr n Duy Long Website: www.infomap.vn Email: Contact@infoway.com.vn

3.6 HQ tr> ngôn ngC tích h>p truy vSn (LINQ)

4 Ki=n trúc tYng thN và các mô hình lLp trình c:a Silverlight

4.1 Ki=n trúc và các thành ph n

4.2 Các mô hình lLp trình c:a silverlight

5 Kh năng hQ tr> trình duy[t, h[ điMu hành và các công ngh[ liên quan

5.1 HQ tr> c:a h[ điMu hành và trình duy[t

5.2 Các công ngh[ và công cH liên quan c:a silverlight

6 HưEng d^n cài đ9t và sK dHng công cH Silverlight 2 trên Visual studio 2008

6.1 Các bưEc cài đ9t công cH silverlight 2

7 Các ví dH th;c hành

7.1 Chương trình đ u tiên “Hello World”

8 Tài li[u tham kh o

Chương II: XAML và Layout

1 TYng quan vM XAML

1.1 Xaml là gì?

1.2 Khai báo đei tư>ng

1.3 Thi=t lLp đ9c tính cho đei tư>ng

1.4 Root elements và namespace trong XAML

1.5 S; ki[n

1.6

2 Các namescope trong XAML

3 SK dHng XAMLReader.Load

4 XAML và các Custom class

5 XAML và Type Converter

6 Layout

6.1 Canvas

6.2 StackPanel

6.3 Grid

3 Xây d;ng chương trình Silverlight 2 vEi Expression Blend và Visual Studio 2008TriNn khai Fng dHng

Chương IV: Các Control và User control trong Silverlight

1 GiEi thi[u vM các control phY bi=n c:a Silverlight SDK tích h>p trong VS2008

2 Các Control PhY bi=n trong Silverlight 2

3 User Control trong Visual Studio 2008

Chương V: Xử lý đồ họa trên Silverlight

Ch ương VII: Làm việc với cơ sở dữ liệu trong Silverlight

1 GiEi thi[u m t vài công ngh[ đN truy cLp dC li[u trong Silverlight

2 SK dHng Data Binding

3 SK dHng Isolated Storage

4 Khái quát vM làm vi[c vEi dC li[u XML

5 Truy cLp dC li[u SQL Server vEi WCF

Chương VIII: Giao tiếp mạng với silverlight

1 Giao ti=p HTTP và b o mLt trong Silverlight

1.1 M9c đDnh hQ tr> giao thFc HTTP

1.2 KDch b n giao ti=p HTTP

1.3 Giao ti=p trong cùng m t domain

1.4 Giao ti=p Crosspdomain

1.5 Thi=t lLp tri[u gsi HTTP

2 Các h n ch= trong truy cLp m ng vEi silverlight

3 Truy cLp web service trong silverlight

3.1 B o mLt cho truy cLp Service

3.2 T o m t Service vư>t qua ph m vi domain

4 Làm vi[c vEi socket

4.1 HQ tr> giao thFc m ng

4.2 LLp trình m ng cơ b n vEi Socket

5 Mã hóa dC li[u c:a service

Chương IX: Hiệu suất hoạt động trong ứng dụng Silverlight

1 Làm th= nào đN chương trình c:a b n ch y nhanh và Yn đDnh

1.1 ThK nghi[m trên nhiMu h[ điMu hành và trình duy[t

1.2 Đ9t EnableFrameRateCounter cho đúng trong th i gian phát triNn

1.3 SK dHng Transparent Background

1.4 Tránh vi[c sK dHng các kDch b n làm bi=n đYi kích cu font c:a Text

1.5 Tránh sK dHng ch= đ Windowless

1.6 SK dHng Visibility thay cho vi[c sK dHng Opacity trong rSt nhiMu trư ng h>p

không c n đ=n s; có m9t c:a Opacity 1.7 Silverlight sK dHng MultipCore trong Rendering và Media

2.1 Bjt đ u vEi vi[c t o m t BackGroundWorker

2.2 T o m t Event handler cho background worker bBi DoWork event

2.3 T o m t event handler cho s; ki[n ProgressChanged c:a backgroundworker 2.4 T o m t s; ki[n cho RunWorkerCompleted

2.5 BY xung s; ki[n vào BackGroundWorker

2.6 Bjt đ u ch y background gsi bBi th: tHc RunWorkerAsync

2.7 H:y bx ho t đ ng c:a background gsi bBi th: tHc CancelAsync

CHƯƠNG I:

TỔNG QUAN VỀ SILVERLIGHT

1 Vì sao l"i có Silverlight?

Sự khó khăn của các doanh nghiệp khi xây dựng chiến lược Web

Ngày nay khi phát triển các ứng dụng trên web các doanh nghiệp phần mềm thường đau đầu với những khó khăn về sự hỗ trợ trên trình duyệt và hệ điều hành Điều họ muốn là với những ngôn ngữ

và công cụ phát triển đã vốn quen thuộc từ trước đến giờ đều có thể làm cho họ những ứng dụng chạy tốt trên mọi nền tảng, mọi trình duyệt Silverlight ra đời như một công nghệ phù hợp cho phép

họ làm được những việc như thế Nếu bạn đã quen thuộc với công nghệ Net Framework thì khi tiếp cận với Silverlight bạn sẽ tích kiện được rất nhiều thời gian và chi phí cho công nghệ web mới

Nhu cầu cần thiết của thế giới đa phương tiện

Các công nghệ plug-in trên web trước đây không cho phép bạn truyền tải những dữ liệu hình ảnh chất lượng cao như 720p HDTV, Trong khi chất lượng đường truyền mạng ngày nay đang ngày càng tốt hơn

và nhu cầu được xem những video chất lượng cao cũng tăng lên thì sự ra đời của Silverlight đã đem

đến cho người đam mê thế giới đa phương tiện một sự thỏa mãn thật sự

2 Silverlight là gì?

Silverlight là một dạng plug-in dựa trên công nghệ của Microsoft Net, nó độc lập với đa nền tảng và đa trình duyệt, nó cho phép phát triển các ứng dụng đa phương tiện đặc biệt là các ứng dụng trên web Silverlight cung cấp một mô hình lập trình lập trình mềm dẻo và đồng nhất, nó hỗ trợ Ajax, Python, Ruby và các ngôn ngữ lập trình Net như Visual basic, C#

Khả năng đa phương tiện của silverlight thể hiện ở mức độ truyền tải âm thanh và hình ảnh chất lượng cao một cách nhanh chóng và hiệu quả trên tất cả các trình duyệt chính như Internet Explorer, Firefox, Safari

tính năng sau:

3.1 Sự kết hợp của WPF và XAML

Silverlight là một gói nhỏ của công nghệ Windows Presentation Foundation (WPF) Nó được mở rộng nhiều hơn các Element trong trình duyệt để tạo giao diện người dùng PWF cho phép bạn tạo ra đồ họa 3 chiều, hình ảnh động, đa phương tiện và nhiều tính năng phong phú khác trên máy khách XAML (Extensible Application Markup Language) cung cấp các cú pháp đánh dấu đặc trưng cho việc tạo các Element

3.4 Sử dụng mô hình ngôn ngữ lập trình trên nền tảng Net Framework và các công

cụ để kết hợp

Bạn có thể tạo các ứng dụng trên nền tảng Silverlight và sử dụng các ngôn ngữ động như InronPython cũng như là các ngôn ngữ C# và Visual Basic Bạn cũng có thể sử dụng các công cụ phát triển như Visual Studio để tạo ứng dụng trên nền tảng Silverlight

3.5 Hỗ trợ mạng

Silverlight bao gồm các hỗ trợ cho HTTP qua TCP Bạn có thể kết nối tới các dịch vụ của WCF, SOAP, hoặc ASP.NET AJAX và nhận về các định dạng theo cấu trúc XML, JSON hay dữ liệu RSS

3.6 Hỗ trợ ngôn ngữ tích hợp truy vấn (LINQ)

Điều này cho phép bạn truy cập dữ liệu bằng cách sử dụng cú pháp trực quan tự nhiên và mạnh mẽ, được gõ bởi các đối tượng có trong các ngôn ngữ Net Framework

4 Ki5n trúc t7ng th8 và các mô hình l;p trình c2a Silverlight

4.1 Kiến trúc và các thành phần

Về cơ bản Silverlight là một nền tảng thống nhất của nhiều thành phần khác nhau Tuy nhiên chúng tôi nhóm lại các thành phần chính của silverlight vào bảng dưới đây

Nền tảng trình bày cơ sở Các thành phần và dịch vụ hướng tới giao diện người dùng và tương tác người

dùng, bao gồm các control cho dữ liệu cho người dùng nhập, thiết bị đa phương tiện, quản lý phân quyền số, trình bày dữ liệu, đồ họa vector, chữ, hình ảnh động cũng bao gồm XAML để đặc tả việc bố trí giao diện

.Net Framework cho

silverlight

Là một gói nhỏ trong Net Framework, bao gồm các thành phần và cá thư viện,

kể cả tương việc tương tác dữ liệu, khả năng mở rộng các control, mạng, garbage collection, và CLR

Cài đặt và cập nhật Là thành phần để sử lý các tiến trình cài đặt làm sao để đơn giản hóa cho lần cài

đặt đầu tiên, tiếp sau đó chỉ cung cấp cơ chế tự động cập nhật và tương tác ở mức thấp

Dưới đây là hình ảnh mô tả những thành phần trong kiến trúc của Silverlight cùng với các thành phần

Trình bày dữ liệu

(Data Binding)

Cho phép việc kết nối dữ liệu của các đối tượng và các thành phần giao diện người dùng

DRM Khả năng Quản lý phân quyền số

XAML Cung cấp trình phân tách cho XAML

Các lập trình viên có thể tương tác với thành phần nền tảng trình bày cơ sở trên đây bằng cách sử dụng XAML để đặc tả XAML là một yếu tố quan trọng nhất trong việc tương tác giữa Net Framwork

và các kiểu trình bày Layout, ngoài ra các lập trình viên cũng có thể sử dụng cơ chế quản lý code bên trong để thao tác với lớp trình bày

.Net Frame work for Silverlight:

Data

Hỗ trợ ngôn ngữ truy vấn tích hợp (LINQ) và LINQ với đặc tả XML, dễ dang

xử lý việc tích hợp và làm việc với dữ liệu từ nhiều nguồn khác nhau Hỗ trợ việc sử dụng XML và các lớp biên đổi hóa (serialization) để xử lý dữ liệu

Base class library

Thuộc thư viện của Net Framework, nó cung cấp các chức năng lập trình chủ yếu như việc xử lý chuỗi, biểu thức chính quy, đầu vào và đầu ra, ánh xạ, tập hợp và toàn cục hóa

4.2 Các mô hình l;p trình c2a silverlight

= phiên b@n Silverlight 1.0 cung cCp cho b"n duy nhCt mEt mô hình l;p trình là Javascript API, cho đ5n phiên b@n Silverlight 2.0 đã cung cCp c@ hai mô hình l;p trình là Managed API và Javascript API Trong khi Javascipt API chL cho phép b"n gõ mã lOnh Javascript đ8 tương tác vRi trình duyOt thì Managed API đã sS dTng đưUc cơ ch5 làm viOc c2a Common Language

Runtime (CLR) và k8 c@ Dynamic Language Runtime (DLR) đ8 biên dYch và thi chương trình code (C#, VB\) c2a b"n

4.2.1 Javascript API

Trong mEt chương trình silverlight nhúng theo ki8u Javascript API, nó t@i chL mEt trang XAML đơn l^ thay vì t@i mEt gói _ng dTng Trang XAML này có th8 bao g`m các tham chiau URI tb nhcng ngu`n bên máy ch2 khác như là các đo"n video và hình @nh Silverlight nhúng sS dTng XAML đ8 t"o mEt cây đei tưUng cái mà b"n có th8 thao tác l;p trình vRi javascript lưu trc bên trong mEt trang HTML

Javascript API không cung cCp mEt mô hình _ng dTng có kh@ năng hh trU các _ng dTng t7 hUp vRi si điau hưRng bên trong Tuy nhiên nó cho phép làm nhcng kYch b@n theo ki8u Splash screan B"n cũng có th8 làm các si điau hưRng trong Javascript API bkng cách t@i l"i trang XAML mRi ho0c t@i l"i c@ trang web đó trong trình duyOt

5 Kh@ năng hh trU trình duyOt, hO điau hành và các công nghO liên quan

5.1 Hh trU c2a hO điau hành và trình duyOt đưUc mô t@ p b@ng dưRi đây

Operating system

Internet Explorer 7

Internet Explorer 6

Firefox 1.5, 2.x, and 3.x

Safari 2.x and 3.x

5.2 Các công nghO và công cT liên quan c2a silverlight

SS dTng công cT này b"n b"n có th8 t"o và thay đ7i cách xrp x5p trình bày Layer c2a _ng dTng bkng cách thao tác đ5n canvas và control trong XAML, làm viOc vRi các ch_c năng đ` hsa, L;p trình vRi ngôn ngc Javascript

Visual Studio cung cCp các công cT hiOu qu@ cho viOc phát tri8n các _ng dTng có hh trU thao tác code bên tron TCt c@ các phiên b@n đã có c2a Visual Studio đau có kh@ năng hh trU Silverlight,Tuy nhiên p phiên b@n mRi này nó còn hh trU các tính năng đ0c

v ASP.NET Silverlight Server Control

% # : Bao g`m IIS (Microsoft Internet Information Services), và Apache Web server

& $ ' (( ) *&')) services

6 HưRng dyn cài đ0t và sS dTng công cT Silverlight 2 trên Visual studio 2008

6.1 Các bưRc cài đ0t công cT silverlight 2

v T@i file Silverlight_Tools.exe có trên trang:

http://www.microsoft.com/downloads/details.aspx?familyid=C22D6A7Bv546Fv4407v8EF6vD60C8EE221ED&displaylang=en

v B"n ph@i chrc chrn rkng máy tính c2a b"n đã cài đ0t Visual Studio 2008 SP1

v Ch"y file Silverlight_Tools.exe, chm kho@ng 1 phút đ8 hiOn thY Silverlight tools

installation Winzard

v BCm next đ8 đ5n bưRc 2, tích chsn “I have read an accept the license terms”

v BCm Next đ8 hO theng ti đEng ki8m tra tương thích( lưu ý: ph@i đóng h5t các trình duyOt web)

v Đ8 hO theng cài đ0t và hoàn thành

7 Các ví dT thic hành

7.1 Chương trình đuu tiên “Hello World”

v Tạo mới một Project: chọn File -> New -> Proeject

v Một cửa sổ mới “New Project” hiển ra Chọn Visual C# (hoặc Visual basic) trong Project types, chọn Silverlight Phía bên phải cửa sổ cho phép bạn chọn các Templale

v Chún ta chọn Silverlight Application trong Templates

v Đặt tên chương trình đầu tiên là “HelloWorld”, tùy chọn Location, bấm OK

v Bạn có thể chọn Project Type theo mặc định trong hội thoại Add Silverlight application, bấm OK

v Solution mới được tạo ra với 2 project: Silverlight project và web project( dùng để nhúng silverlight tạo bởi silverlight project)

Trong thư mục ClientBin của web project (HelloWorld.Web) chứa ứng dụng silverlight được đóng gói dưới dạng file HelloWorld.xap của project silverlight (HelloWorld)

Toàn bộ màn hình ứng dụng đầu tiên của bạn được nhìn thấy như sau

v Chúng ta làm 2 phương pháp một là viết code C# trong code ứng dụng, hai là viết trực tiếp trong XAML

7.1.1 Viết chương trình bằng Code C#

v Trong file Page.xaml.cs chúng ta bắt đầu với việc tạo một nút theo những dòng lệnh dưới đây // Khai bao button

myButton = new Button();

//Xác ñ#nh các thu$c tính cho myButton

myButton.Content = "Click Me" ;

myButton.Height = 25;

myButton.Width = 100;

myButton.Margin = new Thickness(10, 10, 0, 0);

//ðưa myButton vào LayoutRoot

LayoutRoot.Children.Add(myButton);

v Để tạo sự kiện cho một nút chúng ta cần thêm những dòng lệnh sau vào

//thêm phương th>c x@ lý sB kiCn cho myButton

myButton.Click += new RoutedEventHandler(myButton_Click);

void myButton_Click( object sender, RoutedEventArgs e)

{

//HiHn th# thông ñiCp trên trình duyCt

System.Windows.Browser.HtmlPage.Window.Alert( "Hello Silverlight World!" ); }

v Bấm F5 để chạy chương trình

< Button Name="myButton" Content="Click me" Width="100"Height="25"></ Button >

</ Grid >

</ UserControl >

v Gán sự kiện xử lý khi click

v Bấm F5 để chạy ứng dụng Cả hai phương thức viết trên đều cho ra một kết quả như hình vẽ sau

8 Tài liOu tham kh@o

v Silverlight Deverloper center: http://msdn.microsoft.com/en&us/library/bb404708(VS.95).aspx

v Website chính của Silverlight: http://silverlight.net/

1.2 Khai báo đối tượng

Có hai cách để khai báo đối tượng trong XAML:

1.2.1 Khai bao trực tiếp:

Sử dụng thẻ đóng mở để khai báo một đối tượng giống như là một phần tử XML Bạn cũng có thể sử dụng cú pháp này để khai báo đối tượng gốc (root object) hoặc để xét các giá trị các thuộc tính

1.2.2 Khai báo gián tiếp:

Sử dụng giá trị trực tiếp để khai báo một đối tượng Bạn có thể sử dụng cú pháp này để thiết lập giá trị của thuộc tính.Thông thường, điều này có nghĩa là chỉ những thuộc tính mà được hỗ trợ bởi đối tượng mới có thể sử dụng được phương pháp này

1.3 Thiết lập đặc tính cho đối tượng

Có những cách sau để khai báo đặc tính cho đối tượng:

1.3.1 Sử dụng cú pháp theo thuộc tính

Dưới đây là ví dụ xét giá trị cho các thuộc tính: Width, Height, Fill của đối tượng Rectangle:

<Rectangle Width= "100" Height= "100" Fill= "Blue" />

1.3.2 Sử dụng cú pháp theo đặc tính của thành phần(element):

Dưới đây là ví dụ xét đặc tính Fill theo cách này cho đối tượng Rectangle:

< Rectangle Width="100" Height="100">

< Rectangle.Fill >

< SolidColorBrush Color="Blue"/>

</ Rectangle.Fill >

</ Rectangle >

Đây là một trường hợp khá thú vị trong XAML, bởi có những cách khác nhau để thể hiện tập hợp này Hơn nữa nó có thể xuất hiện ở phần đầu tiên của XAML cho phép bạn xét những đặc tính chỉ đọc (read-only) của đối tượng

Dưới đây là ví dụ xét đặc tính theo những cách khác nhau sử dụng theo kiểu tập hợp

< GradientStop Offset="0.0" Color="Red" />

< GradientStop Offset="1.0" Color="Blue" />

< GradientStop Offset="0.0" Color="Red" />

< GradientStop Offset="1.0" Color="Blue" />

< LinearGradientBrush >

< GradientStop Offset="0.0" Color="Red" />

< GradientStop Offset="1.0" Color="Blue" />

</ LinearGradientBrush >

1.4 Root elements và namespace trong XAML

Một file XAML chỉ được có duy nhật một Root element và phải thỏa mãn cả hai tiêu chí sau: formed XML(có mở và đóng thẻ) và valid XML(tuân thủ theo Document Type Definition(DTD)) Ví dụ dưới đây cho Root element điển hình của XAML cho Silverlight với Root element là thành phần

1.5 S ki n

XAML là một ngôn ngữ khai báo cho đối tượng và những đặc tính của chúng, nhưng nó cũng bao gồm những cú pháp cho sự kết hợp sự kiện cho đối tượng trong những thẻ đánh dấu Bạn chỉ rõ tên của sự kiện như là một thuộc tính tên trên đối tượng mà sự kiện được nghe Về giá trị của thuộc tính, bạn chỉ

rõ tên của hàm nghe sự kiện mà bạn định nghĩa ở phần code-behind hoặc ở phần javascript

Việc có khai bao hay không đặc tính x:Class ở thẻ root trong XAML có ảnh hưởng đến việc xử lý sự

kiện Nếu bạn khai báo x:Class tức là việc xử lý sự kiện của bạn sẽ được thực hiện trong code-behind, trường hợp này thường xuất hiện trong kiểu lập trình Managed API (chứa trong silverlight 2.0) Còn ngược lại thì việc xử lý sự kiện của bạn được thực hiện ngay trong thẻ Javascript chứa trong HTML, trường hợp này thường xuất hiện trong kiểu lập trình JavaScript API (chứa trong Silverlight 1.0)

Ví dụ dưới đấy chỉ rõ cho bạn thấy cách tạo một sự kiện trong trường hợp kiểu lập trình Manged API

< UserControl x:Class="Chapter2.Page"

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

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

Width="400" Height="300">

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

< Button Click="Button_Click" Content="Click me"></ Button >

</ Grid >

</ UserControl >

Doạn mã trên, trong thẻ root <UserControl> chúng ta đã khai báo đặc tính x Class="

Chapter2.Page" , điều này có nghĩa trong chương trình của chúng ta có một file chứa class

Chapter2.Page Class này sẽ đảm nhiệm việc xử lý các sự kiện đã khai báo ở file XAML ( Page.xaml ) Trong thẻ <Grid> chúng ta tạo thêm một nút <Button> và khai báo trong nút đó một sự kiện

Click="Button_Click".Sự kiện này sẽ được xử lý ở trong code-behind như sau

//Xu ly su kien Button click o day

MessageBox.Show( "Xin chao!" );

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

< Button x:Name="button1" Click="Button_Click" Content="Button 1"></ Button >

</ Grid >

</ UserControl >

Trong Silverlight, một XAML namescope lưu trữ quan hệ giữa những tên từ khóa của XAML đã được định nghĩa của đối tượng và những khởi tạo tương đương của nó Điều này cũng tương tự như ý nghĩa của “namescope” trong các ngôn ngữ lập trình và công nghệ khác XAML namescope được tạo ra trong quá trình dịch mã XAML và trong quá trình tạo hình đối tượng Những tên mà được tạo trong

namescope sau đó được sử dụng ở code-behind thao tác lúc chạy chương trình để truy cập tới đối tượng được tạo bởi quá trình dịch file XAML Để biết thêm chi tiết các bạn có thể tham khảo tại địa chỉ: http://msdn.microsoft.com/en-us/library/cc189026(VS.95).aspx

3 Sử dụng XAMLReader.Load

Sử dụng JavaScript API cho Silverlight, để tạo đối tượng trong lúc thực thi ứng dụng bắt buộc phải sử dụng qua phương thức CreateFromXaml Sử dụng manged API những class hoặc cấu trúc (structure) cho phép có thêm các thành phần bên trong thực sự được khởi tạo nếu nó có trong cây thành phần của Silverlight Trong hầu hết các trường hợp mà bạn muốn khởi tạo đối tượng trong lúc thực thi, bạn

có thể đơn giản triệu gọi constructor của class liên quan tới nó

Tuy vậy, Bạn vẫn có thể tạo đối tượng thông qua đầu vào là XAML thông qua managed API, qua việc sử

dụng phương thức XamlReader.Load

Phương thức Load trong managed API là tương ứng với CreateFromXaml trong JavaScript API, cũng giống như CreateFromXaml, đầu vào cho phương thức Load là những chuỗi và đầu ra là những đối

tượng mà có thể thêm vào mạng đối dạng cây của Silverlight

XamlReader đơn giản được thiết kể để đọc xml “XmlReader” có trong Silverlight cũng như trong các

công nghệ khác của Microsoft XamlReader là lớp được xây dựng theo kiểu static với những phương

thức tạo đối tượng; nó tạo đối tượng song song với việc xử lý XAML để sinh ra trong lúc thực time) những cây đối tượng từ XAML trong Silverlight

thi(run-Các bạn cần lưu ý những điểm sau khi sử dụng phương thức Load:

Nội dung chuỗi XAML phải định nghĩa một phần tử gốc (root element) Nội dung chuỗi XAML phải là well-formed XML, và valid XML

4 XAML và các Custom class

XAML hỗ trợ khả năng có thể định nghĩa tùy chỉnh lớp(custom class) hoặc cấu trúc(structure) trong bất

kỳ ngôn ngữ runtime nào (CLR), và sau đó truy cập vào class thông qua thẻ đánh dấu của XAML(XAML markup), bao gồm cách sử dụng hỗn hợp của những thẻ Silverlight đã định nghĩa trong XAML và những thẻ XAML mà tham chiếu tới custom class tương ứng của nó (Mỗi custom class chứa tương ứng 2 file cs và xaml, ví dụ: myclass.xaml và myclass.xaml.cs)

4.1 Custom class trong ứng dụng hoặc Assemblies

Custom class dùng trong XAML có thể định nghĩa theo cách riêng biệt:

Trong code-behind được đóng gói trong ứng dụng Silverlight

Như là một class được định nghĩa trong một assembly tách biệt, như là một thư viện thực thi hoặc DLL

Mỗi cách trên đều có những ưu và nhược điểm như sau:

Ưu điểm của việc tạo class và đóng gói riêng biệt là khả năng có thể chia sẻ và dùng được trong nhiều ứng dụng Silverlight khác Đồng thời là khả năng quản lý phiên bản của control dễ dàng hơn và nó làm cho nó có khả năng tạo ra class mà bạn dự dịnh sử dụng như là một root

element trong trang XAML

Ưu điểm của việc tạo custom class trong ứng dụng là về mặt kỹ thuật tương đối đơn giản và giảm thiểu kích cỡ và kiểm tra khi bạn gặp vấn đề trong dự án Silverlight dựa trên code-behind Tuy nhiên có điểm hạn chế là bạn không thể dùng custom class như là một root element Bạn phải tham chiếu custom class của bạn qua một assembly khác hoặc là giới hạn subclass sử dụng User Control hỗ trợ code-behind trong dự án Silverlight của bạn

Dù là định nghĩa trong cùng một assembly hay assembly khác nhau, custom class phải được ánh xạ qua CLR namespace và XML namespace để được tham chiếu trong XAML

4.2 Ràng buộc để Custom Class trở thành thành phần đối tượng trong XAML

Để được tạo đối tượng như là một thành phần đối tượng của XAML, custom class của bạn phải đáp ứng các yếu tố sau đây:

Custom class phải để public và hỗ trợ khởi tạo mặc định không có tham số truyền vào (default constructure ‘parameterless’)

Custom class không phải là class lồng(class lồng và dấu chấm ‘.’ ở cú pháp của nó ảnh hưởng tới những đặc điểm của Silverlight như là các property kèm theo

Ngoài ra để đối tượng của bạn như là một thành phần đối tượng của XAML, bạn có thể cho phép sử dụng những property cho các public property của Custom class của bạn điều này làm cho Custom class của bạn như là một kiểu property Điều này bởi vì bây giờ đối tượng có thể được khởi tạo giống như một thành phần đối tượng và có thể xét thuộc tính cho nó như là một property

4.3 Yêu cầu đối với sự kiện trong XAML đối với Custom class

Để sử dụng cú pháp theo kiểu thuộc tính để tương tác với sự kiện trong XAML, sự kiện phải được public trong class mà hỗ trợ constructure mặc định, hoặc sự kiện phải được định nghĩa trong class trừu tượng và sau đó sự kiện có thể truy cập được qua những class kế thừa

6.1 Canvas

Định nghĩa một khu vực mà trong đó bạn có thể chỉ ra vị trí của từng đối tượng thành phần bằng cách

sử dụng các tọa độ tham chiếu Bạn có thể sử dụng lồng các Canvas với nhau và những thành phần bên trong của Canvas phải là một UIElement Trong nhiều trường hợp thì Canvas chỉ đóng vai trò như một đối tượng để chứa đựng những đối tượng khác và không có một thuộc tính hiển thị nào Một Canvas sẽ không được hiển thị nếu nó có một trong những thuộc tính sau đây:

Thuộc tính Height xét giá trị 0

Thuộc tính Width xét giá trị 0

Background bằng null hoặc là Nothing ở VS Basic

Opacity xét giá trị 0

Visibility bằng Visibility.Collapsed

Một trong những Canvas ở mức độ cao hơn (parrent) của nó không được hiển thị

Ví dụ dưới đây chỉ ra là hình chữ nhật được cách trái 30pixel và cách trên 30pixel

< Canvas Width="640" Height="480" Background="White">

< Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" />

</ Canvas >

6.2 StackPanel

Sắp xếp những thành phần bên trong nó thành một dòng và có thể hiển thị theo hai kiểu ngang hoặc là

dọc Giá trị mặc định được gán chọ thuộc tính Orientation là chiều dọc (Vertical) và giá mặc định được xét cho hai thuộc tính HorizontalAlignment và VerticalAlignment là Stretch

Ví dụ dưới đây hướng dẫn cách tạo những những đối tượng trong StackPanel

< StackPanel Margin="20">

< Rectangle Fill="Red" Width="50" Height="50" Margin="5" />

< Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />

< Rectangle Fill="Green" Width="50" Height="50" Margin="5" />

< Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />

</ StackPanel >

6.3 Grid

Định nghĩa dạng lưới phức tạp bao gồm những dòng và cột Mặc định Grid chứa một cột và một dòng

Để định nghĩa nhiều cột hoặc dòng chúng ta dùng ColumnDefinitions và RowDefinitions Mỗi

ColumnDefinition và RowDefinition trong ColumnDefinitions và RowDefinitions xác định một dòng

hoặc cột ColumnDefinition và RowDefinition cũng định nghĩa kích thước của mỗi cột và dòng sử dụng đối tượng GridLength

Ví dụ: Dưới đây là ví dụ dùng Grid để lên một thiết kế giao diện cơ bản

< Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300"

< TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="10"

FontWeight="Bold" Text="Contoso Corporation" HorizontalAlignment="Center"

//Tạo Stackpanel cho ListBox Control

StackPanel DeptStackPanel = new StackPanel();

DeptStackPanel.Margin = new Thickness(10);

//Tạo StackPanel cho các nút

StackPanel ButtonsStackPanel = new StackPanel();

ButtonsStackPanel.Margin = new Thickness(10);

ButtonsStackPanel.Orientation = Orientation.Horizontal;

ButtonsStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

LayoutRoot.Children.Add(ButtonsStackPanel); Grid.SetColumn(ButtonsStackPanel, 0);

BackButton.Margin = new Thickness(10); CancelButton.Margin = new Thickness(10); NextButton.Margin = new Thickness(10); }

}

CHƯƠNG III:

SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL

STUDIO 2008

1 Gi*i thi,u v các công c3 phát tri6n Expression Blend 2 k;t h<p v*i VS2008

Expression Blen là một công cụ thiết kế chuyên nghiệp và đầy đủ tính năng để tạo các giao diện người dùng cho các ứng dụng trên nền tảng Microsoft Silverlight và Microsoft Window Bằng việc tách rời mỗi tệp tin của dự án theo vai trò, Epxpression Blend cho phép nhà thiết kế chỉ cần tập trung vào việc sáng tạo còn các lập trình viên thì tập trung vào công việc lập trình Mỗi thành viên nhóm có thể làm việc

mà không làm cản trở đến quá trình làm việc của người khác

Expression Blend có thể làm ra các ứng dụng Windows Presentation Foundation(WPF), trang web Silverlight 1.0, User control cho Silverlight 2 (file xap và các file hỗ trợ khác) Các thiết kế của bạn (visual design) được trình bày theo ngôn ngữ đánh dấu là XAML

1.1 Expression Blend làm vi,c như th; nào?

Trong Expression Blen, Bạn có thể thiết kế ứng dụng một cách trực quan, vẽ các hình, đường kẻ, và các Control có trên Artboard, và sau đó bạn có thể thay đổi sự xuất hiện và các hành động của chúng Bạn

có thể nhập hình ảnd, video, và âm thanh Còn trong các ứng dụng trên nền tảng Window, bạn còn có thể nhập và thay đổi các đối tượng 3D

Bạn có thể tạo các storyboard để làm chuyển động hình trong thiết kế của bạn, sau đó tùy trọn Trigger trong Storyboard khi người dụng có tương tác với ứng dụng của bạn

1.2 NhBng tính năng có đư<c tG Expression Blend

Expression Blend 2 bao gIm các tính năng sau:

J ĐLy đM bN các công c3 vO vector, nó bao gIm Text và các công c3 3D

J DR dàng sS d3ng, giao di,n trTc quan hi,n

J KhW năng chuy6n đNng thXi gian thTc

J 3D and media support for enhancing user experiences

J HY tr< tăng cưXng cho ngưXi dùng nhi.u kinh nghi,p v*i 3D và Media

J Advanced, flexible, and reusable customization and skinning options for a variety of common controls

J Nâng cao, linh đNng, tùy bi;n hóa các tính năng sS d3ng l^i, các lTa ch_n b m`t cho mNt vào control pha bi;n

J Tính năng tương tác m^nh mO v*i các nguIn dB li,u và các tài nguyên bên ngoài

J Tính năng thi;t k; theo RealJtime và markup views

2 Bgt đLu nhanh v*i Silverlight 2 trên Expression Blend 2

2.1 T^o mNt Project cho ing d3ng Silverlight 2

B^n có th6 t^o mNt Project Silverlight 2 trong Microsoft Expression Blend 2 sau khi đã cài đ`t Service Pack1 v*i Expression Blend, mNt Project Silverlight sO xây dTng mNt ing d3ng Silverlight 2 v*i sT hY tr< các file bao gIm mNt trang HTML đ6 ki6m tra có tên là Default.html

nó sO tWi ing d3ng cMa b^n vào trình duy,t cMa window

Các bư*c t^o project cho silverlight 2 như sau

1 Trên thanh menu ch_n File và ch_n NewProject( CTRL+SHIFT+N)

2 Trong hNp hNi tho^i New Project , phí dư*i ch_n project type là Silverlight 2 Application

3 Đ`t tên cho project cMa b^n, cái này sO tro thành tên thư m3c và tên namespace cMa ing d3ng

4 Ti;p theo là ch_n vq trí lưu trB project trên a cing cMa b^n brng cách tìm trong nút

2.2 VO khuôn hình (Shape) trên ing d3ng Silverlight

1 Trong hNp toolbox ch_n mNt trong các công c3 shape sau: Hình chB nhdt ho`c hình Ellipse

2 Trong khuôn vùng thi;t k;, b^n có th6 kéo chi.u rNng ho`c chi.u dài hình chB nhdt này theo hư*ng di chuNt

M o:

N;u b^n giB SHIFT khi kéo sO giB đư<c chi.u rNng và chi.u cao cùng kích thư*c làm như vdy sO t^o ra mNt hình vuông đyi v*i hình chB nhdt, và hình tròn đyi v*i hình ellipse

M o:

N;u b^n giB ALT khi b^n vO m*i mNt hình chB nhdt ho`c hình ellipse thì công c3 vO này

sO tT đNng ch_n đi6m nhgp chuNt ban đLu làm tâm đ6 vO

3 Lưu các thay đai (CTRL+S)

2.3 Thi;t k; Control trên ing d3ng Silverlight

Các bư*c đ6 thi;t k; control

1 Trong hôpk Toolbox, ch_n control là Textbox

2 Trong khuôn vùng thi;t k;, vO TextBox này brng cách kéo thW chuNt đyi tư<ng trW v

sO là mNt TextBox mà b^n có th6 sSa nNi dung chB hi,n thq trên TextBox đó ngay

B^n có th6 phóng to, thu nh{, xoay, di chuy6n và thTc thi các sT ki,n

3 Lưu các thay đai (CTRL+S)

3 Xây dTng chương trình Silverlight 2 v*i Expression Blend và Visual Studio

2008

Trong m3c này chúng ta sO xây dTng mNt ing d3ng Silverlight 2 dùng đ6 dT báo thXi ti;t t^i cac vùng trên toàn th; gi*i Chương trình ing d3ng này có sT d3ng k;t h<p visual studio

2008 và Expression Blend

Chúng ta sO xây dTng chương trình v*i k;t quW là giao di,n mô tW dư*i đây

Trư*c tiên hãy xem qua c|u trúc ing d3ng trong Visual Studio 2008 sau khi đã t^o m*i mNt Project Silverlight

Trong project WeatherWidget chúng ta có mNt tham chi;u t*i mNt Web service đ6 tri,u g_i dB li,u dT báo thXi ti;t v*i liên k;t http://a4472706772.api.wxbug.net/weatherservice.asmx Đ6 k;t nyi t*i mNt web service chúng ta có th6 xem thêm o liên k;t sau đây

Bây giX chúng ta lLn lư<t t^o các Layout cho ing d3ng trên Expression Blend

Đ6 thi;t k; mNt l*p hình n.n cho ing d3ng Trên Toolbox, chuNt phWi ch_n Canvas Sau đó đ`t tên cho Canvas này là LayoutRoot

V*i LayoutRoot ta ch_n hình n.n trong Resource đã đư<c đqnh nghĩa s„n, chúng ta sO có theo hình Wnh dư*i đây

Ti;p theo chúng ta lLn lư<t t^o thêm các Layout là các Canvas và StackPanel tương tT như v*i LayoutRoot đ6 có đư<c các hình Wnh giao di,n dư*i đây

Dư*i đây là các đo^n mã Xaml tT sinh trong quá trình thi;t k; v*i Expression Blend

<Canvas x:Name="LayoutRoot" Width="264" Height="194" Background="{StaticResource blueBase}"> <Canvas Canvas.Top="13" Canvas.Left="13" Width="230" Height="160">

<TextBlock Width="225" Height="14" TextAlignment="Right"

x Name="City" Text="ðang l>y d? li@u " />

</StackPanel>

</Canvas>

<StackPanel Orientation="Horizontal" Height="53">

<Canvas Width="71" Background="{StaticResource dividerVertical}"

<TextBlock Canvas.Top="20" x:Name="TomorrowHi" Foreground="White" /> <TextBlock Canvas.Top="35" x:Name="TomorrowLo" Foreground="White" Opacity="0.5" />

</Canvas>

<Canvas Width="71" Margin="5, 0, 0, 0">

<TextBlock FontSize="11" x:Name="TwoDaysAwayName" Foreground="White" Opacity="0.5" />

<Image x:Name="TwoDaysAwayImage" Canvas.Top="17" Canvas.Left="23" /> <TextBlock Canvas.Top="20" x:Name="TwoDaysAwayHi" Foreground="White" />

<TextBlock Canvas.Top="35" x:Name="TwoDaysAwayLo" Foreground="White" Opacity="0.5" />

</Canvas>

</StackPanel>

<StackPanel Height="17" Background="{StaticResource dividerHorizontal}" Orientation="Horizontal" >

<TextBlock Text="Làm tươi" Margin="5, 0, 5, 0" Width="105"

Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Refresh" />

<TextBlock Text="Change ZIP" Margin="5, 0, 5, 0" Width="105" TextAlignment="Right"

Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Zip" /> </StackPanel>

{

}

Brng vi,c sT d3ng k;t h<p giBa Visual studio và Expression Blend, các sT cdp nhdt v mã l,nh cũng như các file trong ing d3ng luôn đư<c thông báo đ6 2 chương trình cùng có đư<c cdp nhdt m*i nh|t

Sau khi thi;t k; đLy đM các layout trên Expression Blend, vi,c còn l^i chM yêu là dành cho ngưXi ldp trình mã l,nh trên Visual Studio Visual studio sO đóng gói ing d3ng này thành file xap (o đây là WeatherWidget.xap) file này sO đư<c tri6n khai o b|t kỳ mNt trang html hay aspx v*i dòng l,nh dư*i đây

Microsoft Silverlight" style="border4style : none"/>

</ a >

</ object >

Trên trang ASPX :

< asp : Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ WeatherWidget.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

Trên Visual studio b|m F5 đ6 ch^y ing d3ng ta sO có k;t quW dư*i đây :

CHƯƠNG IV:

CONTROL VÀ USER CONTROL TRONG SILVERLIGHT

1 Gi i thi!u v# các control ph( bi*n c+a Silverlight SDK tích h1p trong VS2008 Các Control trong silverlight cho phép bạn lưu trữ nội dung hoặc các control khác, bạn có thể tạo hoặc

tự thiết kế được các control này để chúng hiển thị được những thay đổi trạng thái tới người dùng

Trong công cụ phát triển Visual studio 2008 đã tích hợp các công cụ silverlight (Cài đặt

Siverlight tool, đã hướng dẫn ở chương một) có rất nhiều các control có sẵn để bạn tạo, thay đổi hoặc

xử lý các sự kiện theo chúng

Dưới đây là hình ảnh danh sách các công cụ đã có trong Silverlight tool

Ở Chương II chúng ta đã tìm hiểu về các cách trình bày control theo Layout (Grid, StackPanel, Canvas) Trong chương này chúng ta sẽ xem và tìm hiểu các control phổ biến trong silverlight 2 và cách trình bày chúng theo Layout đã học

2 Các control phổ biến trong Silverlight 2

Button kiểm soát các phản ứng của người dùng qua các thiết bị đầu vào, bao gồm các sự kiện, style

o Ví dụ

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

< Button Name="Button" Content="Click Me !" Background="Blue" Margin="20,60,200,200"

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

< basics : Calendar Height="300" Width="300"IsTodayHighlighted="True" >

< CheckBox Name="CheckBox2" ClickMode="Release" IsThreeState="True" Content="CheckBox three states"

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

< ComboBox Name="ComboBox1" BorderThickness="2" IsDropDownOpen="True" SelectedIndex="0" Width="200" Height="30">

< ComboBoxItem x:Name="ComboBoxItem1" Content="Item1"></ ComboBoxItem >

< ComboBoxItem x:Name="ComboBoxItem2" Content="Item2"></ ComboBoxItem >

< ComboBoxItem x:Name="ComboBoxItem3" Content="Item3"></ ComboBoxItem >

Sau đây là việc cài đặt một vài control được thừa kế từ ContentControl

< StackPanel Name="root" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center">

< ! — Tạo một button với nội dung gán từ Content. >

< Button Margin="10" Content="This is string content of a Button"/>

< ! — Tạo một button với một UIElement gán từ content. >

< swc : Calendar x:Name="cal" Canvas.Left="20" Canvas.Top="100" />

<! A Calendar does not highlight today's date >

< swc : Calendar x:Name="cal2" Canvas.Left="270" Canvas.Top="100"

IsTodayHighlighted="false" />

<! Two DatePicker controls, one using the default Short date format >

<! and the other using the Long date format >

< swc : DatePicker x:Name="dp1" Canvas.Left="20" Canvas.Top="390" />

< swc : DatePicker x:Name="dp2" Canvas.Left="20" Canvas.Top="480"

SelectedDateFormat="Long"/>

<! A Calendar to demonstrate multiple selection >

< swc : Calendar x:Name="cal3" Canvas.Left="20" Canvas.Top="540" />

< TextBlock Text="One!" Grid.Row="0" Grid.Column="0" />

< TextBlock Text="Two!" Grid.Row="1" Grid.Column="1" />

< TextBlock Text="Three!" Grid.Row="2" Grid.Column="2" />

< TextBlock Text="Four!" Grid.Row="3" Grid.Column="3" />

< swc : GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"

Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"

ShowsPreview="True"

/>

< swc : GridSplitter Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"

Width="5" HorizontalAlignment="Left" VerticalAlignment="Stretch"

/>

</ Grid >