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

GIÁO TRÌNH GIẢNG DẠY SILVERLIGHT 2 Nhĩm tác giả thuộc cơng ty Infoway: Phạm Chí Cường Trần Duy Biên Trần Duy Long Website: www.infomap.vn Email: Contact@infoway.com.vn Infoway Solutions MỤC LỤC 2 MỤC LỤC: Chương I: Tổng quan về silverlight 1. Vì sao lại cĩ silverlight? 2. Silverlight là gì 3. Các đặc tính của silverlight 3.1. Sự kết hợp của WPF và XAML 3.2. Mở rộng cho ngơn ngữ kịch bản 3.3. Sự tích hợp với các ứng dụng đã cĩ 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 3.5. Hỗ trợ mạng 3.6. Hỗ trợ ngơn ngữ tích hợp truy vấn (LINQ) 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 4.2 . Các mơ hình lập trình của silverlight 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 5.2. Các cơng nghệ và cơng cụ liên quan của silverlight 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 7. Các ví dụ thực hành 7.1. Chương trình đầu tiên “Hello World” 8. Tài liệu tham khảo Chương II: XAML và Layout 1. Tổng quan về XAML 1.1. Xaml là gì? 1.2. Khai báo đối tượng 1.3. Thiết lập đặc tính cho đối tượng 1.4. Root elements và namespace trong XAML 1.5. Sự kiện 1.6. 2. Các namescope trong XAML 3. Sử dụng XAMLReader.Load 4. XAML và các Custom class 5. XAML và Type Converter 6. Layout 6.1. Canvas 6.2. StackPanel 6.3. Grid Infoway Solutions MỤC LỤC 3 Chương III: Sử dụng Silverlight trên Expression Blend và Visual Studio 2008 1. Giới thiệu về các cơng cụ phát triển Expression Blend 2 kết hợp với VS2008 1.1. Expression Blend làm việc như thế nào? 1.2. Những tính năng cĩ được từ Expression Blend 2. Bắt đầu nhanh với Silverlight 2 trên Expression Blend 2 2.1. Tạo một Project cho ứng dụng Silverlight 2 2.2. Vẽ khuơn hình (Shape) trên ứng dụng Silverlight 2.3. Thiết kế Control trên ứng dụng Silverlight 3. Xây dựng chương trình Silverlight 2 với Expression Blend và Visual Studio 2008Triển khai ứng dụng Chương IV: Các Control và User control trong Silverlight 1. Giới thiệu về các control phổ biến của Silverlight SDK tích hợp trong VS2008 2. Các Control Phổ biến trong Silverlight 2 3. User Control trong Visual Studio 2008 Chương V: Xử lý đồ họa trên Silverlight 1. Giới thiệu 2. Shapes and Drawing 2.1. Ellipse 2.2. Line 2.3. Path 2.4. Polygon 2.5. Polyline 2.6. Rectangle 3. Geometries 3.1. EllipseGeometry 3.2. PathGeometry 3.3. GeometryGroup 4. Brushes 3.1. Solid Color 3.2. Gradient 3.3. Images 3.4. Video 3.5. Deep Zoom Chương VI: Media và Animation 1. Animation 1.1. Storyboard 1.2. Key-Frame Animations Infoway Solutions MỤC LỤC 4 1.3. Double Animation 1.4. Color Animation 1.5. Point Animation 2. Media 2.1. MediaElement Object 2.2. Controlling Media Playback Interactively 2.3. Timeline Markers 2.4. Server-Side Playlist Ch ương VII: Làm việc với cơ sở dữ liệu trong Silverlight 1. Giới thiệu một vài cơng nghệ để truy cập dữ liệu trong Silverlight 2. Sử dụng Data Binding 3. Sử dụng Isolated Storage 4. Khái quát về làm việc với dữ liệu XML 5. Truy cập dữ liệu SQL Server với WCF Chương VIII: Giao tiếp mạng với silverlight 1. Giao tiếp HTTP và bảo mật trong Silverlight 1.1. Mặc định hỗ trợ giao thức HTTP 1.2. Kịch bản giao tiếp HTTP 1.3. Giao tiếp trong cùng một domain 1.4. Giao tiếp Cross-domain 1.5. Thiết lập triệu gọi HTTP 2. Các hạn chế trong truy cập mạng với silverlight 3. Truy cập web service trong silverlight 3.1. Bảo mật cho truy cập Service 3.2. Tạo một Service vượt qua phạm vi domain 4. Làm việc với socket 4.1. Hỗ trợ giao thức mạng 4.2. Lập trình mạng cơ bản với Socket 5. Mã hĩa dữ liệu của service Chương IX: Hiệu suất hoạt động trong ứng dụng Silverlight 1. Làm thế nào để chương trình của bạn chạy nhanh và ổn định 1.1. Thử nghiệm trên nhiều hệ điều hành và trình duyệt 1.2. Đặt EnableFrameRateCounter cho đúng trong thời gian phát triển 1.3. Sử dụng Transparent Background 1.4. Tránh việc sử dụng các kịch bản làm biến đổi kích cỡ font của Text 1.5. Tránh sử dụng chế độ Windowless 1.6. Sử dụng Visibility thay cho việc sử dụng Opacity trong rất nhiều trường hợp khơng cần đến sự cĩ mặt của Opacity 1.7. Silverlight sử dụng Multi-Core trong Rendering và Media Infoway Solutions MỤC LỤC 5 1.8. Trong chế độ Full-Screen, ẩn những đối tượng khơng sử dụng 1.9. Tránh sử dụng thuộc tính Width và Height đối với đối tượng MediaElement 1.10. Tránh sử dụng thuộc tính Width và Height đối với đối tượng Path 1.11. Nguy cơ đổ vỡ khi CPU sử ly cường độ lớn cơng việc 1.12. Nguy cơ đổ vỡ đối với ứng dụng cĩ những Package lớn 1.13. Sử dụng Double.ToString(CultureInfo.InvariantCulture) hiệu quả hơn Double.ToString() 1.14. 2. Sử dụng Background Worker 2.1. Bắt đầu với việc tạo một BackGroundWorker 2.2. Tạo một Event handler cho background worker bởi DoWork event 2.3. Tạo một event handler cho sự kiện ProgressChanged của backgroundworker 2.4. Tạo một sự kiện cho RunWorkerCompleted 2.5. Bổ xung sự kiện vào BackGroundWorker 2.6. Bắt đầu chạy background gọi bởi thủ tục RunWorkerAsync. 2.7. Hủy bỏ hoạt động của background gọi bởi thủ tục CancelAsync. 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 tố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ẽ Infoway Solutions CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 4 hoặc các thiết bị đầu vào khác 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, ngồ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à tồ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 Infoway Solutions CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 5 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. 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 Infoway Solutions CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 6 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 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: 8EF6-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”. Infoway Solutions CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 7 - 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) - Để hệ thống cài đặt và hồ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 Tồ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"> - 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 II: XAML CHƯƠNG II: XAML - Extensible Application Markup Language 1 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: 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: Infoway Solutions CHƯƠNG II: XAML 2 1.3.3 Sử dụng cú pháp theo nội dung 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): Hello! 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: Cách 2: <! —Khơng cần khai báo GradientStopCollection, bộ phân tích sẽ hiểu và tạo ra nĩ - -> Cách 3: Ngồ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: 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="" > Infoway Solutions CHƯƠNG II: XAML 3 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"> Doạn mã trên, trong thẻ root 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ẻ chúng ta tạo thêm một nút 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"> Infoway Solutions CHƯƠNG II: XAML 4 Doạn mã trên, trong thẻ root 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. function Button_Click() { alert("Xin chao!"); } 2 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ỉ: 3 Sử dụng XAMLReader.Load Sử dụng JavaScript API cho Silverlight, để tạo đối tượng trong lúc thực thi ứng dụng bắt buộc phải sử dụng qua phương thức CreateFromXaml. Sử dụng manged API những class hoặc cấu trúc (structure) cho phép cĩ thêm các thành phần bên trong thực sự được khởi tạo nếu nĩ cĩ trong cây thành phần của Silverlight. Trong hầu hết các trường hợp mà bạn muốn khởi tạo đối tượng trong lúc thực thi, bạn cĩ thể đơn giản triệu gọi constructor của class liên quan tới nĩ. Tuy vậy, Bạn vẫn cĩ thể tạo đối tượng thơng qua đầu vào là XAML thơng qua managed API, qua việc sử dụng phương thức XamlReader.Load. Phương thức Load trong managed API là tương ứng với CreateFromXaml trong JavaScript API, cũng giống như CreateFromXaml, đầu vào cho phương thức Load là những chuỗi và đầu ra là những đối tượng mà cĩ thể thêm vào mạng đối dạng cây của Silverlight. XamlReader đơn giản được thiết kể để đọc xml “XmlReader” cĩ trong Silverlight cũng như trong các cơng nghệ khác của Microsoft . XamlReader là lớp được xây dựng theo kiểu static với những phương thức tạo đối tượng; nĩ tạo đối tượng song song với việc xử lý XAML để sinh ra trong lúc thực 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 4 XAML và các Custom class Infoway Solutions CHƯƠNG II: XAML 5 XAML hỗ trợ khả năng cĩ thể định nghĩa tùy chỉnh lớp(custom class) hoặc cấu trúc(structure) trong bất kỳ ngơn ngữ runtime nào (CLR), và sau đĩ truy cập vào class thơng qua thẻ đánh dấu của XAML(XAML markup), bao gồm cách sử dụng hỗn hợp của những thẻ Silverlight đã định nghĩa trong XAML và những thẻ XAML mà tham chiếu tới custom class tương ứng của nĩ (Mỗi custom class chứa tương ứng 2 file .cs và .xaml, ví dụ: myclass.xaml và myclass.xaml.cs) 4.1 Custom class trong ứng dụng hoặc Assemblies Custom class dùng trong XAML cĩ thể định nghĩa theo cách riêng biệt: - Trong code-behind được đĩng gĩi trong ứng dụng Silverlight - Như là một class được định nghĩa trong một assembly tách biệt, như là một thư viện thực thi hoặc DLL Mỗi cách trên đều cĩ những ưu và nhược điểm như sau: - Ưu điểm của việc tạo class và đĩng gĩi riêng biệt là khả năng cĩ thể chia sẻ và dùng được trong nhiều ứng dụng Silverlight khác. Đồng thời là khả năng quản lý phiên bản của control dễ dàng hơn và nĩ làm cho nĩ cĩ khả năng tạo ra class mà bạn dự dịnh sử dụng như là một root element trong trang XAML. - Ưu điểm của việc tạo custom class trong ứng dụng là về mặt kỹ thuật tương đối đơn giản và giảm thiểu kích cỡ và kiểm tra khi bạn gặp vấn đề trong dự án Silverlight dựa trên code-behind. Tuy nhiên cĩ điểm hạn chế là bạn khơng thể dùng custom class như là một root element. Bạn phải tham chiếu custom class của bạn qua một assembly khác hoặc là giới hạn subclass sử dụng User Control hỗ trợ code-behind trong dự án Silverlight của bạn. - Dù là định nghĩa trong cùng một assembly hay assembly khác nhau, custom class phải được ánh xạ qua CLR namespace và XML namespace để được tham chiếu trong XAML 4.2 Ràng buộc để Custom Class trở thành thành phần đối tượng trong XAML Để được tạo đối tượng như là một thành phần đối tượng của XAML, custom class của bạn phải đáp ứng các yếu tố sau đây: - Custom class phải để public và hỗ trợ khởi tạo mặc định khơng cĩ tham số truyền vào (default constructure ‘parameterless’). - Custom class khơng phải là class lồng(class lồng và dấu chấm ‘.’ ở cú pháp của nĩ ảnh hưởng tới những đặc điểm của Silverlight như là các property kèm theo. Ngồi ra để đối tượng của bạn như là một thành phần đối tượng của XAML, bạn cĩ thể cho phép sử dụng những property cho các public property của Custom class của bạn điều này làm cho Custom class của bạn như là một kiểu property. Điều này bởi vì bây giờ đối tượng cĩ thể được khởi tạo giống như một thành phần đối tượng và cĩ thể xét thuộc tính cho nĩ như là một property 4.3 Yêu cầu đối với sự kiện trong XAML đối với Custom class Để sử dụng cú pháp theo kiểu thuộc tính để tương tác với sự kiện trong XAML, sự kiện phải được public trong class mà hỗ trợ constructure mặc định, hoặc sự kiện phải được định nghĩa trong class trừu tượng và sau đĩ sự kiện cĩ thể truy cập được qua những class kế thừa. Infoway Solutions CHƯƠNG II: XAML 6 5 XAML và Type Converter 6 Layout 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. 6.1 Canvas Định nghĩa một khu vực mà trong đĩ bạn cĩ thể chỉ ra vị trí của từng đối tượng thành phần bằng cách sử dụng các tọa độ tham chiếu. Bạn cĩ thể sử dụng lồng các Canvas với nhau và những thành phần bên trong của Canvas phải là một UIElement. Trong nhiều trường hợp thì Canvas chỉ đĩng vai trị như một đối tượng để chứa đựng những đối tượng khác và khơng cĩ một thuộc tính hiển thị nào. Một Canvas sẽ khơng được hiển thị nếu nĩ cĩ một trong những thuộc tính sau đây: - Thuộc tính Height xét giá trị 0 - Thuộc tính Width xét giá trị 0 - Background bằng null hoặc là Nothing ở VS Basic - Opacity xét giá trị 0 - Visibility bằng Visibility.Collapsed - Một trong những Canvas ở mức độ cao hơn (parrent) của nĩ khơng được hiển thị. Ví dụ dưới đây chỉ ra là hình chữ nhật được cách trái 30pixel và cách trên 30pixel <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" /> 6.2 StackPanel Sắp xếp những thành phần bên trong nĩ thành một dịng và cĩ thể hiển thị theo hai kiểu ngang hoặc là dọc. Giá trị mặc định được gán chọ thuộc tính Orientation là chiều dọc (Vertical) và giá mặc định được xét cho hai thuộc tính HorizontalAlignment và VerticalAlignment là Stretch Ví dụ dưới đây hướng dẫn cách tạo những những đối tượng trong StackPanel Infoway Solutions CHƯƠNG II: XAML 7 6.3 Grid Định nghĩa dạng lưới phức tạp bao gồm những dịng và cột. Mặc định Grid chứa một cột và một dịng. Để định nghĩa nhiều cột hoặc dịng chúng ta dùng ColumnDefinitions và RowDefinitions. Mỗi ColumnDefinition và RowDefinition trong ColumnDefinitions và RowDefinitions xác định một dịng hoặc cột. ColumnDefinition và RowDefinition cũng định nghĩa kích thước của mỗi cột và dịng sử dụng đối tượng GridLength Ví dụ: Dưới đây là ví dụ dùng Grid để lên một thiết kế giao diện cơ bản. <Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300" ShowGridLines="True"> <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"> <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> Infoway Solutions CHƯƠNG II: XAML 8 <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> <TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> 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; Infoway Solutions CHƯƠNG II: XAML 9 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; 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 II: XAML 10 Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 1 Giới thiệu về các cơng 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.1 Expression Blend làm việc như thế nào? Trong Expression Blen, Bạn cĩ thể thiết kế ứng dụng một cách trực quan, vẽ các hình, đường kẻ, và các Control cĩ trên Artboard, và sau đĩ bạn cĩ thể thay đổi sự xuất hiện và các hành động của chúng. Bạn cĩ thể nhập hình ảnd, video, và âm thanh. Cịn trong các ứng dụng trên nền tảng Window, bạn cịn cĩ thể nhập và thay đổi các đối tượng 3D. Bạn cĩ thể tạo các storyboard để làm chuyển động hình trong thiết kế của bạn, sau đĩ tùy trọn Trigger trong Storyboard khi người dụng cĩ tương tác với ứng dụng của bạn 1.2 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 ngồi - Tính năng thiết kế theo Real-time và markup views Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 2 - Artwork import capabilities from Expression Design 2 - 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 2 Bắt đầu nhanh với Silverlight 2 trên Expression Blend 2 2.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. Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 3 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”. 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 III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 4 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 III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 5 • 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). 3 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 tồ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. Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 6 Trong project WeatherWidget chúng ta cĩ một tham chiếu tới một Web service để triệu gọi dữ liệu dự báo thời tiết với liên kết Để kết nối tới một web service chúng ta cĩ thể xem thêm ở liên kết sau đây Bây giờ chúng ta sẽ sử dụng Expression Blend để thiết kế giao diện người dùng bằng cách chuột phải vào file Page.xaml chọn Open in Expression Blend Sau khi Expression Blend khởi động xong, các cấu trúc file và thư mục trên đĩ vẫn được sắp xếp và giữ nguyên giống như trong Visual Studio. Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 7 Bây giờ chúng ta lần lượt tạo các Layout cho ứng dụng trên Expression Blend. Để thiết kế một lớp hình nền cho ứng dụng. Trên Toolbox, chuột phải chọn Canvas. Sau đĩ đặt tên cho Canvas này là LayoutRoot Với LayoutRoot ta chọn hình nền trong Resource đã được định nghĩa sẵn, chúng ta sẽ cĩ theo hình ảnh dưới đây Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 8 Tiếp theo chúng ta lần lượt tạo thêm các Layout là các Canvas và StackPanel tương tự như với LayoutRoot để cĩ được các hình ảnh giao diện dưới đây Dưới đây là các đoạn mã Xaml tự sinh trong quá trình thiết kế với Expression Blend <Image x:Name="ConditionsOverlay" Margin="-13,-13,0,0" Source="{StaticResource SunBig}"/> <TextBlock Width="225" Height="37" TextAlignment="Right" FontSize="34" x:Name="TodayTemp" /> <TextBlock Width="225" Height="14" TextAlignment="Right" x:Name="TodayDescription" /> <TextBlock Width="225" Height="14" TextAlignment="Right" x:Name="TodayRange" /> <TextBlock Width="225" Height="14" TextAlignment="Right" x:Name="City" Text="ðang lấy dữ liệu..." /> <Canvas Width="71" Background="{StaticResource dividerVertical}" Margin="5, 0, 0, 0"> <TextBlock FontSize="11" x:Name="TomorrowName" Foreground="White" Opacity="0.5" /> Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 9 <TextBlock Canvas.Top="35" x:Name="TomorrowLo" Foreground="White" Opacity="0.5" /> <Canvas Width="71" Background="{StaticResource dividerVertical}" Margin="5, 0, 0, 0"> <TextBlock FontSize="11" x:Name="DayAfterName" Foreground="White" Opacity="0.5" /> <TextBlock Canvas.Top="35" x:Name="DayAfterLo" Foreground="White" Opacity="0.5" /> <TextBlock FontSize="11" x:Name="TwoDaysAwayName" Foreground="White" Opacity="0.5" /> <TextBlock Canvas.Top="20" x:Name="TwoDaysAwayHi" Foreground="White" /> <TextBlock Canvas.Top="35" x:Name="TwoDaysAwayLo" Foreground="White" Opacity="0.5" /> <StackPanel Height="17" Background="{StaticResource dividerHorizontal}" Orientation="Horizontal" > <TextBlock Text="Làm tươi" Margin="5, 0, 5, 0" Width="105" Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Refresh" /> <TextBlock Text="Change ZIP" Margin="5, 0, 5, 0" Width="105" TextAlignment="Right" Foreground="White" Opacity="0.5" MouseLeftButtonUp="TextBlock_MouseLeftButtonUp_Zip" /> Để tạo sự kiện cho một Textblock trên Expression Blend. Sau khi chọn đúng đối tượng Texblock trên Objects and Timeline, nhắp đúp chuột vào vị trí tên sự kiện như hình vẽ dưới đây. Ngay lập tức Visual Studio sẽ mở ra cho chúng ta viết code behind. private void TextBlock_MouseLeftButtonUp_Zip(object sender, MouseButtonEventArgs e) { ZipCode.Text = ""; ZipCode.Foreground = new SolidColorBrush(Colors.Black); ConditionsScreen.Visibility = Visibility.Collapsed; ZipCodeScreen.Visibility = Visibility.Visible; } Bằng việc sự dụng kết hợp giữa Visual studio và Expression Blend, các sự cập nhật về mã lệnh cũng như các file trong ứng dụng luơn được thơng báo để 2 chương trình cùng cĩ được cập nhật mới nhất. Sau khi thiết kế đầy đủ các layout trên Expression Blend, việc cịn lại chủ yêu là dành cho người lập trình mã lệnh trên Visual Studio. Visual studio sẽ đĩng gĩi ứng dụng này thành file .xap (ở đây là WeatherWidget.xap). file này sẽ được triển khai ở bất kỳ một trang html hay aspx với dịng lệnh dưới đây. Infoway Solutions CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 10 Trên trang HTML : <object data="data:application/x-silverlight-2," type="application/x- silverlight-2" width="100%" height="100%"> <a href="" style="text-decoration: none;"> <img src="" alt="Get Microsoft Silverlight" style="border-style: none"/> Trên trang ASPX : <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ WeatherWidget.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" /> Trên Visual studio bấm F5 để chạy ứng dụng ta sẽ cĩ kết quả dưới đây : Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 1 Giới thiệu về các control phổ biến của Silverlight SDK tích hợp trong VS2008 Các Control trong silverlight cho phép bạn lưu trữ nội dung hoặc các control khác, bạn cĩ thể tạo hoặc tự thiết kế được các control này để chúng hiển thị được những thay đổi trạng thái tới người dùng. Trong cơng cụ phát triển Visual studio 2008 đã tích hợp các cơng cụ silverlight (Cài đặt Siverlight tool, đã hướng dẫn ở chương một) cĩ rất nhiều các control cĩ sẵn để bạn tạo, thay đổi hoặc xử lý các sự kiện theo chúng Dưới đây là hình ảnh danh sách các cơng cụ đã cĩ trong Silverlight tool Ở Chương II chúng ta đã tìm hiểu về các cách trình bày control theo Layout (Grid, StackPanel, Canvas). Trong chương này chúng ta sẽ xem và tìm hiểu các control phổ biến trong silverlight 2 và cách trình bày chúng theo Layout đã học. 2 Các control phổ biến trong Silverlight 2 1.1 Border o Mổ tả Border cung cấp một background , khu vực cho phép bạn nhúng vào đĩ một thành phần duy nhất nhằm tạo ra hiệu quả về đồ hoạ. o Ví dụ Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 2 Text Surrounded by a Border 1.2 Button o Mơ tả Button kiểm sốt các phản ứng của người dùng qua các thiết bị đầu vào, bao gồm các sự kiện, style o Ví dụ <Button Name="Button" Content="Click Me !" Background="Blue" Margin="20,60,200,200" MouseLeftButtonDown="Button_MouseLeftButtonDown"/> 1.3 Calendar o Mơ tả Calendar cho phép người sử dụng chọn ngày, tháng, năm. Ta cĩ thể sử dụng các style khác nhau thơng qua Mode o Ví dụ 1.4 CheckBox o Mơ tả Cho phép người dùng lựa chọn ba trạng thái dánh dấu ,bỏ dánh dấu và trạng thái trung gian o Ví dụ <CheckBox Name="CheckBox1" ClickMode="Release" IsThreeState="False" Content="CheckBox two states" Margin="10,50,0,0"> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 3 <CheckBox Name="CheckBox2" ClickMode="Release" IsThreeState="True" Content="CheckBox three states" Margin="10,100,0,0"> 1.5 ComboBox o Mơ tả ComboBox cho phép chọn lựa một Item từ một danh sách Item từ ComboBox o Ví dụ <ComboBox Name="ComboBox1" BorderThickness="2" IsDropDownOpen="True" SelectedIndex="0" Width="200" Height="30"> 1.6 ContentControl o Mơ tả ContentControl cĩ các dẫn xuất như Button, Panel. Ta cĩ thể tuỳ chỉnh ContentControl thơng qua các template o Ví dụ Sau đây là việc cài đặt một vài control được thừa kế từ ContentControl Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 4 \ 1.7 DatePicker o Mơ tả DatePicker cho phép người dùng sử dụng để lựa chọn ngày, hoặc gõ trực tiếp vào textbox hoặc sử dụng lịch thả xuống. DatePicker cung cấp một loạt các sự kiện hỗ trợ việc kiểm sốt lịch thả xuống. o Ví dụ <swc:Calendar x:Name="cal2" Canvas.Left="270" Canvas.Top="100" IsTodayHighlighted="false" /> <swc:DatePicker x:Name="dp2" Canvas.Left="20" Canvas.Top="480" SelectedDateFormat="Long"/> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 5 1.8 GridSplitter o Mơ tả GridSplitter cho phép người dùng phân phối lại khơng gian giữa các hàng hoặc cột. Nĩ là yếu tố đồ hoạ tượng trưng cho một thành phần gắn vào nĩ mà thành phần đĩ cĩ thể tương tác o Ví dụ <swc:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" /> <swc:GridSplitter Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" Width="5" HorizontalAlignment="Left" VerticalAlignment="Stretch" /> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 6 1.9 HyperlinkButton o Mơ tả HyperlinkButton hiển thị một siêu liên kết. Khi bấm vào HyperlinkButton sẽ cho phép người dùng truy cập vào một trang web, địa chỉ URI đích được xác định với các NavigateUri. Bạn cĩ thể chỉ định cửa sổ hoặc một khung trong những điểm đến trang web bằng cách sử dụng TargetName o Ví dụ <TextBlock Text="HyperlinkButton Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" /> <HyperlinkButton Content="Click here to learn about Silverlight" NavigateUri="" TargetName="_blank" Margin="10,60,0,0"/> 1.10 Image o Mơ tả Image hiển thị hình ảnh trong định dạng JPEG hoặc PNG. Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 7 Hình ảnh hiển thị ở 1, 4 hoặc 8 bit màu, hình ảnh thực với 24 hoặc 32 bit o Ví dụ Mã XAML: Mã C#: Image myImage = new Image(); myImage.Source = new BitmapImage(new Uri("myPicture.jpg", UriKind.RelativeOrAbsolute)); LayoutRoot.Children.Add(myImage); 1.11 InkPresenter o Mơ tả InkPresenter cung cấp các bản vẽ mặt để hỗ trợ tính năng Tablet PC. InkPresenter được dẫn xuất từ canvas nên cĩ thể hiển thị một hoặc nhiều đối tượng và UIElement strokes. o Ví dụ Mã XAML: <InkPresenter x:Name="MyIP" Height="500" Width="500" Margin="50,50,0,0" MouseLeftButtonDown="MyIP_MouseLeftButtonDown" LostMouseCapture="MyIP_LostMouseCapture" MouseMove="MyIP_MouseMove" Background="Transparent" Opacity="1" /> Mã C# private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e) { MyIP.CaptureMouse(); StylusPointCollection MyStylusPointCollection = new StylusPointCollection(); MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP)); NewStroke = new Stroke(MyStylusPointCollection); MyIP.Strokes.Add(NewStroke); } //StylusPoint objects are collected from the MouseEventArgs and added to MyStroke. private void MyIP_MouseMove(object sender, MouseEventArgs e) { if (NewStroke != null) NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP)); } //MyStroke is completed private void MyIP_LostMouseCapture(object sender, MouseEventArgs e) { NewStroke = null; } Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 8 1.12 ListBox o Mơ tả ListBox chứa một danh sách các Item, Item cĩ thể là một doạn văn bản hay một Control. o Ví dụ <TextBlock Text="ListBox Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" /> 1.13 MediaElement o Mơ tả Các MediaElement kiểm sốt nội dung Audio hoặc Video. Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 9 MediaElement cung cấp một vùng chữa nhật cĩ thể hiển thị Video trên đĩ, hoặc Audio o Ví dụ <MediaElement x:Name="media" Source="xbox.wmv" CurrentStateChanged="media_state_changed" Width="300" Height="300"/> 1.14 MultiScaleImage o Mơ tả MultiScaleImage cho phép người dùng mở một hình ảnh cho phép phĩng to thu nhỏ thơng qua cơng nghệ Deep Zoom. o Ví dụ Mã XAML: <MultiScaleImage x:Name="deepZoomObject" Source="source/items.bin" MouseEnter="DeepZoomObject_MouseEnter" /> Mã C#: private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e) { if (deepZoomObject.UseSprings = false) { deepZoomObject.UseSprings = true; } this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5); } 1.15 PasswordBox o Mơ tả PasswordBox được sử dụng để nhập vào thơng tin mật khẩu ký tự hiển thị chỉ là ký tự đại diện. o Ví du Mã XAML: <PasswordBox x:Name="MyPWBox1" Margin="20,10,0,0" PasswordChanged="MyPWBox1_PasswordChanged" MaxLength="8" Height="35" Width="200" HorizontalAlignment="Left" /> Mã C#: public Page() { InitializeComponent(); } Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 10 private void MyPWBox1_PasswordChanged(object sender, RoutedEventArgs e) { ReadOnlyTB.Text = MyPWBox1.Password; } 1.16 Popup o Mơ tả Popup luơn luơn xuất hiện lên trên cùng cửa sổ ứng dụng hữu ích cho việc hiện thị thơng báo cho một nhiệm vụ o Ví dụ Mã XAML: <Button Width="100" Height="50" x:Name="showPopup" Click="showPopup_Click" Content="Show Popup" /> Mã C# // Create the popup object. Popup p = new Popup(); private void showPopup_Click(object sender, RoutedEventArgs e) { Border border = new Border(); border.BorderBrush = new SolidColorBrush(Colors.Black); border.BorderThickness = new Thickness(5.0); } 1.17 ProgressBar o Mơ tả ProgressBar hiển thị cho biết tiến trình đang hoạt động bằng việc thay đổi giá trị thay đổi. o Ví dụ Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 11 <TextBlock HorizontalAlignment="Center" Margin="10" Text="Value-Based Progress Bar" /> <ProgressBar x:Name="pg1" Value="100" Margin="10" Maximum="200" Height="15" IsIndeterminate="False" /> <TextBlock HorizontalAlignment="Center" Margin="10" Text="Indeterminate Progress Bar" /> <ProgressBar x:Name="pg2" Margin="10" Height="15" IsIndeterminate="True" /> 1.18 RadioButton o Mơ tả RadioButton cho phép người dùng chọn một tùy chọn từ một nhĩm các tùy chọn. Các RadioButton tổ chức trong cùng một nhĩm bằng cách đặt các GroupName chung cho mỗi RadioButton. Các RadioButton là một ContentControl o Ví dụ Mã XAML: <TextBlock Text="RadioButton Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" Grid.Row="0" Grid.ColumnSpan="2"/> <RadioButton x:Name="TopButton" Margin="5,0,0,0" Checked="HandleCheck" GroupName="First Group" Content="First Choice" Grid.Row="1" Grid.Column="1"/> <RadioButton x:Name="MiddleButton" Margin="5,0,0,0" Checked="HandleCheck" GroupName="First Group" Content="Second Choice" Grid.Row="3" Grid.Column="1"/> <RadioButton x:Name="LowerButton" Margin="5,0,0,0" Checked="HandleCheck" Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 12 Content="Third Choice" Grid.Row="4" Grid.Column="1"/> <TextBlock Grid.Row="5" x:Name="choiceTextBlock" Margin="0,10,0,0" Grid.ColumnSpan="2"/> Mã C#: private void HandleCheck(object sender, RoutedEventArgs e) { RadioButton rb = sender as RadioButton; choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name; } 1.19 RepeatButton o Mơ tả RepeatButton là một nút kiểm sốt các sự kiện tác động vào nút như Mouse Click và thời gian giữa hai lần click liên tiếp o Ví dụ Mã XAML: RepeatButton Content="click and hold for multiple Click events" Click="RepeatButton_Click" Width="250" Margin="0,0,0,5" HorizontalAlignment="Left"/><TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" /> Mã C#: static int Clicks = 0; private void RepeatButton_Click(object sender, RoutedEventArgs e) { Clicks += 1; clickTextBlock.Text = "Number of Clicks: " + Clicks; } Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 13 1.20 ScrollBar o Mơ tả ScrollBar cung cấp một thanh trượt cĩ khả năng di chuyển định hướng theo chiều ngang hoặc chiều dọc 1.21 ScrollViewer o Mơ tả ScrollViewer kiểm sốt một mảng content, cung cấp hai ScrollBar để kiểm sốt việc di chuyển mảng content . ScrollViewer cho phép bạn thiết lập kích cỡ của khoảng View liên quan đến Content theo chiều ngang và chiều dọc. o Ví dụ <ScrollViewer Height="200" Width="200" HorizontalScrollBarVisibility="Auto" Canvas.Top="60" Canvas.Left="340"> <TextBlock Width="300" TextWrapping="Wrap" Text="I am the very model of a modern Major-General,." /> 1.22 Slider o Mơ tả Slider cho phép người dùng lựa chọn từ một loạt các giá trị bằng cách di chuyển dọc theo một thanh ngang. o Ví dụ <Slider Margin="0,5,0,20" x:Name="slider1" Minimum="0" Maximum="10" /> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 14 1.23 TabControl o Mơ tả TabControl cung cấp một giao diện hiển thị cho các thành phần. Các thành phần con của TabControl là các TabItem. o Ví dụ <UserControl xmlns:swc="clr- namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="TabControlExample.Page" xmlns="" xmlns:x="" FontFamily="Trebuchet MS" FontSize="11" Width="400" Height="300"> <swc:TabControl x:Name="tab1" Canvas.Top="20" Canvas.Left="20" Height="200" Width="300" /> <swc:TabControl x:Name="tab2" Canvas.Top="240" Canvas.Left="20" Height="200" Width="300" /> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 15 1.24 TextBlock o Mơ tả TextBlock hiển thị nội dung văn bản. bạn cĩ thể gán các nội dung của một TextBlock bằng cách sử dụng nguồn text. Ngồi ra cũng cĩ thể gán TextBlock bằng một tập hợp các đối tượng text. o Ví dụ Hello, world! 1.25 TextBox o Mơ tả TextBox được sử dụng nhập dữ liệu dạng text từ người dùng hoặc hiển thị văn bản. TextBox thường được dùng để chỉnh sửa văn bản đơi khi cũng được dùng ở chế độ chỉ đọc. TextBox cĩ thể hiển thị nhiều dịng văn bản. o Ví dụ <TextBox x:Name="ReadWriteTB" TextChanged="ReadWriteTB_TextChanged" IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="35" Width="200" /> 1.26 ToolTip o Mơ tả Tooltip cung cấp thơng tin về một đối tượng đồ họa bằng cách sử dụng một cửa sổ pupup. Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 16 o Ví dụ <TextBlock Text="TextBlock with an offset ToolTip." Canvas.Top="110" Canvas.Left="20" > <ToolTip Content="Offset ToolTip." HorizontalOffset="20" VerticalOffset="30"/> 1.27 DataGrid o Mơ tả DataGrid cung cấp một cách linh hoạt để hiển thị một tập hợp các dữ liệu trong các hàng và cột. Data Grid hỗ trợ nhiều style hiển thị dữ liệu trong các cột hoặc hàng. Data Grid hỗ trợ các bảng tùy chọn định dạng và khả năng hiển thị hoặc ẩn các tiêu đề, các thanh trượt di chuyển . Ngồi ra Data Grid cịn cung cấp một số kiểu mẫu mà bạn cĩ thể thay đổi hình thức thể hiện dữ liệu hàng, cột và tiêu đề. o Ví dụ <UserControl x:Class="DataGridSnippets.Page" xmlns="" xmlns:x="" xmlns:data="clr- namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" Width="500" Height="Auto"> <TextBlock Text="DataGrid Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" /> <data:DataGrid x:Name="dataGrid1" Height="140" Margin="0,5,0,10" AutoGenerateColumns="True" /> <data:DataGrid x:Name="dataGrid3" Height="140" Margin="0,5,0,10" RowDetailsVisibilityMode="VisibleWhenSelected" > Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 17 <data:DataGrid x:Name="dataGrid4" Height="160" Margin="0,5,0,10" RowHeight="40" AutoGenerateColumns="False" > <data:DataGridTextColumn Header="First Name" Width="SizeToHeader" Binding="{Binding FirstName}" FontSize="20" /> <data:DataGridTextColumn Header="Last Name" Width="SizeToCells" Binding="{Binding LastName}" FontSize="20" /> <data:DataGridTextColumn Header="Address" Width="150" Binding="{Binding Address}" > <data:DataGridCheckBoxColumn Header="New?" Width="40" Binding="{Binding IsNew}" /> <data:DataGridCheckBoxColumn Header="Subscribed?" Width="Auto" Binding="{Binding IsSubscribed}" IsThreeState="True" /> <TextBlock Text="DataGrid with template column and custom alternating row backgrounds:"/> <data:DataGrid x:Name="dataGrid5" Height="125" Margin="0,5,0,10" AutoGenerateColumns="False" RowBackground="Azure" AlternatingRowBackground="LightSteelBlue"> <TextBlock Padding="5,0,5,0" Text="{Binding FirstName}"/> Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 18 <TextBox Padding="5,0,5,0" Text="{Binding FirstName}"/> <data:DataGridTextColumn Header="Address" Width="300" Binding="{Binding Address}" /> Mã C#: using System; using System.Collections.Generic; using System.Windows.Controls; namespace DataGridSnippets { public partial class Page : UserControl { public Page() { InitializeComponent(); // Thiết lập ItemsSource để tự tạo các cột. dataGrid1.ItemsSource = Customer.GetSampleCustomerList(); dataGrid3.ItemsSource = Customer.GetSampleCustomerList(); dataGrid4.ItemsSource = Customer.GetSampleCustomerList(); dataGrid5.ItemsSource = Customer.GetSampleCustomerList(); } } public class Customer { public String FirstName { get; set; } public String LastName { get; set; } public String Address { get; set; } public Boolean IsNew { get; set; } public Boolean? IsSubscribed { get; set; } public Customer(String firstName, String lastName, String address, Boolean isNew, Boolean? isSubscribed) { this.FirstName = firstName; this.LastName = lastName; this.Address = address; this.IsNew = isNew; this.IsSubscribed = isSubscribed; } public static List GetSampleCustomerList() { Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 19 return new List(new Customer[4] { new Customer("A.", "Zero", "12 North Third Street, Apartment 45", false, true), new Customer("B.", "One", "34 West Fifth Street, Apartment 67", false, false), new Customer("C.", "Two", "56 East Seventh Street, Apartment 89", true, null), new Customer("D.", "Three", "78 South Ninth Street, Apartment 10", true, true) }); } } } 3 User Control trong Visual Studio 2008 Trong ví dụ được trình bày dưới đây chúng ta tìm hiểu cách tạo một User Control và sử dụng nĩ như thế nào trong Visual Studio 2008 1. Trong Project Silverlight đã cĩ chúng ta làm thao tác tạo New Item theo hình vẽ dưới đây Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 20 2. Chọn Silverlight User Control trong Templates và đặt tên control này là FormContactUserControl.xaml 3. Chúng ta sẽ cĩ 2 file sau được tạo ra - FormContactUserControl.xaml - FormContactUserControl.xaml.cs Trong FormContactUserControl.xaml chúng ta sẽ cĩ đoạn mã sau <UserControl x:Class="Chapter2.FromContactUserControl" xmlns="" Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 21 xmlns:x="" > 4. Bây giờ chúng ta sẽ thêm đoạn mã dưới đây vào bên trong thẻ <Button x:Name="btnSubmit" Content="Lưu lại" Margin="140,150,0,0" Width="55" 5. Thêm sự kiện vào nut bấm “btnSubmit’. Chúng ta sẽ xử lý sự kiện btnSubmit_Click vào trong mã c# như sau private void btnSubmit_Click(object sender, RoutedEventArgs e) { // Phe duyet du lieu dau vao if (txtName.Text == "") { MessageBox.Show("Họ và tên khơng được bỏ trống"); txtName.Focus(); } else { //Tiep tuc xu ly luu contact //... } } 6. Làm thao tác Build Sulution, chúng ta đã tạo xong control FormContactUserControl. Bây giờ chúng ta mở file Page.xaml để sử dụng lại control đĩ. Chúng ta thêm mới đoạn mã sau: xmlns:inf="clr-namespace:Chapter2" vào bên trong thẻ Infoway Solutions CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 22 7. Để hiển thị được User control: FormContactUserControl trong Page.xaml ta tiếp tục thêm đoạn mã sau 8. Bấm F5 để chạy chương trình bạn sẽ được kết quả như hình ảnh sau 4 Các bài tập thực hành Các ví dụ, và các bài thực hành mở rộng các bạn cĩ thể tải về từ địa chỉ sau. liên kết này là các ví dụ bao gồm của chương 2 và chương 3 Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT CHƯƠNG V: XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 1 Giới thiệu Silverlight cung cấp nhiều lựa chọn cho việc thêm các tính năng trực quan thú vị cho ứng dụng của bạn. Bạn cĩ thể sử dụng vẽ, Shape, Path, và những hình học phức tạp. Những khu vực được xác định bởi dạng hình thì cĩ thể tơ hiệu ứng, như là ảnh, dải màu, hoặc là đoạn video, thơng qua việc sử dụng Brush. Silverlight kế thừa mợt thư viện đồ họa khá đầy đủ từ WPF bởi vậy sẽ khơng quá khĩ khăn để một lập trình viên đã quen với WPF chuyển qua làm việc với Silverlight. Dưới đây chúng ta sẽ lần lượt làm quen với các đối tượng đồ họa như Ellipse, Line, Path, Polygon, Geometries, BrushesQ 2 Shapes and Drawing Trong Silverlight, Shape là kiểu UIElement nên bạn cĩ thể dễ dàng hiển thị một đối tượng dạng Shape lên màn hình. Bởi vì chúng là những thành phần đồ họa nên những đối tượng Shape này cĩ thể đi kèm với những container như Grid và Canvas. Silverlight cung cấp những dạng hình(Shape) mà bạn cĩ thể dùng ngay được như Ellipse, Line, Path, Polygon, Polyline, và Rectangle. Những Shape đều cĩ chung những đặc tính dưới đây: - Stroke: dùng để vẽ viền ngồi của Shape. - StrokeThickness: độ dày của viền ngồi của Shape. - Fill: Mơ tả cách phía bên trong của Shape được vẽ. - Đặc tính Data chỉ rõ tọa độ và các đỉnh được định nghĩa tùy theo thơng tin đầu vào Những đối tượng Shape cĩ thể dùng bên trong Canvas. Canvas hỗ trợ chỉ ra vị trí tuyệt đối của đối tượng con bên trong thơng qua đặc tính đính kèm là Canvas.Left và Canvas.Top 2.1 Ellipse Bạn cĩ thể tạo một Ellipse bằng cách xác định hai thuộc tính cơ bản là rộng(Width) và cao(Height) như ví dụ minh họa dưới đây. <Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black"/> Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 2.2 Line Cho phép bạn vẽ một đoạn thẳng giữa hai điểm. Ví dụ dưới đây chỉ ra một số cách để bạn xác định tọa độ của đoạn thẳng và đặc tính Stroke của nĩ. <!—Vẽ một đường chéo từ tọa độ (0, 0) tới (100,100) và di chuyển nĩ tới gốc tọa độ mới thêm 100 pixels về phía bên phải. --> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 2.3 Path Lớp Path cho phép bạn vẽ những hình cong và những dạng hình phức tạp. Những hình cong và dạng hinh(shape) được diễn tả thơng qua việc sử dụng đối tượng Geometry. Để sử dụng Path, bạn tạo một Geometry và dùng nĩ để xét cho đặc tính Data của đối tượng Path. Cĩ nhiều loại đối tượng Geometry khác nhau để bạn chọn: LineGeometry, RectangleGeometry, và EllipseGeometry cĩ liên quan tới những dạng hình(shape) đơn giản lần lượt tương ứng Line, Rectangle, Ellipse. Để tạo những dạng hình phức tạp hoặc hình trịn chúng ta sử dụng PathGeometry. Ví dụ dưới đây xử dụng cú pháp rút gọn để biểu diễn một dạng hình phức tạp. <Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 100,200 C 100,25 400,350 400,175 H 280" /> Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 2.4 Polygon Để xác định một đa giác(Polygon) bạn cần cung cấp một danh sách các điểm (Point) và tơ màu cho nĩ qua đặc tính Fill. Ví dụ dưới đây vẽ một đa giác với màu viền đỏ tía và bên trong được đổ màu xanh. <Polygon Points="300,200 400,125 400,275 300,200" Stroke="Purple" StrokeThickness="2"> 2.5 Polyline Cũng tương tự như đối tượng Polygon ngoại trừ việc khơng nhất thiết Polyline phải khép kín. Bạn cũng cĩ thể nhận được kết quả tương tự như Polyline khi vẻ chồng lên nhau nhiều Line. Chú ý Polyline với một điểm(Point) sẽ khơng được hiển thị lên. Ví dụ dưới đây vẽ một Polyline là một hình tam giác viền màu xanh khép kín. <Polyline Points="50,25 0,100 100,100 50,25" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50" /> 2.6 Rectangle Một hình chữ nhật(Rectangle) được xác định bởi hai đặc tính rộng(Width) và cao(Height), để xác định vị trí của Rectangle trong container chúng ta sử dụng thuộc tính Margin hoặc Canvas.Left, Canvas.Top để tùy chỉnh. Rectangle khơng hỗ trợ đối tượng con bên trong bởi vậy nếu bạn muốn khu vực Rectangle chứa những đối tượng Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT khác bạn cĩ thể sử dụng Canvas. Bạn cũng cĩ thể dùng dạng hình hỗn hợp, nhưng trong trường hợp này cĩ lẽ bạn nên sử dụng RectangleGeometry hơn là việc dùng Rectangle. Ví dụ dưới đây hiển thị một Rectangle viền màu đỏ và tơ màu bên trong màu xanh. <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" Canvas.Top="20" Canvas.Left="20" StrokeThickness="3" /> 3 Geometries Cung cấp lớp cơ sở cho những đối tượng để xác định dạng hình học cho đối tượng. Đối tượng Geometry cĩ thể sử dụng để làm vùng giao(clipping regions) và cũng như định nghĩa dữ liệu cho đối tượng Path. 3.1 EllipseGeometry Miêu tả hình dạng của đường trịn hoặc ellipse. FillRule là đặc tính kế thừa từ lớp cơ sở Geometry nhưng tùy chọn này khơng cĩ tác dụng đối với EllipseGeometry. EllipseGeometry chỉ đơn giản định nghĩa hình dạng cho ellipse và khơng thể tự nĩ hiển thị được. Bởi vì nĩ rất đơn giản và phạm vi sử dụng rộng. Ví dụ dưới đây vẽ một path sử dụng dữ liệu dạng EllipseGeometry 3.2 PathGeometry Miêu tả dạng hình phức tạp cĩ thể gồm cĩ hình cung, đường cong, ellipse, đoạn thẳng, và hình chữ nhật. Mỗi PathGeometry xác định bởi một danh sách đối tượng PathFigure. Mỗi đối tượng PathFigure bao gồm một hoặc nhiều PathSegment, tương tự cũng như với ArcSegment và LineSegment. Để phủ kín diện tích của PathGeometry thì mọi đối Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT tượng PathFigure bạn phải xét thuộc tính IsFilled là "true" và FillRule để xác định khu vực được fill. 3.3 GeometryGroup Miêu tả một hỗn hợp hình dạng, được tạo thành từ nhiều đối tượng Geometry khác. Sử dụng FillRule cho GeometryGroup là rất hợp lý bởi sự kết hợp các hình dạng cĩ thể cĩ khả năng kết hợp các đoạn nơi mà sự áp dụng của quy luật fill cĩ tác dụng. 4 Brushes Bạn cĩ thể tơ màu các đối tượng trong Silverlight với màu đơn, dải nghiêng, bán kính nghiêng và ảnh. Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 4.1 Solid Color Một trong những thao tác chung trong bất cứ nền tảng nào là tơ màu một khu vực với một màu đơn sắc. Để thực hiện việc này, Silverlight cung cấp lớp SolidColorBrush. Dưới đây chúng tơi sẽ chỉ ra những cách khác nhau để tơ màu với SolidColorBrush. Để tơ màu một khu vực với màu đơn trong XAML, sử dụng theo những tùy chọn sau: o SolidColorBrush được định nghĩa trước theo tên. Ví dụ dưới đây dùng SolidColorBrush để xét thuộc tính Fill của hình chữ nhật(Rectangle). o Chọn từ bảng màu 32-bit với định dạng #rrggbb với rr, gg, bb lần lượt là 2 số mã 16 cho các màu đỏ, xanh lá, xanh lơ. Mở rộng thêm bạn cĩ thể xét với định dạng như sau: #aarrggbb với r, g, b ý nghĩa như trên và aa ở đây chỉ giá trị alpha hoặc là độ trong suốt. o Sử dụng thuộc tính kiểu phần tử để mơ tả SolidColorBrush( ở đây là thuộc tính Fill) 4.2 Gradient Gradient brush vẽ một khu vực với nhiều màu sắc pha trộn vào nhau dọc theo một trục. Bạn cĩ thể sử dụng chúng để tạo ra hiệu ứng ánh sáng và bĩng, mang lại cho thành phần đồ họa của bạn cảm giác 3 chiều. Bạn cũng cĩ thể sử dụng chúng để mơ phỏng kính, chrome, nước, và các bề mặt mịn. Silverlight cung cấp 2 loại gradient brush là : LinearGradientBrush và RadialGradientBrush. a. Linear Gradients LinearGradientBrush dùng để vẽ một khu vực với một dải nghiêng. Bạn chỉ ra màu sắc cho dải nghiêng và vị trí dọc theo trục nghiêng thơng qua việc sử dụng đối tượng GradientStop. Bạn cũng cĩ thể chỉnh sửa trục nghiêng, nĩ cho phép bạn tạo dải nghiêng theo chiều dọc hoặc ngang và đảo hướng của Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT dài nghiêng. Ví dụ dưới đây sử dụng dải nghiêng với 4 màu và sử sụng nĩ để vẽ lên hình chữ nhật. b. Radial Gradients Giống như LinearGradientBrush, một RadialGradientBrush vẽ một khu vực với màu sắc mà pha trộn với nhau dọc theo một trục. Cách vẽ của RadialGradientBrush dựa theo một trục được xác định bởi đường trịn; màu sắc của nĩ tia ra ngồi từ phía gốc của nĩ. Ví dụ dưới đây vẽ một hình chữ nhật sử dụng RadialGradientBrush để tơ màu bên trong. <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT Dưới đây là một vài tùy chọn khác nhau giúp bạn tạo một số kiểu hiệu ứng khác nhau với RadialGradientBrush: 4.3 Images Lớp ImageBrush cho phép bạn sử dụng ảnh để fill, để xét làm bacrkground, và viền ngồi. ImageBrush sử dụng được với những định dạng ảnh JPEG hoặc PNG và được dùng thơng qua thuộc tính ImageSource. Bạn cĩ thể cung cấp thơng tin ImageSource với đường dẫn của ảnh để tải chúng. Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT Mặc định ImageBrush sẽ giãn ảnh ra hết tồn bộ khu vực được vẽ, cĩ thẻ ảnh sẽ bị làm méo nếu khu vực được vẽ cĩ tỉ lệ bề mặt khác với ảnh. Bạn cĩ thể thay đổi trạng thái này bằng việc thay đổi thuộc tính Stretch mặc định của nĩ tới một trong những giá trị sau: None, Uniform, UniformToFill. Ví dụ dưới đây sử dụng ImageBrush để vẽ nền của một Canvas 4.4 Video VideoBrush cho phép bạn vẽ một khu vực bằng video. Ví dụ dưới đây sử dụng VideoBrush để vẽ màu chữ(Foreground) của TextBlock <MediaElement x:Name="butterflyMediaElement" Source="Butterfly.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False" /> <TextBlock Canvas.Left="5" Canvas.Top="30" FontFamily="Verdana" FontSize="120" FontWeight="Bold" TextWrapping="Wrap" Text="Video"> Infoway Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT 4.5 Deep Zoom Deep Zoom cung cấp khả năng phĩng to thu nhỏ một cách tùy ý những ảnh lớn trong Siliverlight một cách hiệu quả nhất. Ảnh cĩ thể hiển thị ở mức rất nhỏ và rất lớn mà khơng ảnh hưởng tới hiệu quả hoạt động của ứng dụng đang hiển thị ảnh. Chỉ cĩ thuộc tính làm ảnh hưởng tới hiệu quả hoạt động đĩ là độ phân giải của màn hình. Để biết thêm chi tiết mời các bạn tham khảo địa chỉ sau: us/library/cc645050(VS.95).aspx Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION CHƯƠNG VI: MEDIA VÀ ANIMATION 1 Animation Animation là một ảo giác được tạo ra bằng cách thay đổi một loạt các hình ảnh. Não nhận các hình ảnh như là một thay đổi cảnh. Trong phim ảo giác này được tạo bằng cách sử dụng các camera cĩ ghi lại rất nhiều hình ảnh, khi hình ảnh được phát trở lại bằng một máy chiếu, các khán giả thấy một hình ảnh chuyển động. Silverlight cĩ chứa rất nhiều các đối tượng cĩ thể thực hiện được việc tạo ra ảo giác chuyển động. 1.1 Storyboard Kiểm sốt các animation với một timeline và cung cấp các đối tượng và tài nguyên nhằm mục đích cung cấp thơng tin cho các animation con <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="20,200" To="400,100" RepeatBehavior="Forever" /> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="15" /> <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" /> <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /> <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" /> Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION <!-- Button that stops Animation. Stopping the animation returns the ellipse to its original location. --> <Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" /> private void Animation_Begin(object sender, RoutedEventArgs e) { myStoryboard.Begin(); } private void Animation_Pause(object sender, RoutedEventArgs e) { myStoryboard.Pause(); } private void Animation_Resume(object sender, RoutedEventArgs e) { myStoryboard.Resume(); } private void Animation_Stop(object sender, RoutedEventArgs e) { myStoryboard.Stop(); } 1.2 Key-Frame Animations Key-frame animations cho phép bạn tương tác vào animation nhiều hơn hai đối tượng và kiểm sốt một animation bằng phương pháp nội suy. Key-frame ko cĩ các thuộc tính như From / To / bởi Animation. Bạn tạo ra key-frame, các đối tượng animation được key-frame kiểm sốt, khi các hình ảnh động chạy nĩ sẽ chuyển giữa các frame mà bạn xác định tạo ra một chuỗi chuyển động liền mạch <!-- Animate the TranslateTransform's X property from 0 to 350, then 50, then 200 over 10 seconds. --> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform" Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION Storyboard.TargetProperty="X" Duration="0:0:10"> <!-- Using a LinearDoubleKeyFrame, the rectangle moves steadily from its starting position to 500 over the first 3 seconds. --> <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly appears at 400 after the fourth second of the animation. --> <!-- Using a SplineDoubleKeyFrame, the rectangle moves back to its starting point. The animation starts out slowly at first and then speeds up. This KeyFrame ends after the 6th second. --> <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6" /> <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="50" Height="50"> <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" /> // When the user clicks the Rectangle, the animation // begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); } ubleanimationusingkeyframes/ClientBin/TestPage.html 1.3 Double Animation Double Animation biến đổi giá trị giữa hai biến của đối tượng Animation bằng cách sử dụng nội suy tuyến tính trên một khoảng thời gian xác định <DoubleAnimation Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" /> <Rectangle Loaded="Start_Animation" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> private void Start_Animation(object sender, EventArgs e) { myStoryboard.Begin(); } ubleanimation/ClientBin/TestPage.html 1.4 Color Animation Color Animation biến đổi màu giữa hai biến của đối tượng Animation bằng cách sử dụng nội suy tuyến tính trên một khoảng thời gian xác định <StackPanel x:Name="myStackPanel" Background="Red" Loaded="Start_Animation"> <!-- Animate the background color of the canvas from red to green over 4 seconds. --> <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" From="Red" To="Green" Duration="0:0:4" /> private void Start_Animation(object sender, EventArgs e) { colorStoryboard.Begin(); } TestPage.html 1.5 Point Animation Point Animation biến đổi giá trị toạ độ của một điểm giữa hai biến của đối tượng Animation bằng cách sử dụng nội suy tuyến tính trên một khoảng thời gian xác định Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION <!-- Animate the center point of the ellipse from 100 X, 300 Y to 400 X, 100 Y over 5 seconds. --> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="100,300" To="400,100" RepeatBehavior="Forever" /> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" /> // Start the animation when the object loads private void Start_Animation(object sender, EventArgs e) { myStoryboard.Begin(); } /TestPage.html 2 Media Các tính năng đa phương tiện của Silverlight và mơ tả cách tích hợp audio và video vào trang Silverlight 2.1 MediaElement Object Để them media(video, audio) vào trang web của bạn ta sử dụng MediaElement . MediaElement sẽ cung cấp cho bạn một Form để hiển thị media , bạn chỉ cần cung cấp các Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION nguồn tài nguyên media cho URI, như là một file video chẳng hạn. Các MediaElement bắt đầu play khi trang web của bạn tải về. <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" /> erview_snip/js/media_simple.html 2.2 Controlling Media Playback Interactively Bạn cĩ thể tương tác điều khiển media bằng cách sử dụng Play, Pause, Stop, và các thuộc tính của một đối tượng MediaElement. Ví dụ như định nghĩa một đối tượng MediaElement với một số nút điều khiển cho các file (video, audio) phát. <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" /> <Button Click="StopMedia" Grid.Column="0" Grid.Row="1" Content="Stop" /> <Button Click="PauseMedia" Grid.Column="1" Grid.Row="1" Content="Pause" /> <Button Click="PlayMedia" Grid.Column="2" Grid.Row="1" Content="Play" /> private void StopMedia(object sender, RoutedEventArgs e) { media.Stop(); } private void PauseMedia(object sender, RoutedEventArgs e) { media.Pause(); } private void PlayMedia(object sender, RoutedEventArgs e) { media.Play(); Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION } vw_controlling_media/ClientBin/TestPage.html 2.3 Timeline Markers Một timeline marker là siêu dữ liệu liên kết với một điểm trong một tập tin media. các đánh dấu thường được tạo trước và được lưu trữ trong các tập tin media riêng. chúng thường được sử dụng để đặt tên khác nhau trong một cảnh quay video, cho phép người sử dụng tìm đến một vị trí hoặc cung cấp các phân cảnh. Khi MediaElement đạt đến một thời gian đánh dấu trong quá trình phát, nĩ sẽ tăng MarkerReached, sự kiện này cĩ thể sử dụng để kích hoạt hành động khác. Một MediaElement của đối tượng Marker đều cho phép bạn truy cập vào tiêu đề (nhúng, đánh dấu lưu trữ trong tập tin media). Một tập tin cĩ thể chứa cả hai bao gồm tiêu đề nhúng tập lệnh và tập lệnh riêng biệt <TextBlock FontSize="12" Foreground="DarkGray">Time: <TextBlock FontSize="12" Foreground="DarkGray">Type: <TextBlock FontSize="12" Foreground="DarkGray">Value: <MediaElement MarkerReached="OnMarkerReached" HorizontalAlignment="Left" Source="thebutterflyandthebear.wmv" Width="300" Height="200" /> private void OnMarkerReached(object sender, TimelineMarkerRoutedEventArgs e) { timeTextBlock.Text = e.Marker.Time.Seconds.ToString(); typeTextBlock.Text = e.Marker.Type.ToString(); valueTextBlock.Text = e.Marker.Text.ToString(); } Infoway Solutions CHƯƠNG VI: MEDIA VÀ ANIMATION 2.4 Server-Side Playlist Một server-side playlist là một dãy các tài nguyên media cho phép quản trị viên trên máy chủ kiểm sốt các tài nguyên media của người sử dụng. một danh sách media phía máy chủ được sử dụng để phục vụ việc phát media, nĩ cĩ thể ko khơng cho phép download từ client. Silverlight sử dụng tập tin wsx để cấu hình xác định một server-side playlist(SSPL) cĩ thể được phục vụ cho client thơng qua các đối tượng MediaElement. Một số lợi ích của việc sử dụng (SSPL) như sau - Giảm băng thơng do giảm số lần phía client kết nối tới server để lấy nội dung. - Bạn cĩ thể tuỳ chọn danh sách media khi mà bạn đang phát một danh sách media từ trước. - Bạn cĩ thể kiểm sốt, bổ sung media. Ví dụ bạn cĩ thể chơi chỉ một phần của một tập tin media. Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 1 Các cơng nghệ để truy cập dữ liệu trong Silverlight Trong các ứng dụng trên nền tảng Silverlight 2 cĩ cho phép truy cập dữ liệu theo nhiều cơng nghệ hay phương thức khác nhau. Cách đơn giản nhất để hiển thị và tương tác người dùng là Data Binding. Cách khác nữa để truy cập dữ liệu từ ứng dụng máy khách, như là một sự thay thế tối ưu của cookie, chúng ta cĩ thể sử dụng cơng nghệ Isolated Storage. Silverlight cũng cho phép đọc và ghi trên dữ liệu XML bằng cách sử dụng XmlReader hoặc LINQ to XML . Ngồi ra cách phổ biến trong các ứng dụng hiện nay thường làm đĩ là truy cập dữ liệu SQL Server thơng qua các cơng nghệ Web service, WCF và ADO.Net Data Service. Trong chương này chúng ta sẽ tìm hiểu một số cơng nghệ để truy cập dữ liệu sau: - Data Binding - Isolated Storage - Xử lý dữ liệu XML với LINQ to XML - Truy cập cơ sở dữ liệu SQL Server với Web Service(WCF) 2 Sử dụng Data Binding Data Binding cung cấp một cách đơn giảm cho ứng dụng nền tảng silverlight truy cập và tương tác tới dữ liệu. Thơng thường Data Binding quản lý dữ liệu theo luồng giữa người dùng và các đối tượng dữ liệu. Tức kà khi một binding được tạo và dữ liệu cĩ thay đổi, thì giao diện người dùng cũng được trình bày và thay đổi theo dữ liệu(tự động ánh xạ ). Tương tự khi người dùng thay đổi trên giao diện thì nĩ cũng cĩ thể làm thay đổi đối tượng dữ liệu. Ví dụ như khi người dùng thay đổi giá trị trên một TextBox, giá trị dữ liệu cũng tự động cập nhật theo thay đổi đĩ. o Sự liên kết giữa giao diện người dùng và dữ liệu - Binding Object: Như là một xúc tác ở giữaBindingTarget và Binding Source - Binding Source: Chứa các thuộc tính dữ liệu, cịn cĩ thể là đối tượng của CLR - Binding Target: Là các thuộc tính giao diệu người dùng để cĩ thể hiển thị hoặc thay đổi tới dữ liệu. Binding target cĩ thể là DependencyProperty của FramworkElement Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 2 - Value Converter: Thành phần tùy chọn để áp dụng cho những trường hợp dữ liệu cần phân tích hoặc chuyển đổi - Điều hướng của luồng dữ liệu: Quyết định tới việc tương tác dữ liệu qua lại giữa Binding Source và Binding Target (xem chi tiết mục dưới) Ví dụ dưới đây sẽ chỉ rõ cách trình bày thuộc tính màu của chữ (ForeGround Color) của một TextBox: Mã XAML: <TextBox x:Name="MyTextBox" Text="Text" Foreground="{Binding Brush1, Mode=OneWay}"/> Mã C# : //Tạo một lớp MyColors đã thực thi giao tiếp INotifyPropertyChanged. MyColors textcolor = new MyColors(); // Brush1 thiết lập một SolidColorBrush với giá trị màu Red. textcolor.Brush1 = new SolidColorBrush(Colors.Red); // Thiết lập DataContext của MyTextBox. MyTextBox.DataContext = textcolor; Khi sử dụng DataContext trong mã C# trên đây, nĩ cho phép các thẻ UI thừa kế thơng tin về dữ liệu nguồn. Ví dụ giống như trong ASP.NET bạn sử dụng phương thước gán DataSouce để hiển thị dữ liệu trên một Grid. o Các phương thức điều hướng của luồng dữ liệu Mỗi một kiểu binding data đều cĩ một phương thức điều hướng luồng dữ liệu(Mode propery). Cái này quyểt định khi nào và làm thế nào để dữ liệu chảy tràn. Cĩ 3 phương thức điều hướng luồng dữ liệu sau - OneTime: binding dữ liệu tới target (giao diện người dùng) một lần và sau đĩ kết thúc kết nối khơng binding nữa. Phương thức này phù hợp khi hiển thị dữ liệu mà ít khi hoặc khơng bao giờ cần thay đổi. - OneWay: Binding dữ liệu tới target và giữ nĩ đến khi Source (nguồn dữ liệu) thay đổi thì target cũng thay đổi theo. Phương thức này phù hợp khi trình bày dữ liệu mà người dùng khơng được phép thay đổi - TwoWay: Binding dữ liệu tới target và giữ nĩ đến khi source thay đổi thì target cũng thay đổi theo, nhưng khi target thay đổi thì source cũng thay đổi theo. Phương thức này phù hợp khi trình bày dữ liệu mà cho phép người dùng thay đổi dữ liệu nguồn o Change Notification Để cho hợp lệ với các thay đổi giá trị giữa Source object và Target objects thì chúng ta phải thực thi một interface là InotifyPropertyChanged. Trong InotifyPropertyChanged cĩ cung cấp một event PropertyChanged. Trong ví dụ dưới đây. Class MyColors thực thi giao tiếp InotifyPropertyChanged cho phương thức OneWay namespace DataBinding { //Tao mot class thua ke interface INotifyPropertyChanged public class MyColors : INotifyPropertyChanged { private SolidColorBrush _Brush1; Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 3 // Khai bao su kien PropertyChanged. public event PropertyChangedEventHandler PropertyChanged; //Tao thuoc tinh cua SolidColorBrush public SolidColorBrush Brush1 { get { return _Brush1; } set { _Brush1 = value; // Goi NotifyPropertyChanged khi thuoc tinh nguon duoc cap nhap NotifyPropertyChanged("Brush1"); } } public void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } } 3 Sử dụng Isolated Storage Silverlight dùng Isolated Storage như một hệ thống file ảo để lưu trữ dữ liệu trong một thư mục ẩn trên máy tính của bạn. Nĩ chia dữ liệu vào làm 2 phân riêng biệt: Phần thứ nhất chứa các thơng tin quản lý như dung lượng cho phép và phần thứ 2 chứa dữ liệu thực sự. Mỗi ứng dụng Silverlight được phân bố một vùng riêng trong hệ thống lưu trữ này với dung lượng lưu trữ mặc nhiên là 1 MB. o Ưu điểm: - Isolated Storage là một thay thế tuyệt vời cho cookie, đặc biệt là nếu bạn đang làm việc với một tập lớn dữ liệu. Một số ví dụ về khả năng của Isolated Storage bao gồm undo lại một số thao tác của ứng dụng, hay giỏ hàng, các cài đặt về cửa sổ hay bất kỳ cài đặt nào mà bạn muốn truy cập vào lần nạp tiếp theo. - Isolated Storage lưu trữ theo người dùng cho phép các ứng dụng lưu giữ các cài đặt cho từng người dùng riêng biệt. o Một số vấn đề cĩ thể xảy ra: - Người quản trị cĩ thể đặt giới hạn đĩa trên mỗi người dùng và assembly, khơng cĩ bất kỳ cảnh báo nào về khơng gian trống cịn lại. Vì lý do này, bạn nên kiểm tra và bắt các ngoại lệ trong ứng dụng của bạn. - Dù rằng Isolated Storage được đặt trong một thư mục ẩn trong hệ thống, nhưng khơng cĩ nghĩa người dùng khơng thể tìm ra thư mục này, do vậy Isolated Storage khơng hồn tồn an tồn và người dùng cĩ thể thay đổi hoặc xĩa các file. Tuy nhiên, nếu muốn người dùng khơng thể thay đổi các file, bạn cĩ thể dùng các lớp mã hĩa để mã lại các file này trước khi lưu. - Các máy tính cĩ thể bị khĩa bởi các chính sách bảo mật và các ứng dụng sẽ khơng thể lưu được vào IsolatedStorage. Cụ thể hơn, bạn cần cĩ IsolatedStorageFilePermission để cĩ thể làm việc được với IsolatedStorage Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 4 Giờ hãy xem qua ví dụ về việc lưu và đọc dữ liệu từ IsolatedStorage. Nhớ rằng bạn cần dùng using để tham chiếu đến namespace System.IO.IsolatedStorage cũng như là System.IO. Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 5 using System.Windows.Controls; using System.IO.IsolatedStorage; using System.IO; using System; namespace Samples_Chap7 { public partial class Page : UserControl { public Page() { InitializeComponent(); //Luu du lieu vao file dulieu.txt SaveData("Day la du lieu cua toi", "dulieu.txt"); //Lay du lieu tu file dulieu.txt string test = LoadData("dulieu.txt"); } private void SaveData(string data, string fileName) { //Lay Isolated Storage cua nguoi dung danh cho ung dung using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Create, isf)) { using (StreamWriter sw = new StreamWriter(isfs)) { //Luu du lieu sw.Write(data); sw.Close(); } } } } private string LoadData(string fileName) { string data = String.Empty; //Lay Isolated Storage cua nguoi dung danh cho ung dung using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication()) { using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Open, isf)) { using (StreamReader sr = new StreamReader(isfs)) { string lineOfData = String.Empty; while ((lineOfData = sr.ReadLine()) != null) //Doc du lieu data += lineOfData; } } } return data; } } } Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 6 4 Khái quát về làm việc với dữ liệu XML, LINQ to XML Trong Silverlight bạn cĩ thể phân tích dữ liệu XML bằng một trong hai cách là LINQ to XML hoặc XmlReader Đối với những tài liệu XML lớn địi hỏi việc tải dữ liệu về tốn nhiều bộ nhớ trong làm giảm hiệu suất chương trình. Trong trường hợp này chúng ta nên sử dụng XmlReader với những đặc tính như đọc dữ liệu nhanh, forward-only, non-caching parser. Ngược lại với những tài liệu XML nhỏ hơn bạn nên sử dụng LINQ to XML, nĩ cung cấp những tính năng và tiện ích hữu dụng hơn XmlReader Trong phần này chúng tơi sẽ hướng dẫn các bạn về cách xử lý dữ liệu xml với LINQ to XML( Silverlight). o Khái quát về LINQ to XML LINQ to XML cũng giống như Document Object Model(DOM) trong đĩ nĩ đem tài liệu XML này vào trong bộ nhớ. Bạn cĩ thể truy vấn và thay đổi tài liệu này, sau khi thay đổi nĩ bạn cĩ thể lưu nĩ và một file hoặc chuyển đổi hĩa nĩ (Serialize) rồi gửi nĩ thơng qua mạng Internet. Tuy nhiên LINQ to XML khác biệt so với DOM ở chỗ: Nĩ cung cấp một đối tượng mới nhẹ nhàng hơn và dễ dàng làm việc với chúng hơn, ngồi ra LINQ to XML cịn là sự cải tiến của ngơn ngữ Visual C# 2008. Một lợi thế quan trọng nhất của LINQ to XML là nĩ tích hợp với Language-Integrated Query (LINQ). Với sự tích hợp này nĩ cho phép bạn viết câu truy vấn tài liệu XML khi ở trong bộ nhớ để trả về tập hợp các Element và attribute. LINQ to XML cĩ thể so sánh được với các chức năng của XPath và Xquery. o Tạo một XAML động với LINQ to XML Trong mục này chúng ta sẽ chỉ rõ các tạo một control TextBlock bằng LINQ to XML. Trước tiên để tùy chỉnh project silverlight trong Visual Studio chúng ta chạy ví dụ dưới đây 1. Trong Solution Explorer, thêm assembly reference tới System.Xml.Linq.dll 2. Thay đổi nội dung file page.xaml của bạn theo mã dưới đây <UserControl x:Class="SilverlightApplication1.Page" xmlns="" xmlns:x="" Width="400" Height="300"> 3. Trong file page.xaml.cs thêm các khai báo using sau đây using System.Windows.Markup; using System.Xml.Resolvers; using System.Xml; using System.Xml.Linq; using System.IO; using System.Text; Dưới đây là ví dụ chi tiết về tạo một đối tượng XElement và lưu nĩ với thơng tin liên hệ. // Tao XElement de luu thong tin lien he ban be XElement contacts = new XElement("Contacts", new XElement("Contact1", new XElement("Ten", "Pham Chi Cuong"), new XElement("DienThoai", "0906 123 480"), new XElement("DiaChi", new XElement("DuongPho", "Nguyen Hong"), Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 7 new XElement("ThanhPho", "HaNoi") ) ), new XElement("Contact2", new XElement("Ten", "Tran Duy Bien"), new XElement("DienThoai", "0904 252 161"), new XElement("DiaChi", new XElement("DuongPho", "Pham Van Dong"), new XElement("ThanhPho", "HaNoi") ) ) ); // Tao TextBlock1 // Luu y rang Element nay phai khai bao 2 XAML namespace XElement textBlock1 = XElement.Parse( @"<TextBlock xmlns=' xmlns:x=' TextWrapping= 'Wrap' Width = '400' Canvas.Top = '10' Text=''/>"); // Lay child Element cua contact1 XElement contact1 = contacts.Element("Contact1"); // Gan gia tri vao thuoc tinh Text o cuoi cung voi noi dung cua cac contact trong xml textBlock1.LastAttribute.SetValue(contact1.ToString()); // Lay child element thu hai XElement contact2 = contacts.Element("Contact2"); // Tao TextBlock2 // Luu y rang Element nay phai khai bao 2 XAML namespace XNamespace xmlns = ""; XElement textBlock2 = new XElement(xmlns + "TextBlock", new XAttribute(XNamespace.Xmlns + "x", ""), new XAttribute("Canvas.Top", 250), new XAttribute("Width", "600"), new XAttribute("Text", contact2.ToString()) ); // Them TextBlock1 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock1.ToString()) as UIElement); // Them TextBlock2 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock2.ToString()) as UIElement); o Cách load file XML từ một URI bất kỳ 1. Tạo một đối tượng WebClient, thêm trình xử lý (handler), Gọi phương thức OpenReadAsync. Làm theo mã lệnh dưới đây WebClient wc = new WebClient(); wc.OpenReadCompleted += wc_OpenReadCompleted; wc.OpenReadAsync(new Uri(uriString)); 2. Thực thi hàm callback wc_OpenReadCompleted Infoway Solutions CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 8 private void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) { //Kiem tra thuoc tinh Error cho cac loi if (e.Error != null) { OutputTextBlock.Text = e.Error.Message; return; } //Neu khong co loi, Lay du lieu stream ve va phan tich chung toi XDocument thong qua phuong thuc Load using (Stream s = e.Result) { XDocument doc = XDocument.Load(s); OutputTextBlock.Text = doc.ToString(SaveOptions.OmitDuplicateNamespaces); } } 5 Truy cập dữ liệu SQL Server với WCF Trong phần này chúng ta sẽ xây dựng một ứng dụng nhỏ để kết nối với CSDL SQL Server. Để hồn thiện được ứng dụng này chúng ta cần tập hợp được những kỹ năng sau - Kết nối tới một WCF Web Service - Sử dụng LINQ để truy vấn và trả về dữ liệu