稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox

Silverlight 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

示例

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