随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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
[源码下载]