Tài liệu Silverlight step by step docx

Có thể coi SilverLight như một đối thủ nặng ký của Adobe Flash, ra đời sau, thừa hưởng tính ưu việt của các công nghệ hiện có, nhỏ gọn, sẽ đa nền tảng, bộ công cụ phát triển mạnh mẽ và h

Trang 1

Silverlight - Step by Step

I C H ƯƠNG 1

Chào mừng bạn đến với SilverLight, một công nghệ đa nền tảng, cho phép xây dựng các ứng dụng tương tác trên Web không phụ thuộc trình duyệt và tương tác với server Dùng SilverLight, bạn có thể xây dựng các loại ứng dụng sau:

- Các ứng dụng nặng cho phép xem phim, nghe nhạc trên Internet

- Các ứng dụng nhỏ, kiểu như game hoặc các thành phần tương tác khác

- Các thành phần trực quan trên Web, hiển thị dữ liệu

Có thể coi SilverLight như một đối thủ nặng ký của Adobe Flash, ra đời sau, thừa hưởng tính ưu việt của các công nghệ hiện có, nhỏ gọn, (sẽ) đa nền tảng, bộ công cụ phát triển mạnh mẽ và hoàn chỉnh, và hơn hết là được phát triển bởi

Microsoft - ông trùm số một trong thế giới phần mềm

1 T ạo dự án SilverLight Làm thế nào để đưa SilverLight vào trang Web của bạn ? Một dự án SilverLight tiêu biểu

thường có 4 file: 1 file HTML để chứa Silverlight plug-in, 1 file silverlight.js, 1 file XAML và một file Javascript chứa các hàm hỗ trợ cho file HTML Tài liệu này mô tả cách tạo ra một dự án Silverlight cơ bản và đưa thêm nội dung vào file

HTML trong vòng 3 bước Trước khi bắt đầu Trước khi bắt đầu, bạn cần chuẩn bị một số thứ sau: - Silverlight plug-in:

nếu chưa có, xin mời nhấn vào đây để cài đặt Silverlight Silverlight plug-in là phần mềm chạy trên trình duyệt để xử lý nội dung Silverlight, nó cũng tương tự như Flash Player - Một file HTML: bạn sẽ cần file này để hiển thị nội dung

Silverlight, bạn có thể tự tạo một file của riêng bạn hoặc copy từ đây - một trình soạn thảo văn bản: bạn sẽ cần nó để chỉnh

sửa file HTML, bạn có thể dùng Notepad, UltraEdit hoặc EditPlus 2 Thêm các tham chiếu cần thiết vào file HTML

Trong bước này, bạn sẽ thêm các tham chiếu đến các file Silverlight.js và createSilverlight.js vào trong trang HTML, đồng thời tạo một element để chứa plug-in Silverlight File Silverlight.js là một file hỗ trợ viết bằng Javascript, nó cho phép nội dung Silverlight có thể hiển thị được trên nhiều nền tảng khác nhau Bạn cũng sẽ tạo file createSilverlight.js trong bước 2

a Lấy file Silverlight.js Bạn có thể lấy file này từ thư mục Tools trong bộ Silverlight 1.0 SDK b Mở file HTML và thêm đoạn mã sau vào phần <head> Nếu bạn chưa có sẵn một file HTML để dùng, nhấn nút phải chuột lên trên liên kết

SampleHTMLPage.html và chọn "Save Target As " để lưu file SampleHTMLPage.html vào cùng thư mục với file Silverlight.js

c Tạo một file trống và đặt tên là createSilverlight.js, bạn sẽ dùng file này trong bước 3 d Trong trang

HTML(SampleHTMLPage.html), thêm một tham chiếu đến script khác trong phần <head>, đặt thuộc tính src của tham chiếu là createSilverlight.js

Trang HTML của bạn giờ đã có những thành phần cơ bản sau:

<title>A Sample HTML page</title>

</head>

<body>

</body>

</html>

2 T ạo thành phần chứa Silverlight và khởi tạo trên trang HTML a Thêm ba dòng sau vào giữa cặp thẻ <body>, nơi

bạn muốn Silverlight hiển thị:

<! Where the Silverlight plug-in will go >

</div>

Bạn có thể thay đổi giá trị của ID trong thẻ

