播下silverlight的种子
经过这么久,终于决定学Silverlight了。还是从最基本的QuickStart开始好了
一、QuickStart part1
1、准备工作
一个典型的Sliverlight需要4个文件
a. 一个html文件,用于存放silverlight插件
b. silverlight.js文件
c. 一个XAML文件
d. 和一个用于支持html文件的js文件
2、开始
先从SDK中找到silverlight.js,然后将其插入到html页中
<script type="text/javascript" src="Silverlight.js"></script>
再创建一个createSilverlight.js,用于创建silverlight插件
<script type="text/javascript" src="createSilverlight.js"></script>
接着创建存放silverlight插件的html元素,比如div。需要声明其ID 暂且为mySilverlightPluginHost
在这个div下,插入如下脚本块
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
然后再createSilverlight.js 文件中添加如下脚本:
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightPlugin", // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // Width of rectangular region of
// plug-in area in pixels.
height:'300', // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of plug-in.
isWindowless:'false', // Determines whether to display plug-in
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
好了,最后该创建silverlight的内容了
创建myxaml.xaml文件 ,由于上一步指定了这个文件名
二、QuickStart Part2
1、创建Canvas和命名空间声明
每一个XAML文件都以Canvas元素开头,就像html都以html开头一样
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Canvas>
2、画一些东西
<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
这段语句画了一个圆,宽、高各200px,边框颜色为黑色,边框宽10px,填充颜色为SlateBlue
3、查看XAML内容
完成了,现在在浏览器中查看一下那个html文件,就可以预览刚刚的成果了
一、QuickStart part1
1、准备工作
一个典型的Sliverlight需要4个文件
a. 一个html文件,用于存放silverlight插件
b. silverlight.js文件
c. 一个XAML文件
d. 和一个用于支持html文件的js文件
2、开始
先从SDK中找到silverlight.js,然后将其插入到html页中
<script type="text/javascript" src="Silverlight.js"></script>
再创建一个createSilverlight.js,用于创建silverlight插件
<script type="text/javascript" src="createSilverlight.js"></script>
接着创建存放silverlight插件的html元素,比如div。需要声明其ID 暂且为mySilverlightPluginHost
在这个div下,插入如下脚本块
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
然后再createSilverlight.js 文件中添加如下脚本:
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightPlugin", // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // Width of rectangular region of
// plug-in area in pixels.
height:'300', // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of plug-in.
isWindowless:'false', // Determines whether to display plug-in
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
好了,最后该创建silverlight的内容了
创建myxaml.xaml文件 ,由于上一步指定了这个文件名
二、QuickStart Part2
1、创建Canvas和命名空间声明
每一个XAML文件都以Canvas元素开头,就像html都以html开头一样
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Canvas>
2、画一些东西
<Ellipse
Height="200" Width="200"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
这段语句画了一个圆,宽、高各200px,边框颜色为黑色,边框宽10px,填充颜色为SlateBlue
3、查看XAML内容
完成了,现在在浏览器中查看一下那个html文件,就可以预览刚刚的成果了