GIÁO TRÌNH GIẢNG DẠY SILVERLIGHT 2

Transcription

1 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: Contact@infoway.com.vn

2 MỤC LỤC 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 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 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 2

3 MỤC LỤC Chương III: Sử dụng Silverlight trên Expression Blend và Visual Studio Giới thiệu về các công cụ phát triển Expression Blend 2 kết hợp với VS 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 Tạo một Project cho ứng dụng Silverlight 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 VS 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 3

4 MỤC LỤC 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 4

5 MỤC LỤC 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 Tránh sử dụng thuộc tính Width và Height đối với đối tượng Path Nguy cơ đổ vỡ khi CPU sử ly cường độ lớn công việc Nguy cơ đổ vỡ đối với ứng dụng có những Package lớn Sử dụng Double.ToString(CultureInfo.InvariantCulture) hiệu quả hơn Double.ToString() 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 Hủy bỏ hoạt động của background gọi bởi thủ tục CancelAsync. 5

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

7 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT Với việc sử dụng Expression Studio và Visual Studio, các nhà thiết kế và phát triển có thể hợp tác một cách hiệu quả hơn bằng cách sử dụng chính kỹ năng của họ có hiện nay để làm phát triển các sản phẩm web tương lai Light up the web. 3 Các đặc tính của Silverlight Silverlight kết hợp nhiều công nghệ vào một nền tảng phát triển, nó cho phép bạn được lựa chọn nhiều công cụ và ngôn ngữ lập trình thích hợp để giải quyết bài toán của bạn. Silverlight cung cấp các tính năng sau: 3.1 Sự kết hợp của WPF và XAML. Silverlight là một gói nhỏ của công nghệ Windows Presentation Foundation (WPF). Nó được mở rộng nhiều hơn các Element trong trình duyệt để tạo giao diện người dùng. PWF cho phép bạn tạo ra đồ họa 3 chiều, hình ảnh động, đa phương tiện và nhiều tính năng phong phú khác trên máy khách. XAML (Extensible Application Markup Language) cung cấp các cú pháp đánh dấu đặc trưng cho việc tạo các Element. 3.2 Mở rộng cho ngôn ngữ kịch bản Silverlight cung cấp việc mở rộng cho các ngôn ngữ kịch bản (Javascript) ở một số các trình duyệt phổ biến để thể hiện việc trình bày giao diện và thao tác người dùng một cách phong phú hơn. 3.3 Sự tích hợp với các ứng dụng đã có Silverlight tích hợp liền mạch với ngôn ngữ javascript và mã Ajax của ASP.Net để bổ sung các chức năng bạn đã xây dựng được. Bạn có thể tạo những tài nguyên trên nền máy chủ có trong ASP.NET và sử dụng các khả năng của Ajax trong ASP.NET để tương tác với tài nguyên trên nền máy chủ đó mà không làm gián đoạn người dùng. 3.4 Sử dụng mô hình ngôn ngữ lập trình trên nền tảng.net Framework và các công cụ để kết hợp. Bạn có thể tạo các ứng dụng trên nền tảng Silverlight và sử dụng các ngôn ngữ động như InronPython cũng như là các ngôn ngữ C# và Visual Basic. Bạn cũng có thể sử dụng các công cụ phát triển như Visual Studio để tạo ứng dụng trên nền tảng Silverlight 3.5 Hỗ trợ mạng Silverlight bao gồm các hỗ trợ cho HTTP qua TCP. Bạn có thể kết nối tới các dịch vụ của WCF, SOAP, hoặc ASP.NET AJAX và nhận về các định dạng theo cấu trúc XML, JSON hay dữ liệu RSS. 3.6 Hỗ trợ ngôn ngữ tích hợp truy vấn (LINQ) Điều này cho phép bạn truy cập dữ liệu bằng cách sử dụng cú pháp trực quan tự nhiên và mạnh mẽ, được gõ bởi các đối tượng có trong các ngôn ngữ.net Framework. 2

8 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 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 Nền tảng trình bày cơ sở.net Framework cho silverlight Cài đặt và cập nhật Diển tả 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 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 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ẽ 3

9 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT Trình bày giao diện người dùng (UI Rendering) Thiết bị nghe nhìn (Media) Controls Xếp đặt Layout Trình bày dữ liệu (Data Binding) DRM XAML hoặc các thiết bị đầu vào khác Trình bày vector và các đồ hoạ ảnh bitmap, ảnh động, và văn bản 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 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 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 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 Khả năng Quản lý phân quyền số Cung cấp trình phân tách cho XAML Các lập trình viên có thể tương tác với thành phần nền tảng trình bày cơ sở trên đây bằng cách sử dụng XAML để đặc tả. XAML là một yếu tố quan trọng nhất trong việc tương tác giữa.net Framwork và các kiểu trình bày Layout, ngoài ra các lập trình viên cũng có thể sử dụng cơ chế quản lý code bên trong để thao tác với lớp trình bày.net Frame work for Silverlight: Tính năng Data Base class library Window Communication Foundation (WCF) Common language runtime (CLR) Windows Presentation Foundation controls (WPF) Dynamic language runtime (DLR) Mô tả 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 Thuộc thư viện của.net Framework, nó cung cấp các chức năng lập trình chủ yếu như việc xử lý chuỗi, biểu thức chính quy, đầu vào và đầu ra, ánh xạ, tập hợp và toàn cục hóa. 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 Cung cấp việc quản lý bộ nhớ, dọn dẹp bộ nhớ thừa, xử lý ngoại lệ Cung cấp các control giầu tính năng như Button, Calendar, CheckBox, DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton, and ScrollViewer. 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 4