Trang 2

nếu muốn Nếu bạn đang tạo nhiều plug-in Silverlight trên cùng một trang web, làm lại bước này cho một cái và phải đảm bảo giá trị của ID là duy nhất b Tạo khối lệnh khởi tạo: ngay sau đoạn HTML bạn vừa thêm vào ở bước trước, hãy thêm đoạn HTML và script sau:

3 Định nghĩa hàm khởi tạo đối tượng Silverlight plug-in Mở file createSilverlight.js file bạn đã tạo ở bước 1 và thêm

vào hàm javascript sau:

function createMySilverlightPlugin()

{

Silverlight.createObject(

"myxaml.xaml", // Source property value

parentElement, // DOM reference to hosting DIV tag

"mySilverlightPlugin", // Unique plug-in ID value

{ // Per-instance properties

width:'300', // Width of rectangular region of

// plug-in area in pixels

height:'300', // Height of rectangular region of

// plug-in area in pixels

inplaceInstallPrompt:false, // Determines whether to display

// in-place install prompt if

// invalid version detected

background:'#D6D6D6', // Background color of plug-in

isWindowless:'false', // Determines whether to display plug-in

// in Windowless mode

framerate:'24', // MaxFrameRate property value

version:'1.0' // Silverlight version to use

},

Trang 3

{

onError:null, // OnError property value

// event handler function name

onLoad:null // OnLoad property value

// event handler function name

gọi khởi tạo chỉ đến ID của mỗi plug-in khác nhau ("mySilverlightPlugin" trong ví dụ trên) 4 Tạo file chứa nội dung

Silverlight Bạn đã tạm hoàn thành file HTML, giờ hãy tạo ra nội dung cho đối tượng Silverlight Tạo một file trống có

tên "myxaml.xaml" trong cùng thư mục với file HTML Nếu bạn đã đổi tham số tên file trong bước trước, hãy đặt lại tên file của bạn cho đúng với giá trị mới của bạn Bước này là tùy chọn: nếu muốn dự án Silverlight của bạn có khả năng xử

lý các sự kiện, tạo mã động, hoặc những gì khác cho phép tương tác với người dùng, bạn sẽ cần thêm một file script nữa Tạo file một file Javascript và thêm tham chiếu đến nó trong file HTML, bạn có thể làm giống ví dụ sau, trong ví dụ này tên file được đặt là "my-script.js"

File HTML của bạn giờ sẽ chứa các thành phần sau:

// Retrieve the div element you created in the previous step

var parentElement = document.getElementById("mySilverlightPluginHost");

T ạo nhiều đối tượng Silverlight Nếu muốn tạo nhiều đối tượng Silverlight trên trang của bạn, hãy lặp lại các bước 2,3,

và 4 cho mỗi đối tượng Mỗi thẻ DIV (tạo trong bước 2a) phải có một giá trị ID duy nhất Mỗi đoạn lệnh khởi tạo (trong bước 2b) phải nằm ngay sau thẻ DIV tương ứng được tạo ở bước trước (2a) Mỗi tham số ID của đối tượng cũng là duy nhất

Ghi chú: trong phần trên, các cụm từ "Silverlight plug-in", "đối tượng Silverlight" được dịch từ cụm từ "Silverlight plug-in instance"

Trang 4

Mở file myxaml.xaml mà bạn đã tạo trong bài trước, tạo một Canvas và khai báo namespace cho Silverlight và XAML bằng cách copy đoạn mã sau vào file XAML của bạn:

B ước 2: Vẽ lên trên đối tượng Silverlight

Cắt và dán doạn mã lệnh sau vào trong file XAML của bạn, giữa cặp thẻ <Canvas> rồi lưu lại

<Ellipse

Height="200" Width="200"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

Để xem nội dung hiển thị bởi XAML, nháy đúp vào file HTML Bạn sẽ nhìn thấy một hình tròn màu tím với viền đen đậm

Xin chúc mừng! Bạn đã tạo ra được ứng dụng Silverlight đầu tiên !!!

Trang 5

III Chương 3

Một Canvas là một đối tượng được tạo ra để chứa các đối tượng điều khiển (control) và các đối tượng hình vẽ (shape) Tất

cả các file XAML phải chứa ít nhất một Canvas và nó sẽ được coi là đối tượng gốc Bài này giới thiệu về đối tượng Canvas và cách thêm, xác định vị trí và kích thước của các đối tượng con

Thêm m ột đối tượng vào Canvas

Một Canvas chứa và đặt vị trí cho các đối tượng khác Để thêm một đối tượng vào Canvas, bạn hãy chèn nó vào giữa cắp thẻ <Canvas> Ví dụ sau sẽ thêm một hình ellipse và trong một Canvas Vì Canvas là đối tượng gốc nên tốt hơn hết là bạn nên khai báo các thuộc tính về namespace (xmlns) cần thiết cho nó

Một Canvas có thể chứa một số bất kỳ các đối tượng khác, thậm chí cả các Canvas khác

Đặt vị trí cho một đối tượng

Để đặt vị trí cho một đối tượng trong Canvas, bạn đặt các thuộc tính Canvas.Left và Canvas.Top trên đối tượng đó Thuộc tính Canvas.Left chỉ ra khoảng cách từ đối tượng đế cạnh bên trái của Canvas chứa nó, và Canvas.Top chỉ ra khoảng cách đến cạnh trên của Canvas Ví dụ sau cũng vẫn dùng đối tượng ellipse trong cùng ví dụ trước như đặt lại ví trí của nó là 30 pixel (điểm trên màn hình) tính từ bên trái và 30 pixel tính từ phía trên của Canvas

Trang 7

Bạn có thể thay đổi điều này bằng cách đặt lại thuộc tính Canvas.ZIndex của đối tượng bên trong Canvas, giá trị càng cao thì sẽ nằm càng gần về phía trước, và càng thấp thì càng nằm ra sau Ví dụ sau cũng sẽ tương tự như cái trước, chỉ có một thay đổi là các giá trị của z-order đã được đặt ngược lại, bạn sẽ thấy trong trường hợp này, hình ellipse màu bạc sẽ nằm lên trên cùng

Trang 8

Chi ều rộng và chiều cao

Canvas, hình họa và nhiều thành phần khác đều có thuộc thuộc tính Width và Height cho phép chỉ ra kích thước của nó

Ví dụ sau sẽ tạo một hình ellipse cao 200 pixel và rộng 200 pixel, nhớ là không được dùng giá trị theo kiểu phần trăm %

Trang 9

Khi chạy ví dụ này, hình chữ nhật màu xanh lá cây chính là Canvas, phần màu trắng là phần còn lại của Silverlight plug-in không bị che phủ bởi Canvas Bạn sẽ thấy rằng phần nằm ngoài Canvas của hình ellipse sẽ không bị xén mất

Nếu không đặt thì giá trị mặc nhiên của Width và Height sẽ là 0

Trang 10

Silverlight cung cấp ba thành phần hình họa cơ bản: hình ellipse, chữ nhật và đường thẳng

Đối tượng ellipse mô tả một hình ellipse hay hình tròn Bạn có thể kiểm soát chiều rộng và chiều cao bằng cách đặt thuộc tính Width và Height

Đối tượng Rectangle mô tả một hình vuông hoặc một hình chữ nhật, có thể bo tròn góc Bạn kiểm soát chiều rộng và chiều cao bằng cách đặt giá trị các thuộc tính Width hoặc Height Bạn cũng có thể dùng thuộc tính RadiusX và RadiusY

<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>

<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>

<Line X1="280" Y1="10" X2="10" Y2="280"

Stroke="black" StrokeThickness="5"/>

</Canvas>

Các đối tượng hình họa khác

Ngoài các đối tượng Ellipse, Line, và Rectangle, Silverlght còn cung cấp 3 đối tượng hình họa khác: Polygon, Polyline, và Path Một Polygon (đa giác) là một hình đóng với một số cạnh, trong khi một PolyLine là một chuỗi các đoạn thẳng nối với nhau, các đoạn thẳng này có thể tạo thành một hình đóng (đa giác) hoặc không Ví dụ sau sẽ tạo nên một Polygon và một PolyLine:

Trang 11

Đối tượng Path có thể được dùng để biểu diễn một hình dạng phức tạp bao gồm cả cung và đường cong Để dùng Path, bạn phải dùng một kiểu cú pháp đặc biệt để đặt thuộc tính Data của nó Ví dụ sau sẽ tạo nên ba đối tượng Path

Trang 12

Không phải mọi hình đều có đầy đủ nền và viền: một Line (đoạn thẳng) chỉ có đường viền Đặt giá trí thuộc tính Fill của một Line sẽ không có tác dụng

Bạn đặt giá trị cho Stroke và Fill bằng cách sử dụng Brush (bút vẽ) Có 5 kiểu đối tượng bút vẽ mà bạn có thể dùng:

- SolidColorBrush

- nearGradientBrush

- RadialGradientBrush

- ImageBrush

- VideoBrush (mô tả trong phần media)

V ẽ dùng một màu với SolidColorBrush

Để vẽ một vùng với một màu nào đó, bạn dùng SolidColorBrush XAML cung cấp một số cách để tạo SolidColorBrush Bạn có thể dùng một số cú pháp để chỉ tên của một màu, kiểu như “Black” hay “Gray”

Bạn cũng có thể dùng cú pháp thập lục phân để mô tả các thành phần đỏ, xanh lá cây và xanh nước biển, cùng một thành phần tùy chọn chỉ ra độ trong suốt Có thể dùng những cách sau:

- Ký pháp 6-số: Dạng là #rrggbb, trong đó rr là hai chữ số thập lục phân mô tả thành phần màu đỏ, gg mô tả màu xanh lá cây va bb mô tả màu xanh nước biển Ví dụ như: #0033FF

- Ký pháp 8-số: Định dạng tương tự ký pháp 6-số, ngoại trừ có thêm 2 ký tự mở rộng mô tả giá trị alpha, chỉ ra độ trong suốt: #aarrggbb Ví dụ: #990033FF

Ngoài ra còn có ký pháp 3 hoặc 4 số cho các màu 8-bit, nhưng ít được sử dụng

Thay vì dùng các thuộc tính như Stroke và Fill để đặt giá trị cho bút vẽ, bạn cũng có thể tạo một đối tượng

SolidColorBrush riêng và đặt thuộc tính Color cho nó, dùng một trong những định dạng màu đã nói ở trên

Ví dụ sau đây cho thấy một số cách để vẽ một đối tượng bằng màu đen

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

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

Fill="black"/> <! SolidColorBrush by color name >

Fill="#000000"/> <! SolidColorBrush by 6-digit hexadecimal notation >

Fill="#ff000000"/> <! SolidColorBrush by 8-digit hexadecimal notation >

Trang 13

V ẽ hình với gradient dùng LinearGradientBrush và RadialGradientBrush

Silverlight hỗ trợ cả linear và radial gradiant Gradient có một hoặc nhiều gradient stop mô tả sự chuyển đổi và vị trí của các màu sắc khác nhau trong gradient

Hầu hết các gradient chỉ cần hai gradient stop, nhưng bạn có thể tạo nhiều hơn nếu muốn

- LinearGradientBrush vẽ một gradient theo một đường thẳng Đường thẳng này mặc nhiên sẽ nằm theo đường chéo từ góc trên trái xuống góc dưới phải Bạn có thể đặt lại giá trị cho thuộc tính StartPoint và EndPoint để thay đổi vị trí của đoạn thẳng này

- RadialGradientBrush vẽ một gradient dọc theo một đường tròn, mặc nhiên tâm hình tròn này sẽ nằm ở giữa vùng được

vẽ Bạn có thể thay đổi hình thức của gradient bằng cách đặt lại giá trị các thuộc tính GradientOrigin, Center, RadiusX, and RadiusY

Để thêm gradient stop vào bút vẽ, bạn hãy tạo các đối tượng GradientStop Đặt lại thuộc tính Offset của một GradientStop thành một giá trị từ 0 đến 1 để đặt lại vị trí tương đối của nó trong gradient Đặt thuộc tính Color của GradientStop thành một giá trị màu, có thể dùng tên hoặc dùng cú pháp thập lục phân

Ví dụ sau dùng các đối tượng LinearGradientBrush và RadialGradientBrush để vẽ 4 đối tượng Rectangle

Tiêu đề	Chương 1: Chào mừng bạn đến với SilverLight
Thể loại	Tài liệu hướng dẫn

Định dạng
Số trang	26
Dung lượng	288,42 KB