系列文章导航:
稳扎稳打Silverlight(1) - 1.0实例之电子表
稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)
稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox
4、Canvas.xaml
<UserControl x:Class="Silverlight20.Control.Canvas"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Left">
<!--
Canvas - 绝对布局模式
Canvas.Left - 与上一层 Canvas 的 Y轴 间的距离,左上角为原点
Canvas.Top - 与上一层 Canvas 的 X轴 间的距离,左上角为原点
-->
<Canvas Background="Red" Width="100" Height="100">
<Canvas Background="Green" Width="100" Height="100" Canvas.Left="120"
Canvas.Top="120" >
<TextBlock Text="TextBlock" Canvas.Top="20" />
</Canvas>
</Canvas>
</UserControl>

5、CheckBox.xaml
<UserControl x:Class="Silverlight20.Control.CheckBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>

<!--
IsChecked - 是否被选中
-->
<CheckBox x:Name="chk1" Content="我是CheckBox" IsChecked="False" Margin="5" />

<!--
IsThreeState - 是否是 有3个状态 的CheckBox
false - 通常的两状态。默认值
true - 有3个状态,分别为:true, false, null。也就是说 CheckBox.IsChecked 是 bool? 类型
-->
<CheckBox x:Name="chk2" Content="红色的三状态的CheckBox" Background="Red" IsThreeState="True" Margin="5" />

<!--
IsEnabled - CheckBox是否有效
-->
<CheckBox x:Name="chk3" Content="无效的CheckBox" IsEnabled="False" Margin="5"/>

<!--
CheckBox.Content - CheckBox所对应的内容
Checked - 被选中后所触发的事件
Unchecked - 被取消选中后所触发的事件
Click - 被单击后所触发的事件
-->
<CheckBox x:Name="chk4" Checked="Button_Click" Margin="5">
<CheckBox.Content>
<Image Source="/Silverlight20;component/Images/Logo.jpg" Width="100" />
</CheckBox.Content>
</CheckBox>

<Button Content="各个CheckBox的选中状态" Width="200" HorizontalAlignment="Left" Click="Button_Click" Margin="5" />

</StackPanel>
</UserControl>

CheckBox.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Windows.Browser;

namespace Silverlight20.Control


{
public partial class CheckBox : UserControl

{
public CheckBox()

{
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)

{
HtmlWindow html = HtmlPage.Window;
html.Alert(string.Format("chk1: {0}\r\nchk2: {1}\r\nchk3: {2}\r\nchk4:
{3}",
chk1.IsChecked, chk2.IsChecked, chk3.IsChecked, chk4.IsChecked));
}
}
}
