Silverlight 的 Border 控件

1、Border.xaml

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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>

 

Border 控件用于在另一元素周围绘制边框或背景。

先看一个简单的例子

Xaml 文件

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightApplication2.MainPage"
	Width="300" Height="150">
  	<Border Background="Coral" Width="250" Margin="12" 
	Padding="10" CornerRadius="30,38,150,26"
	BorderThickness="8 15 10 2" BorderBrush="Aqua">
    	<TextBlock FontSize="12">Text Surrounded by a Border</TextBlock>
	</Border>
</UserControl>

演示效果图：

其中属性说明：

Border.Padding 属性  获取或设置边框与其子对象之间的距离。

FrameworkElement.Margin 属性 获取或设置 FrameworkElement 的外边距。

Border.CornerRadius 属性 获取或设置边框的角的半径。 上面例子中是按照 topLeft,topRight,bottomRight,bottomLeft 的顺序来设置的。

Border.BorderThickness 属性 获取或设置边框的粗细。默认情况下，四个边的粗细都为 0。 上面例子中是按照 left,top,right,bottom 顺序来设置的：

在如上所示的 XAML 语法中，可以使用空格而不是逗号作为值之间的分隔符。 

Border.BorderBrush 属性 获取或设置用于创建边框的 Brush。

需要注意的是： 

Border 只能包含一个子对象。如果要在多个对象周围放置一个边框，应将这些对象包装到一个容器对象中，例如 StackPanel。

下面的示例就演示了一个如何在 StackPanel 中包含的多个 TextBlock 对象，并在周围放置一个边框。

<Border BorderThickness="5" BorderBrush="Blue" >
    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="One"/>
        <TextBlock Text="Two"/>
        <TextBlock Text="Three"/>
    </StackPanel>
</Border>

我们如果修改其他控件的 ControlTemplate 时，我们就会看到， Border 控件在很多地方都用到了，用于模拟选中的3D效果。这个逻辑的实现很简单，通过修改 Opacity 来实现，下面就是一个简化版的演示，当用户点击文本时，出现一个文本的边框。

Xaml 代码

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightApplication2.MainPage"
	Width="300" Height="150">
 <Grid x:Name="LayoutRoot" >
    <Border x:Name="TextBorder" BorderThickness="10" >
    	<Border.BorderBrush>
        	<SolidColorBrush Color="Red" Opacity="0" />
        </Border.BorderBrush>
        <TextBlock MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" Text="Hello" />
    </Border>  
</Grid>
</UserControl>

C# 代码

private void TextBlock_MouseLeftButtonDown(object sender,
	System.Windows.Input.MouseButtonEventArgs e)
{
	TextBorder.BorderBrush.Opacity = 1;
}

 

参考资料：

Using the Border control in Silverlight 2
http://www.silverlightshow.net/items/Using-the-Border-control-in-Silverlight-2-Beta-1-.aspx

Border 类
http://msdn.microsoft.com/zh-cn/library/system.windows.controls.border(VS.95).aspx

稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307493.html

Show/Hide a Border and other Border fun
http://blogs.msdn.com/silverlight_sdk/archive/2008/07/30/show-hide-a-border-and-other-border-fun.aspx

 

 

Silverlight里的Rectangle与border有啥区别呀？
http://social.microsoft.com/Forums/zh-CN/silverlightzhchs/thread/86581cff-f660-414f-94dc-f4e77a02090a

Silverlight Border Control
http://www.c-sharpcorner.com/UploadFile/raj1979/SilverlightBorder10162008030241AM/SilverlightBorder.aspx

border控件中的一些疑问
http://bbs.blueidea.com/viewthread.php?tid=2957515

2、Button.xaml

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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() + " 被单击了");
        }
    }
}