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.

pdf26 trang | Chia sẻ: tlsuongmuoi | Lượt xem: 1827 | Lượt tải: 0download
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:

  • pdfSilverlight - Step by Step (Tiếng Việt).pdf
Tài liệu liên quan