10 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 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 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 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 (PowerPC) Mac OS (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 5

11 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT 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 Các bước cài đặt công cụ silverlight 2 - Tải file Silverlight_Tools.exe có trên trang: - 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. 6

12 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT - 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à hoàn thành 7 Các ví dụ thực hành 7.1 Chương trình đầu tiên Hello World - Tạo mới một Project: chọn File -> New -> Proeject - Một cửa sổ mới New Project hiển ra. Chọn Visual C# (hoặc Visual basic) trong Project types, chọn Silverlight. Phía bên phải cửa sổ cho phép bạn chọn các Templale 7

13 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT - 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) 8

14 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT Toàn bộ màn hình ứng dụng đầu tiên của bạn được nhìn thấy như sau - Chúng ta làm 2 phương pháp một là viết code C# trong code ứng dụng, hai là viết trực tiếp trong XAML 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 9

15 CHƯƠNG I: TỔNG QUAN VỀ SILVERLIGHT Viết chương trình bằng XAML Lưu ý, với cùng project trên, muốn viết đặc tả bằng XAML tương đương ta cần xóa bỏ phần mã trình C# cũ đi, vì C# và XAML không thể cùng sinh một đối tượng. Trong file Page.xaml ta thêm đoạn mã sau <UserControl x:class="helloworld.page" xmlns=" xmlns:x=" Width="400" Height="300"> <Grid x:name="layoutroot" Background="White"> <Button Name="myButton" Content="Click me" Width="100"Height="25"></Button> </Grid> </UserControl> - Gán sự kiện xử lý khi click - Bấm F5 để chạy ứng dụng. Cả hai phương thức viết trên đều cho ra một kết quả như hình vẽ sau 8 Tài liệu tham khảo - Silverlight Deverloper center: - Website chính của Silverlight: 10

16 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: 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 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: Sử dụng cú pháp theo thuộc tính Dưới đây là ví dụ xét giá trị cho các thuộc tính: Width, Height, Fill của đối tượng Rectangle: <Rectangle Width="100" Height="100" Fill="Blue" /> Sử dụng cú pháp theo đặc tính của thành phần(element): Dưới đây là ví dụ xét đặc tính Fill theo cách này cho đối tượng Rectangle: <Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Blue"/> </Rectangle.Fill> </Rectangle>

17 CHƯƠNG II: XAML 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): <TextBlock> Hello! </TextBlock> Sử dụng theo một tập hợp Đây là một trường hợp khá thú vị trong XAML, bởi có những cách khác nhau để thể hiện tập hợp này. Hơn nữa nó có thể xuất hiện ở phần đầu tiên của XAML cho phép bạn xét những đặc tính chỉ đọc (read-only) của đối tượng. Dưới đây là ví dụ xét đặc tính theo những cách khác nhau sử dụng theo kiểu tập hợp. Cách 1: <LinearGradientBrush> <LinearGradientBrush.GradientStops> <!-- Ở ñây thẻ GradientStopCollection ñược chỉ rõ. --> <GradientStopCollection> <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> Cách 2: <LinearGradientBrush> <LinearGradientBrush.GradientStops> <! Không cần khai báo GradientStopCollection, bộ phân tích sẽ hiểu và tạo ra nó - -> <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> Cách 3: Ngoài ra, có những đặc tính mà chúng có những tập hợp đặc tính nhưng chúng được xác định như là đặc tính nội dung của lớp. Trong trường hợp này ta xét đến đặc tính GradientStops được xử dụng ở trên. Bạn có thể loại bỏ đặc tính này và sẽ có kết quả như sau: <LinearGradientBrush> <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush> 1.4 Root elements và namespace trong XAML Một file XAML chỉ được có duy nhật một Root element và phải thỏa mãn cả hai tiêu chí sau: wellformed XML(có mở và đóng thẻ) và valid XML(tuân thủ theo Document Type Definition(DTD)). Ví dụ dưới đây cho Root element điển hình của XAML cho Silverlight với Root element là thành phần UserControl. <UserControl x:class="mysilverlight.page" xmlns=" xmlns:x=" > <Grid> </Grid> </UserControl> 2

