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

系列文章导航：

稳扎稳打Silverlight(1) - 1.0实例之电子表

稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)

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

介绍
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”字形 
            None - 无
        -->
        <Button DataContext="我是Button" Content="我是Button" Cursor="Wait" Click="Button_Click" Margin="5" />

        <!--
        IsEnabled - 按钮是否有效
        -->
        <Button DataContext="无效Button" Content="无效Button" IsEnabled="False" Click="Button_Click" Margin="5" />

        <!--
        Button.Content - 按钮上显示的内容
        ClickMode - 触发单击事件的类型 [System.Windows.Controls.ClickMode枚举]
            ClickMode.Press - 鼠标左键单击
            ClickMode.Release - 鼠标左键单击并放开
            ClickMode.Hover - 鼠标经过
        -->
        <Button DataContext="图片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).DataContext.
ToString() + " 被单击了");
        }
    }
}