Silverlight – Step by Step (phần 2)


Trong bài trước, tạo một dự án Silverlight, bạn đã thêm một đối tượng Silverlight vào một trang HTML và tạo một file XAML trống. Bài này sẽ hướng dẫn bạn cách tạo nội dung Silverlight bên trong file XAML.

Bước 1: tạo một đối tượng Canvas và khai báo namespace

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

<Canvas 
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

Mỗi file XAML Silverlight bắt đầu với một thẻ <Canvas>, trong đó có một thuộc tính xmlns dùng để khai báo namespace của Silverlight, và một thuộc tính khác là xmlns:x dùng để khai báo namespace cho XAML.

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

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

 <Ellipse
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

Bước 3: Xem nội dung XAML của bạn

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

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse 
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>


Nếu máy của bạn có cài đặt WPF thi khi nháy đúp lên file XAML sẽ làm cho WPF chạy chứ không phải là Silverlight. Nhưng cũng đừng lo lắng về điều này, vì file XAML được đặt cùng chỗ với file HTML trên Web server nên người dùng không thể nháy đúp vào được.

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

4 thoughts on “Silverlight – Step by Step (phần 2)

  1. bác ơi, dùng Silverlight 2.0 để làm mấy cái này liệu có chạy không ?

    Em cứ bị báo lỗi hoài .Nó bảo “Silverlight is undefine” dòng số 4 trang sample.html .
    Em đoán lỗi nó nằm ở trang “createSilverlight.js”,dòng này đây “Silverlight.createObject”.Sửa làm sao đây bác ?

  2. Trên nguyên tắc thì Silverlight plug-in 2.0 vẫn có thể thực thi các chương trình Silverlight 1.0. Bạn hãy kiểm tra xem đã có file silverlight.js và include nó vào trang web hay chưa.
    Tuy nhiên nếu bạn đang bắt đầu học thì lời khuyên là nên bắt đầu với 2.0, mô hình lập trình trong bản 2 khác nhiều so với bản 1.

    Học Silverlight 2.0 tại đây: https://namdh.wordpress.com/tag/silverlight-2-tutorial/

  3. function createMySilverlightPlugin()
    {
    Silverlight.createObject(
    myxaml.xaml, // Source property value.
    parentElement,
    …..
    }

    nó báo lỗi dòng Silverlight.createObject đó bác ,bảo “Silverlight is undefined”,em đã inlcude file js đầy đủ.

    Các bài trong silverlight-2 ,không sắp xếp theo thứ tự step-by-step như silverlight-1.Em chưa có kinh nghiệm và muốn ứng dụng trên web thì nên vào phần nào ?
    Thanks bác đã chỉ dẫn.

  4. Lỗi này có nghĩa là đối tượng Silverlight chưa được cài đặt => bạn chưa include file Silverlight.js một cách đúng đắn. Bạn phải đảm bảo là có thể truy xuất vào file này từ vị trí file HTML theo đường dẫn của bạn. Đơn giản nhất là copy file Silverlight.js vào cùng thư mục.

    Các bài hướng dẫn Silverlight 2 thực chất là được sắp xếp theo thứ tự, có lẽ do các bài này tôi không ghi chú vào tiêu đề nên bạn hiểu nhầm. Bạn có thể nhấn vào link https://namdh.wordpress.com/tag/silverlight-2-tutorial/ rồi học theo thứ tự các bài từ cũ đến mới (từ dưới lên), bắt đầu từ bài 1: https://namdh.wordpress.com/2008/07/30/silverlight-2-tutorial-vi%e1%ba%bft-ch%c6%b0%c6%a1ng-trinh-hello-world-v%e1%bb%9bi-silverlight-2-va-vs-2008/
    Thực ra theo tôi nghĩ, phiên bản 1.0 chỉ là phiên bản lót đường, phục vụ cho việc marketing, phiên bản 2.0 mới là phiên bản mà M$ thực sự muốn nhắm đến, vậy nên hiện tại bạn sẽ thấy các tài liệu, ứng dụng mẫu của Silverlight 1.0 đều rất khó tìm, ngay cả loạt bài tutorial gốc của loạt bài này cũng đã bị chuyển đi chỗ khác.
    Vậy nên lời khuyên là bạn nên bắt đầu với 2.0, bắt đầu với cái gì cũng đều khó như nhau🙂.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s