稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox

稳扎稳打Silverlight(3) - 2.0控件之Border,Button,Calendar,Canvas,CheckBox,ComboBox

作者： webabcd

介绍
Silverlight 2.0 控件一览：Border,ComboBox

在线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 - 继承自 System.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 - 触发单击事件的类型 [System.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 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 Button : UserControl

{

public Button()

{

InitializeComponent();

}

private void Button_Click(object sender, RoutedEventArgs e)

{

HtmlWindow html = HtmlPage.Window;

html.Alert(((System.Windows.Controls.Button)sender).Tag.ToString() + " 被单击了");

}

3、Calendar.xaml

<!--

Calendar控件的命名空间和其他控件一样，都是在System.Windows.Controls下

但是其是在System.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-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >

< StackPanel HorizontalAlignment ="Left" >

< TextBox x:Name ="txtMsg" Margin ="5" />

<!--

SelectedDatesChanged - 选中日期后所触发的事件

displayDateEnd - 此日期之后的日期不予显示

displayDateStart - 此日期之前的日期不予显示

FirstDayOfWeek - 控件所显示的每星期的第一天为星期几 [System.DayOfWeek枚举]

displayMode - 控件的显示模式 [System.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 ="可选连续日期（shift）" Margin ="5"

Checked ="selectionMode_Changed" />

< RadioButton GroupName ="selectionMode" x:Name ="MultipleRange" Content ="可选多个日期（ctrl）" Margin ="5"

Checked ="selectionMode_Changed" />

</ StackPanel >

</ UserControl >

Calendar.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;

namespace Silverlight20.Control

{

public partial class 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.ToString("yyyy-MM-dd");

this.txtMsg.Text += " ";

}

private void CheckBox_Checked(object sender, RoutedEventArgs e)

{

if (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 - 可以选择多个日期，连续日期（Shift键配合）

// CalendarSelectionMode.MultipleRange - 可以选择多个日期，任意日期（Ctrl键配合）

// CalendarSelectionMode.SingleDate - 只能选择一个日期

switch (((System.Windows.Controls.RadioButton)sender).Name)

{

case "None":

this.calendar.SelectionMode = CalendarSelectionMode.None;

break;

case "SingleRange":

this.calendar.SelectionMode = CalendarSelectionMode.SingleRange;

break;

case "MultipleRange":

this.calendar.SelectionMode = CalendarSelectionMode.MultipleRange;

break;

default:

this.calendar.SelectionMode = CalendarSelectionMode.SingleDate;

break;

}

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 >

</ 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));

}

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 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;

namespace Silverlight20.Control

{

public partial class ComboBox : UserControl

{

public ComboBox()

{

InitializeComponent();

BindData();

}

void BindData()

{

var source = new Data.sourceData();

// 设置 ComboBox 的数据源

cbo2.ItemsSource = source.GetData().Take(10);

}

OK
[源码下载]

稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox

相关推荐