Silverlight tiếng việt pdf

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT

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.

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


2

Với việc sử dụng Expression Studio và Visual Studio, các nhà thiết kế và phát triển có thể hợp tác một
cách hiệu quả hơn bằng cách sử dụng chính kỹ năng của họ có hiện nay để làm phát triển các sản phẩm
web tương lai “Light up the web”.
3 Các đặc tính của Silverlight

Silverlight kết hợp nhiều công nghệ vào một nền tảng phát triển, nó cho phép bạn được lựa chọn nhiều
công cụ và ngôn ngữ lập trình thích hợp để giải quyết bài toán của bạn. Silverlight cung cấp các 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.2 Mở rộng cho ngôn ngữ kịch bản
Silverlight cung cấp việc mở rộng cho các ngôn ngữ kịch bản (Javascript) ở một số các trình duyệt phổ
biến để thể hiện việc trình bày giao diện và thao tác người dùng một cách phong phú hơn.
3.3 Sự tích hợp với các ứng dụng đã có
Silverlight tích hợp liền mạch với ngôn ngữ javascript và mã Ajax của ASP.Net để bổ sung các chức
năng bạn đã xây dựng được. Bạn có thể tạo những tài nguyên trên nền máy chủ có trong ASP.NET và sử
dụng các khả năng của Ajax trong ASP.NET để tương tác với tài nguyên trên nền máy chủ đó mà không

làm gián đoạn người dùng.
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.
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


3

4 Kiến trúc tổng thể và các mô hình lập trình của 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.
Thành phần Diển tả
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
và dịch vụ liên quan khác.


Core Presentation Components:
Tính năng Mô tả
Dữ liệu vào (input)
Xử lý dữ liệu đầu vào từ các thiết bị phần cứng như bàn phím, chuột, bảng vẽ
hoặc các thiết bị đầu vào khác

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


4

Trình bày giao diện
người dùng (UI
Rendering)

Trình bày vector và các đồ hoạ ảnh bitmap, ảnh động, và văn bản

Thiết bị nghe nhìn
(Media)

Các tính năng phát và quản lý một vài thể loại file âm thanh và hình ảnh như
.WMP và .MP3

Controls
Hỗ trợ mở rộng cho các control để có khả năng tùy chỉnh về kiểu dáng và
khuôn mẫu
Xếp đặt Layout Cho phép khả năng xếp đặt vị trí động các thành phần giao diện người dùng
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:
Tính năng

Mô t
ả

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.
Window
Communication
Foundation
(WCF)
Cung cấp các tính năng để đơn giản hóa việc truy cập dữ liệu từ xa. Cơ chế
này bao gồm một đối tượng trình duyệt, HTTP request và HTTP Response,
RSS, JSON, POX, và các SOAP
Common language
runtime
(CLR)
Cung cấp việc quản lý bộ nhớ, dọn dẹp bộ nhớ thừa, xử lý ngoại lệ…
Windows
Presentation
Foundation controls

(
WPF
)

Cung cấp các control giầu tính năng như Button, Calendar, CheckBox,
DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton, and
ScrollViewer.
Dynamic language
runtime

