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

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引页]</a>

<a href="http://down.51cto.com/data/100302">[源码下载]</a>

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

介绍

Silverlight 2.0 控件一览：Border, Button, Calendar, Canvas, CheckBox, ComboBox 

在线DEMO

示例

1、Border.xaml

&lt;UserControl x:Class="Silverlight20.Control.Border" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;!-- 

                BorderThickness - 边框的宽度（像素值：上下左右；左右,上下；左,上,右,下） 

                BorderBrush - 边框的颜色 

                CornerRadius - 边框角的半径 

                --&gt; 

                &lt;Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Width="120" Margin="5"&gt; 

                        &lt;TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" /&gt; 

                &lt;/Border&gt; 

                Border.BorderBrush - 继承自 System.Windows.Media.Brush 的对象 

                &lt;Border BorderThickness="3" CornerRadius="10" Width="120" Margin="5"&gt; 

                        &lt;Border.BorderBrush&gt; 

                                &lt;ImageBrush ImageSource="http://silverlight.net/Themes/silverlight/images/logo.jpg" /&gt; 

                        &lt;/Border.BorderBrush&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

2、Button.xaml

&lt;UserControl x:Class="Silverlight20.Control.Button" 

        &lt;StackPanel HorizontalAlignment="Left" Width="400"&gt; 

                Content - 按钮上显示的内容 

                Click - 按钮的单击事件 

                Cursor - 鼠标移动到按钮上面时，鼠标指针的样式 

                        Arrow - 箭头 

                        Hand - 手形    

                        Wait - 沙漏 

                        IBeam - “I”字形    

                        Stylus - 点 

                        Eraser - 橡皮 

                        None - 无 

                Padding - 容器内的内容与容器边缘的填充距离（像素值：上下左右；左右,上下；左,上,右,下） 

                &lt;Button Tag="我是Button" Content="我是Button" Cursor="Eraser" Click="Button_Click" Padding="5" Margin="5" /&gt; 

                IsEnabled - 按钮是否有效 

                &lt;Button Tag="无效Button" Content="无效Button" IsEnabled="False" Click="Button_Click" Margin="5" /&gt; 

                Button.Content - 按钮上显示的内容 

                ClickMode - 触发单击事件的类型 [System.Windows.Controls.ClickMode枚举] 

                        ClickMode.Press - 鼠标左键单击 

                        ClickMode.Release - 鼠标左键单击并放开 

                        ClickMode.Hover - 鼠标经过 

                &lt;Button Tag="图片Button" ClickMode="Release" Click="Button_Click" Margin="5"&gt; 

                        &lt;Button.Content&gt; 

                                &lt;Image Source="/Silverlight20;component/Images/Logo.jpg" /&gt; 

                        &lt;/Button.Content&gt; 

                &lt;/Button&gt; 

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

&lt;!-- 

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

但是其是在System.Windows.Controls.dll程序集中定义的 

所以要引入相应的xml命名空间 

--&gt; 

&lt;UserControl x:Class="Silverlight20.Control.Calendar" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"&gt; 

                &lt;TextBox x:Name="txtMsg" Margin="5"    /&gt; 

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

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

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

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

                DisplayMode - 控件的显示模式 [System.Windows.Controls.DisplayMode枚举] 

                        DisplayMode.Month - 标题显示年月，内容显示日期。默认值 

                        DisplayMode.Year - 标题显示年，内容显示月 

                        DisplayMode.Decade - 标题显示一个十年的区间，内容显示年 

                IsTodayHighlighted - 是否高亮显示今天的日期 

                &lt;basics:Calendar x:Name="calendar" Margin="5" FirstDayOfWeek="Monday" 

                        SelectedDatesChanged="calendar_SelectedDatesChanged"&gt; 

                &lt;/basics:Calendar&gt; 

                &lt;StackPanel Orientation="Horizontal"&gt; 

                        &lt;CheckBox Content="禁止选择今天以前的日期" Margin="5" 

                                Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" /&gt; 

                        &lt;RadioButton GroupName="selectionMode" x:Name="SingleDate" Content="可选单一日期" Margin="5"                                

                                Checked="selectionMode_Changed" /&gt; 

                        &lt;RadioButton GroupName="selectionMode" x:Name="None" Content="不可选日期" Margin="5"                                

                        &lt;RadioButton GroupName="selectionMode" x:Name="SingleRange" Content="可选连续日期（shift）" Margin="5"                                

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

                &lt;/StackPanel&gt; 

