การใช้งาน Silverlight
หลังจากที่ติดตั้ง Microsoft Expression Blend 2 แล้วไปที่ File->New Project จากนั้นจะมีหน้าต่างๆ New->Project เกิดขึ้นมาดังรูป
ให้เลือกโปรเจคเป็น Silverlight Site แล้วตั้งชื่อโปรเจคแล้วกำหนดตำแหน่งที่จะเก็บไฟล์โปรเจคนี้แล้วคลิกที่ปุ่ม Ok
ให้เลือกไฟล์ .xaml (Silverlight จะเป็นส่วนหนึ่งใน WPF นะครับดังนั้นคำสั่งต่างๆจะคล้ายๆกับ WPF)
แล้วเขียนโค้ดดังนี้
หลังจากนั้นก็นำไฟล์ .xaml นี้ไปไว้ใน .html เพื่อแสดงผลบน Website ให้คลิกขวาที่ตรง ไฟล์ .html (Default.html) แล้วเลือก Edit in Visual Studioดังรูป
จากนั้นจะมีโปรแกรม
Visual Studio เกิดขึ้น แล้วให้เราเขียนโค้ดดังนี้ ( ใน ไฟล์ Default.html)
ให้เราเขียนในส่วนของ แท็ก body ส่วนแท็กอื่นโปรแกรมจะสร้างมาให้อยู่แล้วดังนี้
<body style="background:Orange;">
<object type="application/x-silverlight" id="silverlightControlHost" width="200" height="100">
<param name="source" value="Page.xaml" />
</object>
(โค้ดด้านล่างเป็นโค้ดทั้งหมดของไฟล์ Default.html)
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default_html.js"></script>
<script type="text/javascript" src="Page.xaml.js"></script>
<style type="text/css">
#silverlightControlHost {
height: 480px;
width: 640px;
}
#errorLocation {
font-size: small;
color: Gray;
}
</style>
</head>
<body style="background:Orange;">
<object type="application/x-silverlight" id="silverlightControlHost" width="200" height="100">
<param name="source" value="Page.xaml" />
</object>
</body>
</html>
จากนั้นทดสอบแสดงผลใน Browser โดยกดปุ่ม F5 จะได้ดังรูป
คำอธิบาย ในการใส่แท็กของ xaml เข้าไปใน .html เราจะใช้ แท็กที่ชื่อว่า Object โดยในแท็ก object จะมี attribute ต่างๆดังนี้
type เป็นชนิดของ application ที่ใช้ ซึ่งเราจะใช้ application ของsilverlight ก็เขียนดังนี้ application/x-silverlight
id เป็น id ของ application นี้
width เป็นขนาดความกว้างของ application นี้เมื่อแสดงใน browser
height เป็นขนาดความสูงของ application นี้เมื่อแสดงใน browser
ส่วนแท็ก param จะมี attrubute name เพื่อกำหนดชื่อ และ value เพื่อกำหนดไฟล์ .xaml ที่ใช้
[With great power comes great responsibility]