(DLR)
Hỗ trợ việc biên dịch và thi hành với tính năng động của các ngôn ngữ kịch
bản như Javascript và IronPython cho các chương trình trên nền tảng
Silverlight.
4.2 Các mô hình lập trình của silverlight
Ở phiên bản Silverlight 1.0 cung cấp cho bạn duy nhất một mô hình lập trình là Javascript API, cho đến
phiên bản Silverlight 2.0 đã cung cấp cả hai mô hình lập trình là Managed API và Javascript API. Trong
khi Javascipt API chỉ cho phép bạn gõ mã lệnh Javascript để tương tác với trình duyệt thì Managed API
đã sử dụng được cơ chế làm việc của Common Language Runtime (CLR) và kể cả Dynamic Language
Runtime (DLR) để biên dịch và thi chương trình code (C#, VB…) của bạn.
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


5

4.2.1 Javascript API
Trong một chương trình silverlight nhúng theo kiểu Javascript API, nó tải chỉ một trang XAML đơn lẻ
thay vì tải một gói ứng dụng. Trang XAML này có thể bao gồm các tham chiều URI từ những nguồn
bên máy chủ khác như là các đoạn video và hình ảnh. Silverlight nhúng sử dụng XAML để tạo một
cây đối tượng cái mà bạn có thể thao tác lập trình với javascript lưu trữ bên trong một trang HTML
Javascript API không cung cấp một mô hình ứng dụng có khả năng hỗ trợ các ứng dụng tổ hợp
với sự điều hướng bên trong. Tuy nhiên nó cho phép làm những kịch bản theo kiểu Splash screan. Bạn
cũng có thể làm các sự điều hướng trong Javascript API bằng cách tải lại trang XAML mới hoặc tải lại
cả trang web đó trong trình duyệt.
4.2.2 Managed API
Trong lập trình silverlight theo kiểu Managed API, bạn có thể thao tác lập trình với cả file XAML và
file code bên trong.

Khi một Silverlight nhúng tải file XAML, nó sẽ tạo một cây mô hình cái mà bạn cũng có thể gõ bằng
các mã lệnh bên trong ( thường là C#, Visual basic…).
5 Khả năng hỗ trợ trình duyệt, hệ điều hành và các công nghệ liên quan
5.1 Hỗ trợ của hệ điều hành và trình duyệt được mô tả ở bảng dưới đây
Operating system

Internet
Explorer 7

Internet
Explorer 6

Firefox 1.5, 2.x,
and 3.x

Safari 2.x
and 3.x

Windows Vista
có — có —
Windows XP SP2
có có có —
Windows XP SP3
có

có


có

—


Windows 2000
—


có

—


—


Windows Server 2003
(excluding IA-64)
có có có —
Mac OS 10.4.8+ (PowerPC)
— — — —
Mac OS 10.4.8+ (Intel-based)
—


—


có

Có

5.2 Các công nghệ và công cụ liên quan của silverlight.
Microsoft Expression Blend: Sử dụng công cụ này bạn bạn có thể tạo và thay đổi cách xắp xếp trình
bày Layer của ứng dụng bằng cách thao tác đến canvas và control trong XAML, làm việc với các chức
năng đồ họa, Lập trình với ngôn ngữ Javascript.
Visual Studio 2008: Visual Studio cung cấp các công cụ hiệu quả cho việc phát triển các ứng dụng có
hỗ trợ thao tác code bên tron. Tất cả các phiên bản đã có của Visual Studio đều có khả năng hỗ trợ
Silverlight,Tuy nhiên ở phiên bản mới này nó còn hỗ trợ các tính năng đặc biệt hơn như bao gồm khả
năng IntelliSense, debugging và các template cho việc tạo mới một ứng dụng Silverlight.
ASP.NET AJAX: Bao gồm tập các Control, Service, và các thư viện cần thiết cho việc tạo và tương tác
với nền ứng dụng web
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


6

Microsoft ASP.NET 3.5 Extensions Preview: Công nghệ này cung cấp chức năng thêm để việc tăng
cường các ứng dụng ASP.NET AJAX. Nó bao gồm 2 control sử dụng hữu ích cho việc xây dựng ứng
dụng nền tảng silverlight cũng như là một phần của ứng dụng ASP.NET:
- ASP.NET MediaPlayer Server Control
- ASP.NET Silverlight Server Control
Internet servers: Bao gồm IIS (Microsoft Internet Information Services), và Apache Web server
Microsoft Windows Communication Foundation (WCF) services.
6 Hướng dẫn cài đặt và sử dụng công cụ Silverlight 2 trên Visual studio 2008
6.1 Các bước cài đặt công cụ silverlight 2
- Tải file Silverlight_Tools.exe có trên trang:
/>D60C8EE221ED&displaylang=en

- Bạn phải chắc chắn rằng máy tính của bạn đã cài đặt Visual Studio 2008 SP1
- Chạy file Silverlight_Tools.exe, chờ khoảng 1 phút để hiện thị Silverlight tools installation
Winzard


- Bấm next để đến bước 2, tích chọn “I have read an accept the license terms”.
- Bấm Next để hệ thống tự động kiểm tra tương thích( lưu ý: phải đóng hết các trình duyệt web)
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


7

- Để hệ thống cài đặt và hoàn thành


7 Các ví dụ thực hành
7.1 Chương trình đầu tiên “Hello World”
- Tạo mới một Project: chọn File -> New -> Proeject

- 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
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT

8


- Chún ta chọn Silverlight Application trong Templates
- Đặt tên chương trình đầu tiên là “HelloWorld”, tùy chọn Location, bấm OK
- Bạn có thể chọn Project Type theo mặc định trong hội thoại Add Silverlight application, bấm
OK
- 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)

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


9


Toàn bộ màn hình ứng dụng đầu tiên của bạn được nhìn thấy như sau
- 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#
- 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
Button myButton;
public Page()

{
InitializeComponent();
// Khởi tạo 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);
- Để 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ý sự kiện cho myButton
myButton.Click += new RoutedEventHandler(myButton_Click);

void myButton_Click(object sender, RoutedEventArgs e)
{
//Hiển thị thông điệp trên trình duyệt
System.Windows.Browser.HtmlPage.Window.Alert("Hello Silverlight World!");
}
- Bấm F5 để chạy chương trình
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


10

7.1.2 Viết chương trình bằng XAML

Lưu ý, với cùng project trên, muốn viết đặc tả bằng XAML tương đương ta cần xóa bỏ phần mã trình
C# cũ đi, vì C# và XAML không thể cùng sinh một đối tượng.
Trong file Page.xaml ta thêm đoạn mã sau
<UserControl x:Class="HelloWorld.Page"
xmlns="
xmlns:x="
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button Name="myButton" Content="Click me" Width="100"Height="25"></Button>
</Grid>
</UserControl>
- Gán sự kiện xử lý khi click

- 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 liệu tham khảo
- Silverlight Deverloper center:
- Website chính của Silverlight:








Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT

11

CHƯƠNG II:
XAML - Extensible Application Markup Language
9 Tổng quan về XAML
1.1 XAML là gì
XAML được viết tắt bởi cụm từ: Extensible Application Markup Language là một ngôn ngữ dạng khai
báo. Bạn có thể tạo ra các phần tử đồ họa(UI) với những khai báo thông qua thẻ trong XAML. Sau đó
bạn có thể dùng file mã lệnh tách biệt của nó(code-behind) để trả về những sự kiện và điều khiển những
đối tượng mà bạn đã định nghĩa trong XAML. Nó là một ngôn ngữ mô tả dựa trên XML là rất trực
quan để xây dựng giao diện từ những bước phác thảo cho tới sản xuất sản phẩm, đặc biệt hữu ích cho
đối tượng có kinh nghiệm thiết kế website và kỹ thuật.
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>

1.3.3 Sử dụng cú pháp theo nội dung

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


12

Dưới đây là ví dụ xét đặc tính Text cho đối tượng TextBlock(Giống như đối tượng Label trong
Winform, Webform):
<TextBlock>
Hello!
</TextBlock>
1.3.4 Sử dụng theo một tập hợp

Đâ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.
Cách 1:
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<! Ở đây thẻ GradientStopCollection được chỉ rõ. >
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="1.0" Color="Blue" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Cách 2:
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<! —Không cần khai báo GradientStopCollection, bộ phân tích sẽ hiểu và tạo ra nó >
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="1.0" Color="Blue" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Cách 3:
Ngoài ra, có những đặc tính mà chúng có những tập hợp đặc tính nhưng chúng được xác định như là đặc
tính nội dung của lớp. Trong trường hợp này ta xét đến đặc tính GradientStops được xử dụng ở trên.
Bạn có thể loại bỏ đặc tính này và sẽ có kết quả như sau:
<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: well-

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
UserControl.
<UserControl x:Class="MySilverlight.Page"
xmlns="
xmlns:x="
>
<Grid>
</Grid>
</UserControl>
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


13

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="
xmlns:x="
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

namespace Chapter2
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
//Xu ly su kien Button click o day
MessageBox.Show("Xin chao!");
}
}

}

