稳扎稳打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://webabcd.blog.51cto.com/1787395/342779  


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