18 CHƯƠNG II: XAML 1.5 Sự kiện XAML là một ngôn ngữ khai báo cho đối tượng và những đặc tính của chúng, nhưng nó cũng bao gồm những cú pháp cho sự kết hợp sự kiện cho đối tượng trong những thẻ đánh dấu. Bạn chỉ rõ tên của sự kiện như là một thuộc tính tên trên đối tượng mà sự kiện được nghe. Về giá trị của thuộc tính, bạn chỉ rõ tên của hàm nghe sự kiện mà bạn định nghĩa ở phần code-behind hoặc ở phần javascript. Việc có khai bao hay không đặc tính x:class ở thẻ root trong XAML có ảnh hưởng đến việc xử lý sự kiện. Nếu bạn khai báo x:class tức là việc xử lý sự kiện của bạn sẽ được thực hiện trong code-behind, trường hợp này thường xuất hiện trong kiểu lập trình Managed API (chứa trong silverlight 2.0). Còn ngược lại thì việc xử lý sự kiện của bạn được thực hiện ngay trong thẻ Javascript chứa trong HTML, trường hợp này thường xuất hiện trong kiểu lập trình JavaScript API (chứa trong Silverlight 1.0). - Ví dụ dưới đấy chỉ rõ cho bạn thấy cách tạo một sự kiện trong trường hợp kiểu lập trình Manged API <UserControl x:class="chapter2.page" xmlns=" xmlns:x=" Width="400" Height="300"> <Grid x:name="layoutroot" Background="White"> <Button Click="Button_Click" Content="Click me"></button> </Grid> </UserControl> Doạn mã trên, trong thẻ root <UserControl> chúng ta đã khai báo đặc tính x:class=" Chapter2.Page", điều này có nghĩa trong chương trình của chúng ta có một file chứa class Chapter2.Page. Class này sẽ đảm nhiệm việc xử lý các sự kiện đã khai báo ở file XAML (Page.xaml). Trong thẻ <Grid> chúng ta tạo thêm một nút <Button> và khai báo trong nút đó một sự kiện Click="Button_Click".Sự kiện này sẽ được xử lý ở trong code-behind như sau namespace Chapter2 public partial class Page : UserControl public Page() InitializeComponent(); private void Button_Click(object sender, RoutedEventArgs e) //Xu ly su kien Button click o day MessageBox.Show("Xin chao!"); - Còn ví dụ dưới đây sẽ chỉ rõ cho bạn thấy cách tạo một sự kiện trong trường hợp kiểu lập trình JavaScript API <UserControl xmlns=" xmlns:x=" Width="400" Height="300"> <Grid x:name="layoutroot" Background="White"> <Button x:name="button1" Click="Button_Click" Content="Button 1"></Button> </Grid> </UserControl> 3

19 CHƯƠNG II: XAML Doạn mã trên, trong thẻ root <UserControl> chúng ta không khai báo đặc tính x:class. Việc xử lý sự kiện sẽ được thực hiện ngay trong trang HTML có chứa chương trình silverlight này. <script type="text/javascript"> function Button_Click() alert("xin chao!"); </script> 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(runtime) 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 4

20 CHƯƠNG II: XAML 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. Ngoài ra để đối tượng của bạn như là một thành phần đối tượng của XAML, bạn có thể cho phép sử dụng những property cho các public property của Custom class của bạn điều này làm cho Custom class của bạn như là một kiểu property. Điều này bởi vì bây giờ đối tượng có thể được khởi tạo giống như một thành phần đối tượng và có thể xét thuộc tính cho nó như là một property 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. 5

21 CHƯƠNG II: XAML 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 <Canvas Width="640" Height="480" Background="White"> <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="red" Width="200" Height="200" /> </Canvas> 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 6

22 CHƯƠNG II: XAML <StackPanel Margin="20"> <Rectangle Fill="Red" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Green" Width="50" Height="50" Margin="5" /> <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" /> </StackPanel> 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"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="2*" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="10" FontWeight="Bold" Text="Contoso Corporation" HorizontalAlignment="Center" VerticalAlignment="Center" /> <Grid x:name="formlayoutgrid" Grid.Row="1" Grid.Column="0" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> <TextBox Grid.Row="0" Grid.Column="1" Margin="10" /> 7

23 CHƯƠNG II: XAML <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> <TextBox Grid.Row="1" Grid.Column="1" Margin="10" /> <TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" /> <TextBox Grid.Row="2" Grid.Column="1" Margin="10" /> </Grid> </Grid> 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; 8

24 CHƯƠNG II: XAML 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); 9

25 CHƯƠNG II: XAML 10

26 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 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 ngoài - Tính năng thiết kế theo Real-time và markup views

27 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 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 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. 2

28 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 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. 3

29 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 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. 4

30 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 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 toàn thế giới. Chương trình ứng dụng này có sự dụng kết hợp visual studio 2008 và Expression Blend Chúng ta sẽ xây dựng chương trình với kết quả là giao diện mô tả dưới đây Trước tiên hãy xem qua cấu trúc ứng dụng trong Visual Studio 2008 sau khi đã tạo mới một Project Silverlight. 5

31 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 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. 6

32 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 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 7

33 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 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 <Canvas x:name="layoutroot" Width="264" Height="194" Background="StaticResource bluebase"> <Canvas Canvas.Top="13" Canvas.Left="13" Width="230" Height="160"> <StackPanel x:name="conditionsscreen" > <Canvas Height="90"> <Image x:name="conditionsoverlay" Margin="-13,-13,0,0" Source="StaticResource SunBig"/> <StackPanel> <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..." /> </StackPanel> </Canvas> <StackPanel Orientation="Horizontal" Height="53"> <Canvas Width="71" Background="StaticResource dividervertical" Margin="5, 0, 0, 0"> <TextBlock FontSize="11" x:name="tomorrowname" Foreground="White" Opacity="0.5" /> <Image x:name="tomorrowimage" Canvas.Top="17" Canvas.Left="23" /> 8

34 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 Opacity="0.5" /> <TextBlock Canvas.Top="20" x:name="tomorrowhi" Foreground="White" /> <TextBlock Canvas.Top="35" x:name="tomorrowlo" Foreground="White" </Canvas> <Canvas Width="71" Background="StaticResource dividervertical" Margin="5, 0, 0, 0"> <TextBlock FontSize="11" x:name="dayaftername" Foreground="White" Opacity="0.5" /> <Image x:name="dayafterimage" Canvas.Top="17" Canvas.Left="23" /> <TextBlock Canvas.Top="20" x:name="dayafterhi" Foreground="White" /> <TextBlock Canvas.Top="35" x:name="dayafterlo" Foreground="White" Opacity="0.5" /> </Canvas> <Canvas Width="71" Margin="5, 0, 0, 0"> <TextBlock FontSize="11" x:name="twodaysawayname" Foreground="White" Opacity="0.5" /> <Image x:name="twodaysawayimage" Canvas.Top="17" Canvas.Left="23" /> <TextBlock Canvas.Top="20" x:name="twodaysawayhi" Foreground="White" /> <TextBlock Canvas.Top="35" x:name="twodaysawaylo" Foreground="White" Opacity="0.5" /> </Canvas> </StackPanel> <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" /> </StackPanel> </StackPanel> <Image IsHitTestVisible="False" Source="StaticResource blackhighlight" /> </Canvas> </Canvas> Để 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. 9

