silverlight:Silverlight(3) - 2.0Control控件的Border Button Calendar Canvas CheckBox ComboBox

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　在线DEMO

　　http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

　　举例

　　1、Border.xaml

<UserControl x:Class="Silverlight20.Control.Border"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　　　
　　　　<!--
　　　　BorderThickness - 边框宽度(像素值:上下左右；左右,上下；左,上,右,下)
　　　　BorderBrush - 边框颜色
　　　　CornerRadius - 边框角半径
　　　　-->
　　　　<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Width="120" Margin="5">
　　　　　　<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />
　　　　</Border>
　　
　　　　<!--
　　　　Border.BorderBrush - 继承自 .Windows.Media.Brush 对象
　　　　-->
　　　　<Border BorderThickness="3" CornerRadius="10" Width="120" Margin="5">
　　　　　　<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />
　　　　　　<Border.BorderBrush>
　　　　　　　　<ImageBrush ImageSource="http://silverlight.net/Themes/silverlight/images/logo.jpg" />
　　　　　　</Border.BorderBrush>
　　　　</Border>
　　
　　</StackPanel>
</UserControl>

　　2、Button.xaml

<UserControl x:Class="Silverlight20.Control.Button"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left" Width="400">
　　
　　　　<!--
　　　　Content - 按钮上显示内容
　　　　Click - 按钮单击事件
　　　　Cursor - 鼠标移动到按钮上面时鼠标指针样式
　　　　　　Arrow - 箭头
　　　　　　Hand - 手形
　　　　　　Wait - 沙漏
　　　　　　IBeam - “I”字形
　　　　　　Stylus - 点
　　　　　　Eraser - 橡皮
　　　　　　None - 无
　　　　Padding - 容器内内容和容器边缘填充距离(像素值:上下左右；左右,上下；左,上,右,下)
　　　　-->
　　　　<Button Tag="我是Button" Content="我是Button" Cursor="Eraser" Click="Button_Click" Padding="5" Margin="5" />
　　
　　　　<!--
　　　　IsEnabled - 按钮是否有效
　　　　-->
　　　　<Button Tag="无效Button" Content="无效Button" IsEnabled="False" Click="Button_Click" Margin="5" />
　　
　　　　<!--
　　　　Button.Content - 按钮上显示内容
　　　　ClickMode - 触发单击事件类型 [.Windows.Controls.ClickMode枚举]
　　　　　　ClickMode.Press - 鼠标左键单击
　　　　　　ClickMode.Release - 鼠标左键单击并放开
　　　　　　ClickMode.Hover - 鼠标经过
　　　　-->
　　　　<Button Tag="图片Button" ClickMode="Release" Click="Button_Click" Margin="5">
　　　　　　<Button.Content>
　　　　　　　　<Image Source="/Silverlight20;component/Images/Logo.jpg" />
　　　　　　</Button.Content>
　　　　</Button>
　　
　　</StackPanel>
</UserControl>

　　Button.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
using .Windows.Browser;
　　
Silverlight20.Control
{
　　public partial Button : UserControl
　　{
　　　　public Button
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void Button_Click(object sender, RoutedEventArgs e)
　　　　{
　　　　　　HtmlWindow html = HtmlPage.Window;
　　　　　　html.Alert(((.Windows.Controls.Button)sender).Tag. + " 被单击了");
　　　　}
　　}
}

　　3、Calendar.xaml

<!--
CalendarControl控件命名空间和其他Control控件样都是在.Windows.Controls下
但是其是在.Windows.Controls.dll集中定义
所以要引入相应xml命名空间
-->
<UserControl x:Class="Silverlight20.Control.Calendar"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　xmlns:basics="clr-:.Windows.Controls;assembly=.Windows.Controls">
　　<StackPanel HorizontalAlignment="Left">
　　　　<TextBox x:Name="txtMsg" Margin="5"　/>
　　　　
　　　　<!--
　　　　SelectedDatesChanged - 选中日期后所触发事件
　　　　DisplayDateEnd - 此日期的后日期不予显示
　　　　DisplayDateStart - 此日期的前日期不予显示
　　　　FirstDayOfWeek - Control控件所显示每星期第天为星期几 [.DayOfWeek枚举]
　　　　DisplayMode - Control控件显示模式 [.Windows.Controls.DisplayMode枚举]
　　　　　　DisplayMode.Month - 标题显示年月内容显示日期默认值
　　　　　　DisplayMode.Year - 标题显示年内容显示月
　　　　　　DisplayMode.Decade - 标题显示个十年区间内容显示年
　　　　IsTodayHighlighted - 是否高亮显示今天日期
　　　　-->
　　　　<basics:Calendar x:Name="calendar" Margin="5" FirstDayOfWeek="Monday"
　　　　　　SelectedDatesChanged="calendar_SelectedDatesChanged">
　　　　</basics:Calendar>
　　　　
　　　　<StackPanel Orientation="Horizontal">
　　　　　　
　　　　　　<CheckBox Content="禁止选择今天以前日期" Margin="5"
　　　　　　　　Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" />
　　
　　　　　　<RadioButton GroupName="selectionMode" x:Name="SingleDate" Content="可选单日期" Margin="5"　　　　　　　
　　　　　　　　Checked="selectionMode_Changed" />
　　
　　　　　　<RadioButton GroupName="selectionMode" x:Name="None" Content="不可选日期" Margin="5"　　　　　　　
　　　　　　　　Checked="selectionMode_Changed" />
　　
　　　　　　<RadioButton GroupName="selectionMode" x:Name="SingleRange" Content="可选连续日期(sht)" Margin="5"　　　　　　　
　　　　　　　　Checked="selectionMode_Changed" />
　　
　　　　　　<RadioButton GroupName="selectionMode" x:Name="MultipleRange" Content="可选多个日期(ctrl)" Margin="5"　　　　　　　
　　　　　　　　Checked="selectionMode_Changed" />
　　　　　　
　　　　</StackPanel>
　　　　
　　</StackPanel>
</UserControl>