- Còn ví dụ dưới đây sẽ 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
JavaScript API
<UserControl
xmlns="
xmlns:x="
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button x:Name="button1" Click="Button_Click" Content="Button 1"></Button>
</Grid>
</UserControl>
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


14

Doạn mã trên, trong thẻ root <UserControl> chúng ta không khai báo đặc tính x:Class. Việc xử lý sự
kiện sẽ được thực hiện ngay trong trang HTML có chứa chương trình silverlight này.

<script type="text/javascript">
function Button_Click() {
alert("Xin chao!");
}
</script>

10 Các namescope trong XAML

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ỉ:


11 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 thi(run-
time) những cây đối tượng từ XAML trong Silverlight
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
12 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
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


15

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)
12.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

12.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
12.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.

13 XAML và Type Converter

14 Layout

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


16

Khi bạn xây dựng ứng dụng Silverlight, một trong những điều bạn cần làm đầu tiên đó là việc sẽ bố trí
giao diện đồ họa của bạn như thế nào. Silverlight cung cấp cho bạn 3 kiểu bố trí khác nhau, đó là:

Canvas, StackPanel và Grid.
14.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>

14.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>
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


17


14.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" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="10" FontWeight="Bold" Text="Contoso

Corporation" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Grid x:Name="FormLayoutGrid" Grid.Row="1" Grid.Column="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Margin="10" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<TextBox Grid.Row="1" Grid.Column="1" Margin="10" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<TextBox Grid.Row="2" Grid.Column="1" Margin="10" />