35 CHƯƠNG III: SỬ DỤNG SILVERLIGHT TRÊN EXPRESSION BLEND VÀ VISUAL STUDIO 2008 Trên trang HTML : <object data="data:application/x-silverlight-2," type="application/xsilverlight-2" width="100%" height="100%"> <param name="source" value="clientbin/weatherwidget.xap"/> <param name="onerror" value="onsilverlighterror" /> <param name="background" value="white" /> <param name="minruntimeversion" value=" " /> <param name="autoupgrade" value="true" /> <a href=" style="text-decoration: none;"> <img src=" alt="get Microsoft Silverlight" style="border-style: none"/> </a> </object> Trên trang ASPX : <asp:silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ WeatherWidget.xap" MinimumVersion=" " 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 : 10

36 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 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ụ

37 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT <Border Background="Coral" Width="300" Padding="10" CornerRadius="20"> <TextBlock FontSize="16">Text Surrounded by a Border</TextBlock> </Border> 1.2 Button o Mô tả Button kiểm soá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ụ <Grid x:name="layoutroot" Background="White"> <Button Name="Button" Content="Click Me!" Background="Blue" Margin="20,60,200,200" MouseLeftButtonDown="Button_MouseLeftButtonDown"/> </Grid> 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ụ <Grid x:name="layoutroot" Background="White"> <basics:calendar Height="300" Width="300"IsTodayHighlighted="True" > </basics:calendar> </Grid> 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"></CheckBox> 2

38 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT <CheckBox Name="CheckBox2" ClickMode="Release" IsThreeState="True" Content="CheckBox three states" Margin="10,100,0,0"></CheckBox> 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ụ <Grid x:name="layoutroot" Background="White"> <ComboBox Name="ComboBox1" BorderThickness="2" IsDropDownOpen="True" SelectedIndex="0" Width="200" Height="30"> <ComboBoxItem x:name="comboboxitem1" Content="Item1"></ComboBoxItem> <ComboBoxItem x:name="comboboxitem2" Content="Item2"></ComboBoxItem> <ComboBoxItem x:name="comboboxitem3" Content="Item3"></ComboBoxItem> </ComboBox> </Grid> 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 <StackPanel Name="root" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center"> <! Tạo một button với nội dung gán từ Content.--> <Button Margin="10" Content="This is string content of a Button"/> <! Tạo một button với một UIElement gán từ content.--> <Button Margin="10"> <Rectangle Height="40" Width="40" Fill="Blue"/> </Button> <! Tạo một button với một panel chứa nhiều đối tượng gán từ content.--> <CheckBox Margin="10"> 3

39 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT <StackPanel Margin="3,0,0,0" Orientation="Horizontal"> <Ellipse Height="10" Width="10" Fill="Blue"/> <TextBlock TextAlignment="Center" Text="A string of text"></textblock> </StackPanel> </CheckBox> </StackPanel> \ 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 soát lịch thả xuống. o Ví dụ <!-- A basic Calendar. --> <swc:calendar x:name="cal" Canvas.Left="20" Canvas.Top="100" /> <!-- A Calendar does not highlight today's date. --> <swc:calendar x:name="cal2" Canvas.Left="270" Canvas.Top="100" IsTodayHighlighted="false" /> <!-- Two DatePicker controls, one using the default Short date format --> <!-- and the other using the Long date format. --> <swc:datepicker x:name="dp1" Canvas.Left="20" Canvas.Top="390" /> <swc:datepicker x:name="dp2" Canvas.Left="20" Canvas.Top="480" SelectedDateFormat="Long"/> <!-- A Calendar to demonstrate multiple selection. --> <swc:calendar x:name="cal3" Canvas.Left="20" Canvas.Top="540" /> 4

40 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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ụ <Grid ShowGridLines="True" Canvas.Top="60" Canvas.Left="20" Width="400" Height="400"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Text="One!" Grid.Row="0" Grid.Column="0" /> <TextBlock Text="Two!" Grid.Row="1" Grid.Column="1" /> <TextBlock Text="Three!" Grid.Row="2" Grid.Column="2" /> <TextBlock Text="Four!" Grid.Row="3" Grid.Column="3" /> <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" /> </Grid> 5

41 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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. 6

42 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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: <Image Source="myPicture.png" /> 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: <Canvas> <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" /> <Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" /> <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" /> </Canvas> 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; 7

43 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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" /> <TextBlock Text="ListBox with unbound data:" /> <ListBox Width="350" Margin="0,5,0,10"> <TextBlock Text="TextBlock" /> <TextBox Text="TextBox" /> <Button Content="Button" /> <Rectangle Fill="LightBlue" Height="20" Width="150" Margin="2,2,2,2"/> <Ellipse Fill="Coral" Height="20" Width="150" Margin="2,2,2,2"/> </ListBox> 1.13 MediaElement o Mô tả Các MediaElement kiểm soát nội dung Audio hoặc Video. 8

44 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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: <TextBlock Margin="20,10,0,0" Text="PasswordBox Demonstration" FontWeight="bold"/> <TextBlock Text="Type password here" Margin="20,10,0,0"/> <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(); 9

