TOC

This article has been localized into Chinese by the community.

杂项控件:

Border控件

边界(Border)控件是一个装饰控件,可以用来添加一个边界,一个背景或者两者一起,以及其他的一些元素。由于WPF 的面板(Panels)并不支持在其边缘添加边界,边界控件可以帮你实现,诸如环绕面板添加一个边界的操作。

下面给你看一个有关使用边界控件的简单例子。

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="170" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

边界并不会显示出来,除非你为它定义一个 背景(Background)或者 边界刷(BorderBrush)和 边界宽度(BorderThickness)。因此,我在例子中添加了这些属性。

圆角边界

边界控件最好的一个特点之一就是可以轻松的设置圆角。请看修改后的例子,边界的顶角现在变成了圆角:

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="8,8,3,3">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

只需添加一个 CornerRadius 属性即可。它可以只定义一个特定值,并应用于全部四个角。也可以像例子中我做的那样,按照右上、左上和右下、左下分辨定义不同的值。

边界颜色/宽度

上面例子中的边界看起来非常的分散,这时我们就可以定义颜色和/或宽度来改变这种状况。边界宽度(BorderThickness )属性是 Thickness类型的,因此你可以通过单独赋值来分别控制左右边界以及上下边界的宽度。

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border Background="GhostWhite" BorderBrush="DodgerBlue" BorderThickness="1,3,1,5">
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

边界背景

背景属性的类型是画刷(Brush),画刷又为其提供了多种可能性。在最初的例子中,你可以很容易的使用一种颜色做为背景,但是实际上你也可以实现渐变色,这也不是很难:

<Window x:Class="WpfTutorialSamples.Misc_controls.BorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="BorderSample" Height="175" Width="200">
    <Grid Margin="10">
		<Border BorderBrush="Navy" BorderThickness="1,3,1,5">
			<Border.Background>
				<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
					<GradientStop Color="LightCyan" Offset="0.0" />
					<GradientStop Color="LightBlue" Offset="0.5" />
					<GradientStop Color="DarkTurquoise" Offset="1.0" />
				</LinearGradientBrush>
			</Border.Background>
			<StackPanel Margin="10">
				<Button>Button 1</Button>
				<Button Margin="0,10">Button 2</Button>
				<Button>Button 3</Button>
			</StackPanel>
		</Border>
	</Grid>
</Window>

在这个例子中,我为边界的背景定义了一个LinearGradientBrush并且得到了一个更适合的边界颜色。LinearGradientBrush 的使用并不是很容易看懂,因此我会在之后的章节中解释,包括其他的画刷类型,但是现在你可以尝试改变例子中的值来查看结果。


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!