　　Calendar.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Control
{
　　public partial Calendar : UserControl
　　{
　　　　public Calendar
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void calendar_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
　　　　{
　　　　　　// Calendar.SelectedDate - 选中日期
　　　　　　// Calendar.SelectedDates - 选中多个日期集合
　　
　　　　　　this.txtMsg.Text = "";
　　　　　　foreach (DateTime dt in calendar.SelectedDates)
　　　　　　{
　　　　　　　　this.txtMsg.Text dt.("yyyy-MM-dd");
　　　　　　　　this.txtMsg.Text " ";
　　　　　　}
　　　　}
　　
　　　　private void CheckBox_Checked(object sender, RoutedEventArgs e)
　　　　{
　　　　　　 (this.calendar.SelectedDate != null && this.calendar.SelectedDate < DateTime.Now.Date)
　　　　　　　　this.calendar.SelectedDate = DateTime.Now;
　　
　　　　　　// Calendar.BlackoutDates - 不允许选择日期集合
　　　　　　// Calendar.BlackoutDates.AddDatesInPast - 禁止选择今天的前日期
　　　　　　this.calendar.BlackoutDates.AddDatesInPast;
　　　　}
　　
　　　　private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// Calendar.BlackoutDates.Clear - 清除 不允许选择日期集合 设置
　　　　　　this.calendar.BlackoutDates.Clear;
　　　　}
　　
　　　　private void selectionMode_Changed(object sender, RoutedEventArgs e)
　　　　{
　　　　　　// CalendarSelectionMode.None - 禁止选择日期
　　　　　　// CalendarSelectionMode.SingleRange - 可以选择多个日期连续日期(Sht键配合)
　　　　　　// CalendarSelectionMode.MultipleRange - 可以选择多个日期任意日期(Ctrl键配合)
　　　　　　// CalendarSelectionMode.SingleDate - 只能选择个日期
　　　　　　switch (((.Windows.Controls.RadioButton)sender).Name)
　　　　　　{
　　　　　　　　 "None":
　　　　　　　　　　this.calendar.SelectionMode = CalendarSelectionMode.None;
　　　　　　　　　　;
　　　　　　　　 "SingleRange":
　　　　　　　　　　this.calendar.SelectionMode = CalendarSelectionMode.SingleRange;
　　　　　　　　　　;
　　　　　　　　 "MultipleRange":
　　　　　　　　　　this.calendar.SelectionMode = CalendarSelectionMode.MultipleRange;
　　　　　　　　　　;
　　　　　　　　default:
　　　　　　　　　　this.calendar.SelectionMode = CalendarSelectionMode.SingleDate;
　　　　　　　　　　;
　　　　　　}
　　　　}
　　}
}

　　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="红色 3状态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 ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
using .Windows.Browser;
　　
Silverlight20.Control
{
　　public partial CheckBox : UserControl
　　{
　　　　public CheckBox
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　private void Button_Click(object sender, RoutedEventArgs e)
　　　　{
　　　　　　HtmlWindow html = HtmlPage.Window;
　　　　　　html.Alert(.Format("chk1: {0}rnchk2: {1}rnchk3: {2}rnchk4: {3}",
　　　　　　　　chk1.IsChecked, chk2.IsChecked, chk3.IsChecked, chk4.IsChecked));
　　　　}
　　}
}

　　6、ComboBox.xaml

<UserControl x:Class="Silverlight20.Control.ComboBox"
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　<StackPanel HorizontalAlignment="Left">
　　　　
　　　　<!--
　　　　XAML方式构造ComboBox
　　　　-->
　　　　<ComboBox x:Name="cbo" Width="200" Margin="5">
　　　　　　<ComboBoxItem Content="ComboBoxItem1" />
　　　　　　<ComboBoxItem Content="ComboBoxItem2" />
　　　　　　<ComboBoxItem Content="ComboBoxItem3" />
　　　　</ComboBox>
　　　　
　　　　<!--
　　　　后台邦定方式构造ComboBox
　　　　DisplayMemberPath - 数据源中需要被显示出来字段名称
　　　　MaxDropDownHeight - 下拉框最大下拉高度
　　　　-->
　　　　<ComboBox x:Name="cbo2" DisplayMemberPath="Name" MaxDropDownHeight="100" Width="200" Margin="5" />
　　　　
　　</StackPanel>
</UserControl>



　　ComboBox.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Control
{
　　public partial ComboBox : UserControl
　　{
　　　　public ComboBox
　　　　{
　　　　　　InitializeComponent;
　　
　　　　　　BindData;
　　　　}
　　
　　　　void BindData
　　　　{
　　　　　　var source = Data.SourceData;
　　
　　　　　　// 设置 ComboBox 数据源
　　　　　　cbo2.ItemsSource = source.GetData.Take(10);
　　　　}
　　}
}

　　OK

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放