</Grid>
</Grid>

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT

18

Thêm vào một vài đối tượng qua code-behind C#

public Page()
{
InitializeComponent();
LayoutDesign();
}

private void LayoutDesign()
{
//Tạo Stackpanel cho ListBox Control
StackPanel DeptStackPanel = new StackPanel();
DeptStackPanel.Margin = new Thickness(10);

LayoutRoot.Children.Add(DeptStackPanel);
Grid.SetColumn(DeptStackPanel, 1);
Grid.SetRow(DeptStackPanel, 1);

TextBlock DeptListHeading = new TextBlock();
DeptListHeading.Text = "Department";

ListBox DeptList = new ListBox();
DeptList.Items.Add("Finance");
DeptList.Items.Add("Marketing");
DeptList.Items.Add("Human Resources");
DeptList.Items.Add("Payroll");

DeptStackPanel.Children.Add(DeptListHeading);

DeptStackPanel.Children.Add(DeptList);

//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);
Grid.SetRow(ButtonsStackPanel, 2);
Grid.SetColumnSpan(ButtonsStackPanel, 2);

Button BackButton = new Button();
BackButton.Content = "Back";
BackButton.Height = 30;
BackButton.Width = 100;

Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


19

Button CancelButton = new Button();
CancelButton.Content = "Cancel";
CancelButton.Height = 30;
CancelButton.Width = 100;

Button NextButton = new Button();
NextButton.Content = "Next";
NextButton.Height = 30;
NextButton.Width = 100;

ButtonsStackPanel.Children.Add(BackButton);
ButtonsStackPanel.Children.Add(CancelButton);
ButtonsStackPanel.Children.Add(NextButton);

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












Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


20

CHƯƠNG III:
SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ
VISUAL STUDIO 2008
15 Giới thiệu về các công cụ phát triển 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.6 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.7 Những tính năng có được từ Expression Blend
Expression Blend 2 bao gồm các tính năng sau:

- Đầy đủ bộ các công cụ vẽ vector, nó bao gồm Text và các công cụ 3D
- Dễ dàng sử dụng, giao diện trực quan hiện

- Khả năng chuyển động thời gian thực
- 3D and media support for enhancing user experiences
- Hỗ trợ tăng cường cho người dùng nhiều kinh nghiệp với 3D và Media
- Advanced, flexible, and reusable customization and skinning options for a variety of common
controls
- Nâng cao, linh động, tùy biến hóa các tính năng sử dụng lại, các lựa chọn bề mặt cho một vào
control phổ biến.
- Tính năng tương tác mạnh mẽ với các nguồn dữ liệu và các tài nguyên bên ngoài
- Tính năng thiết kế theo Real-time và markup views
- Artwork import capabilities from Expression Design 2
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


21

- Khả năng nhập Artwork từ Expression Design 2
- Site import capabilities from Expression Encoder 2
- Khả năng nhập site từ Expression Encoder 2
- Tương tác với Visual Studio 2008 để giúp nhà thiết kế và lập trình viên làm việc chặt chẽ và
hiệu quả với nhau
16 Bắt đầu nhanh với Silverlight 2 trên Expression Blend 2
16.1 Tạo một Project cho ứng dụng Silverlight 2
Bạn có thể tạo một Project Silverlight 2 trong Microsoft Expression Blend 2 sau khi đã cài đặt Service
Pack1 . với Expression Blend, một Project Silverlight sẽ xây dựng một ứng dụng Silverlight 2 với sự hỗ
trợ các file bao gồm một trang HTML để kiểm tra có tên là Default.html nó sẽ tải ứng dụng của bạn vào
trình duyệt của 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 hộp hội thoại New Project , phí dưới chọn project type là Silverlight 2 Application

3.

Đặt tên cho project của bạn, cái này sẽ trở thành tên thư mục và tên namespace của ứng dụng.
4.

Tiếp theo là chọn vị trí lưu trữ project trên ổ cứng của bạn bằng cách tìm trong nút “Browse”.
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


22

5.

Trong mục Language, chọn ngôn ngữ là Visual C#, đó sẽ là ngôn ngữ để bạn viết trong file
code-behind.
6.

Chọn OK.
Khi một project mới được tạo ra bạn có thể bắt đầu ngay với các thao tác vẽ các khuôn hình và

control trong trang chính(Page.xaml)
Dưới đây là danh sách các file và các tham chiếu dll mà Expression Blend 2 tự tạo ra cho project
mới của bạn

2.2. Vẽ khuôn hình (Shape) trên ứng dụng Silverlight
1.
Trong hộp toolbox chọn một trong các công cụ shape sau: Hình chữ nhật hoặc hình
Ellipse .

2.
Trong khuôn vùng thiết kế, bạn có thể kéo chiều rộng hoặc chiều dài hình chữ nhật này theo
hướng di chuột.
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


23



Mẹo:
Nếu bạn giữ SHIFT khi kéo sẽ giữ được chiều rộng và chiều cao cùng kích thước. làm như vậy sẽ
tạo ra một hình vuông đối với hình chữ nhật, và hình tròn đối với hình ellipse


Mẹo:
Nếu bạn giữ ALT khi bạn vẽ mới một hình chữ nhật hoặc hình ellipse thì công cụ vẽ này sẽ tự động
chọn điểm nhắp chuột ban đầu làm tâm để vẽ.

3. Lưu các thay đổi (CTRL+S)
2.3. Thiết kế Control trên ứng dụng Silverlight
Các bước để thiết kế control
1.

Trong hôpk Toolbox, chọn control là Textbox.

2.

Trong khuôn vùng thiết kế, vẽ TextBox này bằng cách kéo thả chuột. đối tượng trả về sẽ là một
TextBox mà bạn có thể sửa nội dung chữ hiện thị trên TextBox đó ngay.
Infoway
Solutions

CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT


24




Bạn có thể phóng to, thu nhỏ, xoay, di chuyển và thực thi các sự kiện.

3.

Lưu các thay đổi (CTRL+S).
17 Xây dựng chương trình Silverlight 2 với Expression Blend và Visual Studio 2008

Trong mục này chúng ta sẽ xây dựng một ứng dụng Silverlight 2 dùng để dự báo thời tiết tại cac vùng

trên toàn thế giới. Chương trình ứng dụng này có sự dụng kết hợp visual studio 2008 và Expression
Blend
Chúng ta sẽ xây dựng chương trình với kết quả là giao diện mô tả dưới đây

Trước tiên hãy xem qua cấu trúc ứng dụng trong Visual Studio 2008 sau khi đã tạo mới một Project
Silverlight.