穩紮穩打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，如需轉載請自行聯系原作者