Calendar.xaml.cs

        public partial class Calendar : UserControl 

                public Calendar() 

                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 &amp;&amp; this.calendar.SelectedDate &lt; 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; 

                                case "MultipleRange": 

                                        this.calendar.SelectionMode = CalendarSelectionMode.MultipleRange; 

                                default: 

                                        this.calendar.SelectionMode = CalendarSelectionMode.SingleDate; 

4、Canvas.xaml

&lt;UserControl x:Class="Silverlight20.Control.Canvas" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Left"&gt; 

        &lt;!-- 

        Canvas - 绝对布局模式 

                Canvas.Left - 与上一层 Canvas 的 Y轴 间的距离，左上角为原点 

                Canvas.Top - 与上一层 Canvas 的 X轴 间的距离，左上角为原点 

        --&gt; 

        &lt;Canvas Background="Red" Width="100" Height="100"&gt; 

                &lt;Canvas Background="Green" Width="100" Height="100" Canvas.Left="120" Canvas.Top="120" &gt; 

                        &lt;TextBlock Text="TextBlock" Canvas.Top="20" /&gt; 

                &lt;/Canvas&gt; 

        &lt;/Canvas&gt; 

5、CheckBox.xaml 

&lt;UserControl x:Class="Silverlight20.Control.CheckBox" 

        &lt;StackPanel&gt; 

                IsChecked - 是否被选中 

                &lt;CheckBox x:Name="chk1" Content="我是CheckBox" IsChecked="False" Margin="5" /&gt; 

                IsThreeState - 是否是 有3个状态 的CheckBox 

                        false - 通常的两状态。默认值 

                        true - 有3个状态，分别为：true, false, null。也就是说 CheckBox.IsChecked 是 bool? 类型 

                &lt;CheckBox x:Name="chk2" Content="红色的三状态的CheckBox" Background="Red" IsThreeState="True" Margin="5" /&gt; 

                IsEnabled - CheckBox是否有效 

                &lt;CheckBox x:Name="chk3" Content="无效的CheckBox" IsEnabled="False" Margin="5"/&gt; 

                CheckBox.Content - CheckBox所对应的内容 

                Checked - 被选中后所触发的事件 

                Unchecked - 被取消选中后所触发的事件 

                Click - 被单击后所触发的事件 

                &lt;CheckBox x:Name="chk4" Checked="Button_Click" Margin="5"&gt; 

                        &lt;CheckBox.Content&gt; 

                                &lt;Image Source="/Silverlight20;component/Images/Logo.jpg" Width="100" /&gt; 

                        &lt;/CheckBox.Content&gt; 

                &lt;/CheckBox&gt; 

                &lt;Button Content="各个CheckBox的选中状态" Width="200" HorizontalAlignment="Left" Click="Button_Click" Margin="5" /&gt; 

CheckBox.xaml.cs

        public partial class CheckBox : UserControl 

                public CheckBox() 

                        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

&lt;UserControl x:Class="Silverlight20.Control.ComboBox" 

                XAML方式构造ComboBox 

                &lt;ComboBox x:Name="cbo" Width="200" Margin="5"&gt; 

                        &lt;ComboBoxItem Content="ComboBoxItem1" /&gt; 

                        &lt;ComboBoxItem Content="ComboBoxItem2" /&gt; 

                        &lt;ComboBoxItem Content="ComboBoxItem3" /&gt; 

                &lt;/ComboBox&gt; 

                后台邦定方式构造ComboBox 

                DisplayMemberPath - 数据源中需要被显示出来的字段名称 

                MaxDropDownHeight - 下拉框的最大下拉高度 

                &lt;ComboBox x:Name="cbo2" DisplayMemberPath="Name" MaxDropDownHeight="100" Width="200" Margin="5" /&gt; 

ComboBox.xaml.cs

        public partial class ComboBox : UserControl 

                public ComboBox() 

                        BindData(); 

                void BindData() 

                        var source = new Data.SourceData(); 

                        // 设置 ComboBox 的数据源 

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

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源码下载]</a>

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342801，如需转载请自行联系原作者