45 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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ụ <StackPanel x:name="layoutroot" Background="White"> 10

46 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT <Border BorderThickness="5" BorderBrush="Black"> <StackPanel Background="LightGray"> <TextBlock HorizontalAlignment="Center" Margin="10" Text="Value-Based Progress Bar" /> <ProgressBar x:name="pg1" Value="100" Margin="10" Maximum="200" Height="15" IsIndeterminate="False" /> </StackPanel> </Border> <Border BorderThickness="5" BorderBrush="Black"> <StackPanel Background="LightGray"> <TextBlock HorizontalAlignment="Center" Margin="10" Text="Indeterminate Progress Bar" /> <ProgressBar x:name="pg2" Margin="10" Height="15" IsIndeterminate="True" /> </StackPanel> </Border> </StackPanel> 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: <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <TextBlock Text="RadioButton Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" Grid.Row="0" Grid.ColumnSpan="2"/> <TextBlock Text="First Group:" Grid.Row="1" /> <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"/> <TextBlock Text="Ungrouped:" Grid.Row="4" /> <RadioButton x:name="lowerbutton" Margin="5,0,0,0" Checked="HandleCheck" 11

47 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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 soá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; 12

48 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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 soát một mảng content, cung cấp hai ScrollBar để kiểm soá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,." /> </ScrollViewer> 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" /> 13

49 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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="clrnamespace:system.windows.controls;assembly=system.windows.controls" x:class="tabcontrolexample.page" xmlns=" xmlns:x=" FontFamily="Trebuchet MS" FontSize="11" Width="400" Height="300"> <Canvas x:name="layoutroot" Background="White"> <!-- Create a simple TabControl in XAML. --> <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" /> </Canvas> </UserControl> 14

50 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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. Ngoà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ụ <TextBlock>Hello, world!</textblock> 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. 15

51 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT o Ví dụ <!-- A TextBlock with an offset ToolTip. --> <TextBlock Text="TextBlock with an offset ToolTip." Canvas.Top="110" Canvas.Left="20" > <ToolTipService.ToolTip > <ToolTip Content="Offset ToolTip." HorizontalOffset="20" VerticalOffset="30"/> </ToolTipService.ToolTip> </TextBlock> </Canvas> </UserControl> 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. Ngoà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="clrnamespace:system.windows.controls;assembly=system.windows.controls.data" Width="500" Height="Auto"> <ScrollViewer VerticalScrollBarVisibility="Auto" BorderThickness="0"> <StackPanel Margin="10,10,10,10"> <TextBlock Text="DataGrid Demonstration" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" /> <TextBlock Text="DataGrid with autogenerated columns:"/> <data:datagrid x:name="datagrid1" Height="140" Margin="0,5,0,10" AutoGenerateColumns="True" /> <TextBlock Text="DataGrid with row details sections:"/> <data:datagrid x:name="datagrid3" Height="140" Margin="0,5,0,10" RowDetailsVisibilityMode="VisibleWhenSelected" > <data:datagrid.rowdetailstemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> 16

52 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT <TextBlock FontSize="12" Text="Address: " /> <TextBlock FontSize="12" Text="Binding Address"/> </StackPanel> </DataTemplate> </data:datagrid.rowdetailstemplate> </data:datagrid> <TextBlock Text="DataGrid with configured columns:"/> <data:datagrid x:name="datagrid4" Height="160" Margin="0,5,0,10" RowHeight="40" AutoGenerateColumns="False" > <data:datagrid.columns> <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:datagridtextcolumn.elementstyle> <Style TargetType="TextBlock"> <Setter Property="TextWrapping" Value="Wrap"/> </Style> </data:datagridtextcolumn.elementstyle> <data:datagridtextcolumn.editingelementstyle> <Style TargetType="TextBox"> <Setter Property="Foreground" Value="Blue"/> </Style> </data:datagridtextcolumn.editingelementstyle> </data:datagridtextcolumn> <data:datagridcheckboxcolumn Header="New?" Width="40" Binding="Binding IsNew" /> <data:datagridcheckboxcolumn Header="Subscribed?" Width="Auto" Binding="Binding IsSubscribed" IsThreeState="True" /> </data:datagrid.columns> </data:datagrid> <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"> <data:datagrid.columns> <!-- Name Column --> <data:datagridtemplatecolumn Header="Name"> <data:datagridtemplatecolumn.celltemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Padding="5,0,5,0" Text="Binding FirstName"/> <TextBlock Text="Binding LastName"/> 17

53 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT </StackPanel> </DataTemplate> </data:datagridtemplatecolumn.celltemplate> <data:datagridtemplatecolumn.celleditingtemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBox Padding="5,0,5,0" Text="Binding FirstName"/> <TextBox Text="Binding LastName"/> </StackPanel> </DataTemplate> </data:datagridtemplatecolumn.celleditingtemplate> </data:datagridtemplatecolumn> <!-- Address Column --> <data:datagridtextcolumn Header="Address" Width="300" Binding="Binding Address" /> </data:datagrid.columns> </data:datagrid> </StackPanel> </ScrollViewer> </UserControl> 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<Customer> GetSampleCustomerList() 18

