稳扎稳打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, 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 >

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 >
        
     </ 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 >
        
     </ 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
[源码下载]