Silverlight - Step by Step
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 ứ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ỏ 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 là một đối thủ nặng kí của Adobe Flash, ra đời sau thừa hưởng tính năng ưu việt của công nghệ hiện có, nhỏ gọn, đa nền tảng, bộ công cụ phát triển mạnh mẽ hoàn chỉnh, và hơn hết là được phát triển bởi Microsoft - một trong những trùm trong thế giới phần mềm.
Bạn đang xem trước 20 trang tài liệu Silverlight - Step by Step, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Silverlight - Step by Step
I. CHƯƠ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 . 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 , đặ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:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
A Sample HTML page
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ẻ , nơi
bạn muốn Silverlight hiển thị:
Bạn có thể thay đổi giá trị của ID trong thẻ
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:
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
Nếu đang tạo nhiểu plug-in Silverlight trên cùng trang, hãy lặp lại bước này cho mỗi cái, bảo đảm mỗi tên hàm là duy
nhất, hoặc bạn có thể dùng một hàm nhận tham số ID mà bạn đã đặt giá trị duy nhất. Cũng phải đảm bảo một điều là mỗi
đọan script phải nằm ngay sau thẻ DIV tương ứng mà bạn đã tạo ở bước trên. Bạn đã hoàn thành bước 2. File HTML của
bạn giờ có nội dung như sau:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
A Sample HTML page
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
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.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
Đoạn script trên chứa một số tham số mà bạn có thể sẽ muốn tùy biến, kiểu như chiều cao và chiều rộng của plug-in (có
thể đặt kích thước theo phần trăm %), tên của file XAML chứa nội dung Silverlight của bạn, và một giá trị chỉ ra plug-in
của bạn sẽ hoạt động ở chế độ cửa sổ hay tòan màn hình. Nếu đang thêm nhiều plug-in vào cùng một trang, hãy tạo một
hàm mới cho mỗi cái, hoặc dùng hàm tạo sử dụng tham số (xem lại 2b). Với cách nào bạn cũng đều phải đảm bảo rằng lời
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:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
A Sample HTML page
// Retrieve the div element you created in the previous step.
var parentElement = document.getElementById("mySilverlightPluginHost");
createMySilverlightPlugin();
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"
II. Chương 2
Trong bài trước, tạo một dự án Silverlight, bạn đã thêm một đối tượng Silverlight vào một trang HTML và tạo một file
XAML trống. Bài này sẽ hướng dẫn bạn cách tạo nội dung Silverlight bên trong file XAML.
Bước 1: tạo một đối tượng Canvas và khai báo namespace
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:
<Canvas
xmlns=""
xmlns:x="">
Mỗi file XAML Silverlight bắt đầu với một thẻ , trong đó có một thuộc tính xmlns dùng để khai báo namespace
của Silverlight, và một thuộc tính khác là xmlns:x dùng để khai báo namespace cho XAML.
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ẻ rồi lưu lại.
<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Bước 3: Xem nội dung XAML của bạn
Để 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.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Nếu máy của bạn có cài đặt WPF thi khi nháy đúp lên file XAML sẽ làm cho WPF chạy chứ không phải là Silverlight.
Nhưng cũng đừng lo lắng về điều này, vì file XAML được đặt cùng chỗ với file HTML trên Web server nên người dùng
không thể nháy đúp vào được.
Xin chúc mừng! Bạn đã tạo ra được ứng dụng Silverlight đầu tiên !!!
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ẻ . 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ó.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
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.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Canvas.Left="30" Canvas.Top="30"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Hình minh họa sau sẽ giúp bạn hiểu hơn về hệ tọa độ được dùng trong Canvas và vị trí của hình ellipse trong ví dụ trước.
z-order
Thuật ngữ z-order được dùng để chỉ độ sâu (chiều thứ 3 trên hệ tọa độ xyz), hay nói cách khác là nếu có nhiều đối tượng nằm chồng
lên nhau thì z-order sẽ xác định đối tượng nào nằm trên, đối tượng nào nằm dưới
Mặc nhiên, z-order của các đối tượng trong một Canvas sẽ được xác định bởi thứ tự chúng được khai báo. Đối tượng nào
được khai báo sau sẽ nằm lên trên đối tượng được khai báo trước. Ví dụ sau sẽ tạo ra 3 ellipse, bạn sẽ thấy đối tượng được
khai báo sau cùng (màu xanh lá cây) sẽ nằm lên trên các đối tượng khác.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Canvas.Left="5" Canvas.Top="5"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="Silver" />
<Ellipse
Canvas.Left="50" Canvas.Top="50"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />
<Ellipse
Canvas.Left="95" Canvas.Top="95"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="Lime" />
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.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Canvas.ZIndex="3"
Canvas.Left="5" Canvas.Top="5"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="Silver" />
<Ellipse
Canvas.ZIndex="2"
Canvas.Left="50" Canvas.Top="50"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />
<Ellipse
Canvas.ZIndex="1"
Canvas.Left="95" Canvas.Top="95"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="Lime" />
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 %.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse
Canvas.Left="30" Canvas.Top="30"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Ví dụ tiếp theo đặt Width và Height của đối tượng Canvas cha thành 200 và đặt màu nền cho nó là Lime.
<Canvas
xmlns=""
xmlns:x=""
Width="200" Height="200"
Background="LimeGreen">
<Ellipse
Canvas.Left="30" Canvas.Top="30"
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
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.
Các Canvas lồng nhau
Một Canvas có thể chứa những Canvas khác. trong ví dụ sau bạn sẽ thấy một Canvas lại chứa 2 Canvas khác bên trong.
<Canvas
xmlns=""
xmlns:x="">
<Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
Background="blue"/>
<Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
Background="red"/>
IV. Chương 4
Silverlight hỗ trợ đồ họa cơ bản cho phép bạn có thể vẽ được hình ellipse, chữ nhật, đường thẳng, đa giác và các đường
cong... Các thành phần này được gọi chung là các hình họa (shape).
Các hình họa cơ bản
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
để xác định độ cong của góc.
Thay vì dùng các thuộc tính Width và Height, bạn kiểm soát kích thước và vị trí của một đường thẳng bằng cách đặt giá
trị cho các thuộc tính X1, Y1, X2, Y2 của nó.
Ví dụ sau vẽ một Ellipse, một Rectangle, và một Line trong một Canvas.
<Canvas
xmlns=""
xmlns:x="">
<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"/>
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:
<Canvas
xmlns=""
xmlns:x="">
<Polyline Points="150, 150 150, 250 250, 250 250, 150"
Stroke="Black" StrokeThickness="10"/>
<Polygon Points="10,10 10,110 110,110 110,10"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
Đố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.
<Canvas
xmlns=""
xmlns:x="">
<Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
Stroke="Black" Fill="SlateBlue"
Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 10,100 C 10,300 300,-200 250,100z"
Stroke="Red" Fill="Orange"
Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 0,200 L100,200 50,50z"
Stroke="Black" Fill="Gray"
Canvas.Left="150" Canvas.Top="70" />
Để có thêm thông tin về cú pháp của Path, hãy xem phần Path Markup Syntax trong bộ Silverlight SDK.
Vẽ hình bằng cách sử dụng bút vẽ
Hầu hết các hình họa đều bao gồm hai phần, đường viền và nền bên trong được kiểm soát bởi các thuộc tính Stroke và
Fill. Hình minh họa sau cho bạn thấy phần đường viền và nền của hình chữ nhật ở ví dụ đầu tiên.
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=""
xmlns:x="">
<Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
Fill="black"/>
<Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
Fill="#000000"/>
<Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
Fill="#ff000000"/>
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.
<Canvas
xmlns=""
xmlns:x="">
Bạn cũng có thể dùng gradient để vẽ viền của một hình họa.
Hình minh họa sau cho thấy các gradient stop của LinearGradientBrush đầu tiên trong ví dụ trước.
Vẽ ảnh dùng ImageBrush
Một kiểu bút vẽ khác là ImageBrush. Mặc nhiên, hình ảnh sẽ được ép lại sao cho vừa với toàn bộ hình, bạn cũng có thể
dùng thuộc tính Stretch để kiểm soát cách bút vẽ ép hình ảnh. Ví dụ sau dùng hai đối tượng ImageBrush với các giá trị
Stretch khác nhau để vẽ hai đối tượng Rectangle.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x=""
Background="White">
<Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
Stroke="Black" StrokeThickness="1">
<Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
Stroke="Black" StrokeThickness="1">
V. Chương 5
Các thuộc tính đồ họa chung
Có một số thuộc tính được áp dụng chung cho tất cả các đối tượng Silverlight (UIElement): Canvas, các hình họa,
MediaElement và TextBlock.
Thuộc tính Opacity
Thuộc tính Opacity cho phép bạn kiểm soát độ trong suốt của một đối tượng UIElement. Bạn có thể đặt giá trị cho thuộc
tính Opacity từ 0 đến 1. Đối tượng càng trong suốt nếu giá trị càng gần về 0, nếu đặt là 0 thì đối tượng sẽ hoàn toàn trong
suốt, giá trị mặc nhiên của thuộc tính này là 1.0.
Ví dụ sau đây sẽ tạo 2 hình họa với các thuộc tính Opacity khác nhau:
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
<Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
Thuộc tính OpacityMask
Thuộc tính OpacityMask cho phép bạn kiểm soát độ trong suốt trong các phần khác nhau của một đối tượng UIElement.
Lấy ví dụ, bạn có thể dùng OpacityMask để làm đối tượng mờ dần từ phải sang trái. Thuộc tính OpacityMask nhận vào
một đối tượng Brush. Bút vẽ được áp dụng vào đối tượng và kênh alpha (kênh xác định độ trong suốt) sẽ được dùng để
xác định độ trong suốt của pixel tương ứng. Nếu một phần nào đó của bút vẽ là trong suốt thì nó cũng sẽ làm cho thành
phần tương ứng trong suốt.
Bạn có thể dùng bất kỳ kiểu bút vẽ nào để dùng OpacityMask, tuy nhiên LinearGradientBrush, RadialGradientBrush, và
ImageBrush là những kiểu thường dùng nhất.
Ví dụ sau sẽ áp dụng một LinearGradientBrush bản đồ trong suốt vào một đối tượng Rectangle.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
<Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
Thuộc tính Clip
Thuộc tính Clip cho phép bạn vẽ các phần của một đối tượng một cách chọn lọc. Để dùng thuộc tính Clip, bạn phải cung
cấp một đối tượng Geometry (đối tượng hình học) mô tả phần bạn muốn vẽ. Tất cả những phần nằm bên ngoài hình này
đều sẽ bị ẩn đi, hay được gọi là “bị xén”.
Ví dụ sau đây dùng một RectangleGeometry để mô tả vùng xén cho một đối tượng Ellipse. Kết quả là, chỉ có phần nào
bên trong vùng được định nghĩa bởi RectangleGeometry được hiển thị, những phần còn lại sẽ bị xén.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
Thuộc tính RenderTransform
Thuộc tính RenderTransform cho phép bạn dùng đối tượng Transform để quay (rotate), làm xiên (skew), đổi tỷ lệ (scale)
hoặc dịch chuyển (translate) một đối tượng. Danh sách sau sẽ mô tả các đối tượng Transform khác nhau mà bạn có thể
dùng với thuộc tính RenderTransform.
- RotateTransform: Quay một đối tượng theo một góc nào đó.
- SkewTransform: Làm xiên đối tượng bởi một khoảng theo chiều X hoặc chiều Y.
- ScaleTransform: Phóng to hoặc thu nhỏ một đối tượng theo chiều cao hoặc chiều rộng bởi một khoảng cho trước.
- TranslateTransform: Dịch chuyển đối tượng theo chiều dọc hoặc chiều ngang bởi một khoảng cho trước.
Ngoài ra còn có một kiểu biến hình đặc biệt, TransformGroup, bạn có thể dùng để áp dụng nhiều phép biến hình lên một
đối tượng nào đó. Chẳng hạn bạn có thể quay rồi sau đó làm xiên một đối tượng.
Ví dụ sau đây biểu diễn các đối tượng Transform khác nhau bằng cách áp dụng chúng lên các đối tượng Rectangle khác
nhau.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x=""
>
<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
Fill="Black">
<Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
Fill="red">
<Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
Fill="blue">
<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
Fill="Green">
VI. Chương 6
Đối tượng Image cho phép bạn hiển thị hình ảnh bitmap trong Silverlight.
Đối tượng Image
Đối tượng Image cho phép bạn hiển thị các hình ảnh JPG hoặc PNG một cách dễ dàng trong Silverlight. Để hiển thị một
hình ảnh, đặt thuộc tính Source của đối tượng hình ảnh để chỉ đường dẫn đến file hình ảnh. Ví dụ sau đây dùng đối tượng
Image để hiển thị một ảnh 141x131. Vì giá trị của thuộc tính Width và Height không được chỉ định nên nó sẽ được hiển
thị với giá trị gốc của nó.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
Thuộc tính Stretch
Khi kích thước của hình ảnh và kích thước chỉ định cho đối tượng Image khác nhau, thuộc tính Stretch sẽ xác định cách
hình ảnh thay đổi kích thước để khớp với đối tượng Element. Thuộc tính Stretch nhận một trong các giá trị sau: None,
Fill, Uniform, UniformToFill. Ví dụ sau sẽ biểu diễn các giá trị None, Uniform, and Fill.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x=""
Background="White">
<Image Source="star.png" Stretch="None"
Height="100" Width="200" Canvas.Left="100" />
<Image Source="star.png" Stretch="Fill"
Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />
<Image Source="star.png" Stretch="Uniform"
Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" />
None
Fill
Uniform
Để có thông tin về ảnh hưởng của các giá trị khác nhau của thuộc tính Stretch, xem thêm trong Silverlight SDK.
Cách khác để hiển thị hình ảnh bitmap
Để dùng một bitmap như hình nền của một đối tượng, dùng ImageBrush. Xem thêm trong phần 4.
VII. Chương 7
Thành phần TextBlock cho phép bạn thêm văn bản vào Silverlight.
Để thêm văn bản vào Silverlight, bạn tạo một thành phần TextBlock và thêm nội dung vào giữa cặp thẻ . Ví
dụ sau sẽ dùng TextBlock để hiển thị một số văn bản.
<Canvas
xmlns=""
xmlns:x="">
hello world!
Các thuộc tính thường dùng của TextBlock
Ngoài các thuộc tính chung thừa hưởng từ UIElement, như là Clip và Opacity (xem lại phần 5), TextBlock còn cung cấp
thêm một số thuộc tính khác:
- FontSize: Đặt kích thước Font, tính theo pixel.
- FontStyle: Kiểu chữ, có thể đặt là Normal hoặc Italic.
- FontStretch: Kiểu giãn font. Nhận các giá trị UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal,
Medium, SemiExpanded, Expanded, ExtraExpanded, hoặc UltraExpanded.
- FontWeight: Độ đậm cửa chữ. Nhận các giá trị Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold,
Black, ExtraBlack.
- FontFamily: Họ của font chữ.
- Foreground: Bút vẽ được dùng để vẽ văn bản. Bạn có thể dùng màu đặc, gradient, hình ảnh và thậm chí là video. Xem
lại phần 4 để có thêm thông tin.
Ví dụ sau sẽ mô tả các thuộc tính trên:
<Canvas
xmlns=""
xmlns:x="">
<TextBlock FontSize="40"
FontFamily="Georgia"
FontStyle="Italic" FontWeight="Bold"
FontStretch="Expanded"
Canvas.Top="20" Canvas.Left="20">
Hello world!
Thành phần Run
Bạn có thể dùng nhiều kiểu Font khác nhau trong cùng một TextBlock bằng cách dùng thành phần Run. Run có cùng các
thuộc tính như TextBlock, mặc dù nó không thể được xác định vị trí bằng Canvas.Left và Canvas.Top. Ví dụ sau sẽ dùng
Run để thay đổi kích thước của một phần văn bản trong TextBlock.
<Canvas
xmlns=""
xmlns:x="">
Hello world
Dùng nhiều loại font
Không chắc là tất cả các Font đều có sẵn trên máy tính của người dùng. Thuộc tính FontFamily cho phép bạn liệt kê một
danh sách font (font fallback), các font sau sẽ được được dùng nếu font trước không có sẵn. Một font đặt biệt được gọi là
"Portable User Interface" sẽ luôn tồn tại trên tất cả các máy, như là một phần của Silverlight. Ví dụ sau đây biểu diễn các
cài đặt khác nhau của FontFamily.
<Canvas
xmlns=""
xmlns:x="">
<TextBlock FontFamily="Arial, Times New Roman"
Text="Hello World" FontSize="20"/>
<TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40"
Text="Hello World" FontSize="20"/>
<TextBlock FontFamily="Portable User Interface" Canvas.Top="80"
Text="Hello World" FontSize="20"/>
VIII. Chương 8
Silverlight cung cấp một đối tượng MediaObject cho phép bạn có thể chơi lại các file WMV và WMA, cũng như một vài
loại file MP3 khác.
Thêm khả năng đa phương tiện vào trang Web
Để thêm khả năng đa phương tiện, bạn có thể dùng MediaElement và đặt thuộc tính Source của nó chỉ đến file media của
bạn thông qua một URI. Bạn có thể xem ví dụ sau:
<Canvas
xmlns=""
xmlns:x="">
<MediaElement
Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
Like other UIElement objects, you can put drawings on top of MediaElement objects. The following example adds an
Ellipse in front of the MediaElement from the previous example.
Cũng giống như các đối tượng UIElement khac, bạn có thể đặt các hình vẽ lên trên đối tượng MediaElement. Ví dụ sau sẽ
thêm một hình ellipse lên trên thành phần MediaElement lấy từ ví dụ trước:
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
Opacity="0.6" />
Một số thuộc tính của MediaElement
Ngoài các thuộc tính thừa hưởng từ MediaElement, như Opacity hay Clip, MediaElement cung cấp một số thuộc tính
chuyên cho đa phương tiện(media) như sau:
- Stretch: Chỉ ra cách mà đoạn video được ép cho vừa với đối tượng MediaElement. Thuộc tính này nhận các giá trị None,
Uniform, UniformToFill, và Fill. Giá trị mặc nhiên là Fill. Để có thêm thông tin, hãy xem trong bộ Silverlight SDK.
* IsMuted: Nếu đặt là true thì MediaElement sẽ không phát âm thanh, ngược lại là có.
* Volume: Đặt giá trị cho volumn, bạn có thể đặt các giá trị từ 0.0 cho đến 1.0, với 1.0 thì âm thanh sẽ phát ra lớn nhất,
giá trị mặc nhiên là 0.5.
Hãy xem thêm Silverlight SDK để có thêm thông tin về các thuộc tính của MediaElement.
Kiểm soát việc chơi các tài liệu media
Bạn có thể kiểm soát việc chơi các file media bằng cách sử dụng các phương thức Play, Pause, và Stop. Ví dụ sau sẽ dùng
Play, Pause, và Stop để cho phép người dùng điều khiển việc chơi lại:
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x="">
<MediaElement x:Name="media"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300" />
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
stop
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
pause
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
play
function media_stop(sender, args) {
sender.findName("media").stop();
}
function media_pause(sender, args) {
sender.findName("media").pause();
}
function media_begin(sender, args) {
sender.findName("media").play();
}
Dùng chế độ full-screen
Để chơi ở chế độ full-screen, đặt thuộc tính FullScreen của đối tượng Silverlight plug-in là true và điều chỉnh kích thước
của MediaElement thành ActualWidth và ActualHeight mà bạn lấy từ Silverlight.
Ví dụ sau sẽ cho phép xem video ở chế độ full-screen.
<Canvas Width="300" Height="300"
xmlns=""
xmlns:x=""
Loaded="canvas_loaded">
<MediaElement x:Name="media"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300" />
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
stop
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
pause
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
play
<Canvas MouseLeftButtonDown="toggle_fullScreen"
Canvas.Left="190" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="85">
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen
function media_stop(sender, args) {
sender.findName("media").stop();
}
function media_pause(sender, args) {
sender.findName("media").pause();
}
function media_begin(sender, args) {
sender.findName("media").play();
}
function canvas_loaded(sender, args)
{
var plugin = sender.getHost();
plugin.content.onfullScreenChange = onFullScreenChanged;
}
function toggle_fullScreen(sender, args)
{
var silverlightPlugin = sender.getHost();
silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;
}
function onFullScreenChanged(sender, args)
{
var silverlightPlugin = sender.getHost();
var buttonPanel = sender.findName("buttonPanel");
if (silverlightPlugin.content.fullScreen == true)
{
buttonPanel.opacity = 0;
}
else
{
buttonPanel.opacity = 1;
}
var mediaPlayer = sender.findName("media");
mediaPlayer.width = silverlightPlugin.content.actualWidth;
mediaPlayer.height = silverlightPlugin.content.actualHeight;
}
Dùng bút vẽ VideoBrush
Bạn có thể dùng VideoBrush để vẽ các hình họa và văn bản bằng Video. Để dung VideoBrush, hãy theo các bước sau:
1. Tạo một đối tượng VideoBrush.
2. Tạo một MediaElement và đặt tên cho nó (đặt giá trị cho thuộc tính Name). Đối tượng MediaElement được dùng để xử
lý dữ liệu video cho VideoBrush. Trừ khi bạn muốn nhìn thấy 2 bản video cùng lúc, không thì phải đặt thuộc tính Opacity
của đối tượng MediaElement là 0.0. Nếu không muốn đoạn video phát ra tiếng thì bạn đặt giá trị cho thuộc tính IsMuted
của MediaElement là true.
3. Đặt thuộc tính SourceName của VideoBrush là tên của MediaElement mà bạn đã tạo.
Ví dụ sau sẽ dùng VideoBrush để vẽ nền cho một TextBlock.
<Canvas
xmlns=""
xmlns:x="">
<MediaElement x:Name="myMediaElement"
Source="thebutterflyandthebear.wmv"
Width="300" Height="300"
Opacity="0" IsMuted="True" />
<TextBlock Canvas.Left="10" Canvas.Top="10"
FontFamily="Verdana"
FontSize="80" FontWeight="Bold">WatchThis
Việc ngừng, tạm dừng hoặc chơi MediaElement cũng ảnh hưởng đến đối tượng VideoBrush dùng nó, nhưng thay đổi kích
thước hoặc độ trong suốt thì không. Một đối tượng MediaElement cũng có thể được dùng như nguồn của nhiều đối tượng
VideoBrush khác nhau.
IX. Chương 9
Tạo hoạt hình với các thẻ Silverlight
Các bước cơ bản để làm một hoạt hình
Bước 1: Chọn một đối tượng để làm hoạt hình
Bước đầu tiên là bạn phải chọn một đối tượng nào đó để làm hoạt hình, ví dụ bạn có thể chọn một hình ellipse. Ví dụ sau
sẽ tạo một hình ellipse với nền đen.
<Canvas
xmlns=""
xmlns:x="">
<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black" />
Nhớ là hình ellipse đã được đặt tên là ellipse: x:Name="ellipse"
Hình ellipse này cần phải được đặt tên, (chi tiết hơn, bạn cần đặt tên cho nó để sau này có thể tham chiếu lại trong một
hoạt cảnh được định nghĩa ở nơi khác trong file XAML). Giờ bạn đã có một đối tượng để tạo hoạt hình, bước tiếp theo là
tạo một EventTrigger để chạy hoạt hình này.
Bước 2: tạo một EventTrigger
Một EventTrigger cho phép thực hiện một thao tác khi có một sự kiện nào đó xảy ra. Sự kiện này được chỉ ra bởi thuộc
tính RoutedEvent, và vì bạn muốn EventTrigger bắt đầu một hoạt hình nên hành động mà nó sẽ làm sẽ là một
BeginStoryboard.
Bạn cũng cần quyết định sự kiện nào sẽ kích hoạt hoạt cảnh (animation) của bạn. Trong Silverlight 1.0, việc chọn lựa
tương đối đơn giản, vì các đối tượng EventTrigger chỉ hỗ trợ một sự kiện duy nhất là Loaded. Đặt giá trị cho thuộc tính
RoutedEvent thành Canvas.Loaded sẽ làm hoạt hình chay khi Canvas chính được nạp. Bạn có thể xem ví dụ sau:
<Canvas
xmlns=""
xmlns:x="">
<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black"/>
Giờ bạn đã sẵn sàng để tạo một StoryBoard và một hoạt hình.
Bước 3: Tạo StoryBoard và hoạt hình
Một StoryBoard có thể được dùng để mô tả và điều khiển một hoặc nhiều hoạt hình. Trong ví dụ này, chúng ta sẽ dùng
một hoạt hình đơn. Trong Silverlight, bạn có thể xây dựng hoạt hình bằng việc sử dụng các thuộc tính của một đối tượng.
Dùng DoubleAnimation để thay đổi thuộc tính Canvas.Left của đối tượng Ellipse. Bạn dùng DoubleAnimation bởi vì
Canvas.Left có kiểu Double.
Để một hoạt cảnh hoạt động, bạn cần chỉ ra tên của đối tượng trong thuộc tính TargetName
(Storyboard.TargetName="ellipse"), tên thuộc tính sẽ được thay đổi trong TargetProperty
(Storyboard.TargetProperty="(Canvas.Left)"), một giá trị để cập nhật (To="300"), và khoảng thời gian mà việc thay đổi
diễn ra (Duration="0:0:1"). Thuộc tính Duration chỉ ra khoảng thời gian mà hoạt cảnh diễn ra từ lúc đầu cho đến lúc kết
thúc. Giá trị 0:0:1 có nghĩa là 0 giờ, 0 phút và 1 giây.
<Canvas
xmlns=""
xmlns:x="">
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Left)"
To="300" Duration="0:0:1" />
<Ellipse x:Name="ellipse"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
Fill="black"/>
Bạn dùng DoubleAnimation là vì thuộc tính mà chúng ta đang dùng để tạo hoạt hình (Canvas.Left) có kiểu Double.
Vậy là bạn đã tạo ra hoạt hình Silverlight đầu tiên, giờ đây chắc hẳn bạn đã thấy Silverlight thú vị hơn rất nhiều
Các kiểu hoạt hình khác
Silverlight cũng hỗ trợ tạo hoạt hình bằng việc chuyển đổi (animating) màu sắc (ColorAnimation) và điểm
(PointAnimation).
Sưu tầm và tổng hợp:
Vũ Ngọc Tuấn
Các file đính kèm theo tài liệu này:
Silverlight - Step by Step (Tiếng Việt).pdf