54 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT return new List<Customer>(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 Trong Project Silverlight đã có chúng ta làm thao tác tạo New Item theo hình vẽ dưới đây 19

55 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 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=" 20

56 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT xmlns:x=" > </UserControl> 4. Bây giờ chúng ta sẽ thêm đoạn mã dưới đây vào bên trong thẻ <Usercontrol> <Canvas Grid.Column="0" Grid.Row="1" Background="WhiteSmoke"> <TextBlock Text="Họ và tên: " Margin="5,22,0,0" /> <TextBox x:name="txtname" Margin="65,15,0,0" Width="180" Height="20"/> <TextBlock Text="ðịa chỉ: " Margin="5,47,0,0"/> <TextBox x:name="txtaddress" Margin="65,40,0,0" Width="180" Height="20"/> <TextBlock Text="ðT: " Margin="5,72,0,0"/> <TextBox x:name="txtphone" Margin="65,65,0,0" Width="180" Height="20"/> <TextBlock Text="Mobile: " Margin="5,97,0,0"/> <TextBox x:name="txtmobile" Margin="65,90,0,0" Width="180" Height="20"/> <TextBlock Text=" " Margin="5,122,0,0"/> <TextBox x:name="txt " Margin="65,115,0,0" Width="180" Height="20"/> <Button x:name="btnsubmit" Content="Lưu lại" Margin="140,150,0,0" Width="55" <Button x:name="btnreset" Content="Xóa" Margin="200,150,0,0" Width="45"/> </Canvas> 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 // 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ẻ <UserControl> 21

57 CHƯƠNG IV: CONTROL VÀ USER CONTROL TRONG SILVERLIGHT 7. Để hiển thị được User control: FormContactUserControl trong Page.xaml ta tiếp tục thêm đoạn mã sau <inf:fromcontactusercontrol x:name="from1"></inf:fromcontactusercontrol> 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 22

58 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ôṭ 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, Brushes 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 ngoài của Shape. - StrokeThickness: độ dày của viền ngoà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. <Canvas> <Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black"/> </Canvas>

59 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ó. <Canvas Height="300" Width="300"> <! Vẽ một ñường chéo từ tọa ñộ (0, 0) tới (100,100). --> <Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="4" /> <! 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. --> <Line X1="0" Y1="0" X2="100" Y2="100" StrokeThickness="10" Canvas.Left="100"> <Line.Stroke> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Blue" Offset="0.5" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Line.Stroke> </Line> <! Vẽ một ñoạn ngang từ tọa ñộ (10,80) tới (150,80). --> <Line X1="0" Y1="80" X2="200" Y2="80" Stroke="Black" StrokeThickness="4"/> </Canvas> 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. <Canvas> <Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 100,200 C 100,25 400, ,175 H 280" /> </Canvas>

60 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. <Canvas> <Polygon Points="300, , , ,200" Stroke="Purple" StrokeThickness="2"> <Polygon.Fill> <SolidColorBrush Color="Blue" Opacity="0.4"/> </Polygon.Fill> </Polygon> </Canvas> 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. <Canvas> <Polyline Points="50,25 0, ,100 50,25" Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50" /> </Canvas> 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

61 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. <Canvas> <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" Canvas.Top="20" Canvas.Left="20" StrokeThickness="3" /> </Canvas> 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 <Canvas> <Path Fill="Gold" Stroke="Black" StrokeThickness="1"> <Path.Data> <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" /> </Path.Data> </Path> </Canvas> 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

62 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. <Canvas> <Path Stroke="Black" StrokeThickness="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,20"> <PathFigure.Segments> <LineSegment Point="100,130"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> 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 <Canvas> <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF"> <Path.Data> <!-- Creates a composite shape from three geometries. --> <GeometryGroup FillRule="EvenOdd"> <LineGeometry StartPoint="10,10" EndPoint="50,30" /> <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" /> <RectangleGeometry Rect="30, " /> </GeometryGroup> </Path.Data> </Path> </Canvas> 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.

63 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). <StackPanel> <Rectangle Width="100" Height="100" Fill="Red" /> </StackPanel> 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. <StackPanel> <Rectangle Width="100" Height="100" Fill="#FFFF0000" /> </StackPanel> o Sử dụng thuộc tính kiểu phần tử để mô tả SolidColorBrush( ở đây là thuộc tính Fill) <StackPanel> <Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="Red" /> </Rectangle.Fill> </Rectangle> <Rectangle Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush Color="#FFFF0000" /> </Rectangle.Fill> </Rectangle> </StackPanel> 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

64 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. <StackPanel> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </StackPanel> 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 ngoà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. <StackPanel> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </StackPanel>

65 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 ngoà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.

66 Solutons XỬ LÝ ĐỒ HỌA TRÊN SILVERLIGHT Mặc định ImageBrush sẽ giãn ảnh ra hết toà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 <Canvas> <Grid x:name="layoutroot"> <Grid.Background> <ImageBrush ImageSource="Forest.jpg" /> </Grid.Background> </Grid> </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 <Grid x:name="layoutroot" Background="White"> <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"> <!-- Paint the text with video. --> <TextBlock.Foreground> <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" /> </TextBlock.Foreground> </TextBlock> </Grid>

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

68 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 soá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 <Canvas> <Canvas.Resources> <Storyboard x:name="mystoryboard"> <!-- Animate the center point of the ellipse. --> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="20,200" To="400,100" RepeatBehavior="Forever" /> </Storyboard> </Canvas.Resources> <Path Fill="Blue"> <Path.Data> <!-- Describes an ellipse. --> <EllipseGeometry x:name="myanimatedellipsegeometry" Center="20,20" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265"> <!-- Button that begins animation. --> <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" /> <!-- Button that pauses Animation. --> <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /> <!-- Button that resumes Animation. --> <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" />

