稳扎稳打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); 
                } 
        } 
}
 
 
 
     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/342801 ,如需转载请自行联系原作者

相关文章
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处。   最近在一直研究Silverlight下的数据绑定控件,发现有这样两个接口IEditableObject 和IEditableCollectionView,记录一下结论,欢迎交流指正。
870 0

热门文章

最新文章

下一篇
无影云桌面