[索引页]
[源码下载]
[源码下载]
稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox
作者:webabcd
介绍
Silverlight 2.0 控件一览:Border, Button, Calendar, Canvas, CheckBox, 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>
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>
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() + " 被单击了");
}
}
}
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>
</StackPanel>
</UserControl>
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>
</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;
}
}
}
}
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轴 间的距离,左上角为原点
-->
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轴 间的距离,左上角为原点
-->