69 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" /> </StackPanel> </Canvas> 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 soá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 soá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 <Canvas> <Canvas.Resources> <Storyboard x:name="mystoryboard"> <!-- Animate the TranslateTransform's X property from 0 to 350, then 50, then 200 over 10 seconds. --> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyAnimatedTranslateTransform"

70 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. --> <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" /> suddenly <!-- Using a DiscreteDoubleKeyFrame, the rectangle appears at 400 after the fourth second of the animation. --> <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" /> <!-- 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.00" Value="0" KeyTime="0:0:6" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </Canvas.Resources> <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="50" Height="50"> <Rectangle.RenderTransform> <TranslateTransform x:name="myanimatedtranslatetransform" X="0" Y="0" /> </Rectangle.RenderTransform> </Rectangle> </Canvas> // 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 <StackPanel> <StackPanel.Resources> <Storyboard x:name="mystoryboard"> <DoubleAnimation

71 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" /> </Storyboard> </StackPanel.Resources> <Rectangle Loaded="Start_Animation" x:name="myanimatedrectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel> 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"> <StackPanel.Resources> <Storyboard x:name="colorstoryboard"> <!-- 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" /> </Storyboard> </StackPanel.Resources> </StackPanel> 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

72 CHƯƠNG VI: MEDIA VÀ ANIMATION <Canvas Width="400" Height="300"> <Canvas.Resources> <Storyboard x:name="mystoryboard"> 300 Y <!-- Animate the center point of the ellipse from 100 X, 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" /> </Storyboard> </Canvas.Resources> <Path Fill="Blue" Loaded="Start_Animation"> <Path.Data> <!-- Describes an ellipse. --> <EllipseGeometry x:name="myanimatedellipsegeometry" Center="200,100" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> </Canvas> // 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

73 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. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <MediaElement x:name="media" Source="xbox.wmv" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" /> </Grid> <!-- Stops media playback.--> <Button Click="StopMedia" Grid.Column="0" Grid.Row="1" Content="Stop" /> <!-- Pauses media playback. --> <Button Click="PauseMedia" Grid.Column="1" Grid.Row="1" Content="Pause" /> <!-- Begins media playback. --> <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();

74 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 <StackPanel Margin="40"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Foreground="DarkGray">Time:</TextBlock> <TextBlock x:name="timetextblock" FontSize="12" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Foreground="DarkGray">Type:</TextBlock> <TextBlock x:name="typetextblock" FontSize="12" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Foreground="DarkGray">Value:</TextBlock> <TextBlock x:name="valuetextblock" FontSize="12" /> </StackPanel> <!-- The MediaElement has the MarkerReached event attached. --> <MediaElement MarkerReached="OnMarkerReached" HorizontalAlignment="Left" Source="thebutterflyandthebear.wmv" Width="300" Height="200" /> </StackPanel> 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();

75 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 soá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 soá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. <?wsx version="1.0"?> <smil> <seq id="sq1"> <media id="video1" src="clip1.wmv" /> <media id="video2" src="clip2.wmv" /> <media id="video3" src="clip3.wmv" /> <seq> </smil>

76 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. Ngoà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

77 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT - 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 o - 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 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; 2

78 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT // 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 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. 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 hoàn toàn an toà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 3

79 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 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. 4

80 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 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; 5

81 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 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, ngoài ra LINQ to XML còn là sự cải tiến của ngôn ngữ Visual C# 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"> <Canvas x:name="layoutroot" Background="White"> </Canvas> </UserControl> 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", " "), new XElement("DiaChi", new XElement("DuongPho", "Nguyen Hong"), 6

82 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT ); new XElement("ThanhPho", "HaNoi") ) ), new XElement("Contact2", new XElement("Ten", "Tran Duy Bien"), new XElement("DienThoai", " "), 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 = 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()) ); UIElement); UIElement); // Them TextBlock1 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock1.ToString()) as // Them TextBlock2 vao trong trang LayoutRoot.Children.Add(XamlReader.Load(textBlock2.ToString()) as 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 7

83 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT 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. Để hoà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 - Sử dụng Control DataGrid để hiển thị dữ liệu o Khởi tạo chương trình Tạo một Project Web Application (File-> New ->Project-> Silverlight Application). Chúng ta đặt tên cho ứng dụng này là SQLData 8

84 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT Bấm OK chúng ta sẽ có một Solution như hình vẽ dưới đây o Tìm hiểu về LINQ to SQL LINQ to SQL là một phiên bản hiện thực hóa của O/RM (object relational mapping) có bên trong.net Framework bản Orcas (nay là.net 3.5), nó cho phép bạn mô hình hóa một cơ sở dữ liệu dùng các lớp.net. Sau đó bạn có thể truy vấn cơ sở dữ liệu (CSDL) dùng LINQ, cũng như cập nhật/thêm/xóa dữ liệu từ đó. LINQ to SQL hỗ trợ đầy đủ transaction, view và các stored procedure (SP). Nó cũng cung cấp một cách dễ dàng để thêm khả năng kiểm tra tính hợp lệ của dữ liệu và các quy tắc vào trong mô hình dữ liệu của bạn. Để biết thêm về công nghệ này bạn có thể xem chi tiết tại ScottGu's tutorial o Thêm LINQ to SQL Classes - Bằng cách chuột phải vào Server Project và chọn Add -> New Item sau đó chọn LINQ to SQL Classes. class này có tên là DataClasses1.dbml 9

85 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT - Chúng ta mở Server Explorer (View->Server Explorer) và chọn cơ sở dữ liệu AdventureWorkLTs (đã cài đặt sẵn trong SQL Server hoặc có thể download ở Microsoft.com) - Sau khi đã mở kết nối tới CSDL AdventureWorkLTs, chúng ta tiếp tục kéo bảng Customer vào DataClasses1.dbml trong đã mở trong Designer - Nhiều khả năng sẽ bạn sẽ nhận được cảnh báo như hình vẽ dưới đây, bạn bấm vào Yes để tiếp tục 10

86 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT - Sau khi kéo vào vùng trống của DataClasses1.dbml sẽ nhìn thấy được khả năng chuyển hóa từ đối tượng bảng (Customer table) sang mô hình lớp như hình vẽ dưới đây 11

87 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT o Tạo Web Service (WCF) - Chuột phải vào Web Project chọn Add New, bên trong templates chọn WCF Service 12

88 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT - Kết quả nhận được từ việc tạo trên là 3 file theo hình vẽ dưới đây - Mở file IService1.cs bạn sẽ thấy đoạn mã đã được tạo săn dưới đây public interface IService1 [OperationContract] void DoWork(); - Thay đổi đoạn mã trên bằng đoạn mã dưới đây public interface IService1 [OperationContract] List<Customer> GetCustomersByLastName(string lastname); - Mở file Service1.svc, thêm viết đoạn mã như dưới đây public List<Customer> GetCustomersByLastName(string lastname) DataClasses1DataContext db = new DataClasses1DataContext(); var matchingcustomers = from cust in db.customers where cust.lastname.startswith(lastname) select cust; return matchingcustomers.tolist(); - Lưu ý Mặc định của WCF sử dụng wshttpbinding, xem trong file Web.config <services> <service behaviorconfiguration="sqldata_web.service1behavior" name="sqldata_web.service1"> <endpoint address="" binding="wshttpbinding" contract="sqldata_web.iservice1"> <identity> <dns value="localhost"/> </identity> </endpoint> </service> </services> 13

89 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT o - Tuy nhiên nó chỉ hỗ trợ trong basic binding (SOAP 1.1, etc.), vì vậy bạn cần thay đổi binding tương ứng như sau <endpoint address="" binding="basichttpbinding" contract="sqldata_web.iservice1"> Tạo ứng dụng Silverlight - Tiếp theo chúng ta sẽ tạo một ứng dụng Silverlight và tương tác với web service WCF vừa tạo được. Chuột phải vào references trong silverlight project và chọn Add Service Reference - Sau khi chọn Add Service Reference, bạn bấm chuột vào Discover và chọn Services in Solution. Service mà bạn vừa tạo sẽ được tìm thấy và hiện thị. Bấm OK - Service sau khi đã được thêm vào project của bạn, bạn có thể truy cập vào Web service này. 14

90 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT o Tạo XAML - Trong file Page.xaml bạn thêm đoạn mã dưới đây <Grid x:name="layoutroot" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="10" /> <!--0 Margin--> <RowDefinition Height="50" /> <!--1 Prompts--> <RowDefinition Height="*" /> <!--2 DataGrid--> <RowDefinition Height="10" /> <!--3 Margin--> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="10" /> <!--0 Margin--> <ColumnDefinition Width="*" /> <!--1 Controls--> <ColumnDefinition Width="10" /> <!--2 Margin--> </Grid.ColumnDefinitions> </Grid> - Bên màn hình Designer sẽ thấy như hình ảnh sau 15

91 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT - Đặt các Control sau đây vào hàng thứ nhất của Datagrid <Border BorderBrush="Black" BorderThickness="2" Grid.Row="1" Grid.Column="1"/> <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal"> <TextBlock Text="Last name to search for: " VerticalAlignment="Bottom" FontSize="18" Margin="15,0,0,0" /> <TextBox x:name="lastname" Width="250" Height="30" Margin="2,0,0,4" VerticalAlignment="Bottom"/> <Button x:name="search" Width="75" Height="30" Margin="20,0,0,4" Content="Search" VerticalAlignment="Bottom" Background="Blue" FontWeight="Bold" FontSize="14" /> </StackPanel> - Đặt các Control sau đây vào hàng thứ nhất của Grid - Kéo thả DataGrid trong toolbox vao trong XAML <my:datagrid x:name="thedatagrid" AlternatingRowBackground="Beige" AutoGenerateColumns="True" Width="700" Height="500" Grid.Row="2" Grid.Column="1" CanUserResizeColumns="True" /> o Viết xử lý sự kiện cho nút Search - Mở file page.xaml.cs thêm đoạn mã dưới đây public Page() InitializeComponent(); Loaded += new RoutedEventHandler(Page_Loaded); void Page_Loaded(object sender, RoutedEventArgs e) Search.Click += new RoutedEventHandler(Search_Click); void Search_Click(object sender, RoutedEventArgs e) //Gan Service1Client toi mot doi tuong o local là webservice 16

92 CHƯƠNG VII: LÀM VIỆC VỚI DỮ LIỆU TRONG SILVERLIGHT ServiceReference1.Service1Client webservice = new SQLData.ServiceReference1.Service1Client(); //Cai dat trinh xu ly su kien webservice.getcustomersbylastnamecompleted += new EventHandler<SQLData.ServiceReference1. GetCustomersByLastNameCompletedEventArgs>(webService_GetCustomersByLastNameComplete d); //Goi asynchronous webservice.getcustomersbylastnameasync(lastname.text); void webservice_getcustomersbylastnamecompleted(object sender, SQLData.ServiceReference1.GetCustomersByLastNameCompletedEventArgs e) //Trinh bay ket qua vao Datagrid thedatagrid.itemssource = e.result; o Kết quả hiển thị 17