Border 是一个装饰的控件此控件绘制边框及背景在 Border 中只能有一个子控件这个子控件又可以包含多个子控件。Border 的几个重要属性Background:用用一个 Brush 对象来绘制背景 BorderBrush:用一个Brush 对象来绘制边框 BorderThickness:此属性设置 Border 边框的大小CornerRadius:此属性设置 Border 的每一个角圆的半径Padding:此r属性设置 Border 里的内容与边框的之间的间隔。要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window x:ClassWPFLayoutDemo.BorderDEMO xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml TitleBorderDEMO Height300 Width300 Border BorderThickness5 BorderBrushGreen CornerRadius10 BackgroundLightGray HorizontalAlignmentLeft VerticalAlignmentTop Width270 Height250 Canvas BackgroundLightCyan Rectangle Canvas.Left30 Canvas.Top20 Height200 Width200 StrokeBlack StrokeThickness10 FillRed / /Canvas /Border /WindowC#代码实现namespace WPFLayoutDemo { public partial class BorderDEMOCodeBehind : Window { public BorderDEMOCodeBehind() { InitializeComponent(); Border border new Border(); border.Background new SolidColorBrush(Colors.LightGray); border.BorderThickness new Thickness(5); border.BorderBrush new SolidColorBrush(Colors.Green); border.CornerRadius new CornerRadius(15); border.Width 270; border.Height 250; Canvas cnvas new Canvas(); Rectangle rect new Rectangle(); rect.Width 200; rect.Height 200; rect.Fill new SolidColorBrush(Colors.Black); rect.StrokeThickness 10d; cnvas.Children.Add(rect); border.Child cnvas; this.Content border; } } }十二. ScrollViewer通常用户界面中的内容比计算机屏幕的显示区域大大出的部分就会破坏原有的布局。利用 ScrollViewer 控件可以方便地使应用程序中的内容具备滚动功能。这样大出的部分就可以正常显示出来了。常用属性、事件和继承关系见下面类图要实现的效果如下图用XAML和C#实现同一效果XAML代码实现Window x:ClassWPFLayoutDemo.ScrollViewerDEMO xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml TitleScrollViewerDEMO Height300 Width300 Grid ScrollViewer Rectangle Width500 Height500 FillGray/Rectangle /ScrollViewer /Grid /WindowC#代码实现namespace WPFLayoutDemo { public partial class ScrollViewerDEMOCodeBehind : Window { public ScrollViewerDEMOCodeBehind() { InitializeComponent(); ScrollViewer myScrollViewer new ScrollViewer(); myScrollViewer.HorizontalScrollBarVisibility ScrollBarVisibility.Auto; Rectangle myRectangle new Rectangle(); myRectangle.Fill Brushes.Gray; myRectangle.Width 500; myRectangle.Height 500; myScrollViewer.Content myRectangle; this.Content myScrollViewer; } } }十三.布局综合应用前面通过十多个小节讲了一些常用Panel的基本用法那我们这里就简单做一个综合的小例子通过这个例子旨在巩固前面的内容也可以当做一个举一反三的过程。要实现的效果如下图:XAML代码实现Window x:ClassWPFLayoutDemo.PuttingItAllTogether xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml WindowStartupLocationCenterScreen Title布局综合运用 Width640 Height480 DockPanel WidthAuto HeightAuto LastChildFillTrue !--Top Menu Area-- Menu WidthAuto Height20 BackgroundLightGray DockPanel.DockTop !-- File Menu -- MenuItem Header文件 MenuItem Header保存/ Separator/ MenuItem Header退出/ /MenuItem !-- About Menu -- MenuItem Header帮助 MenuItem Header关于本产品/ /MenuItem /Menu !--State -- StackPanel WidthAuto Height31 BackgroundLightGray OrientationHorizontal DockPanel.DockBottom Label Width155 Height23 Content状态栏 FontFamilyArial FontSize10/ /StackPanel !--Left-- StackPanel Width136 HeightAuto BackgroundGray Button Margin5,5,5,5 WidthAuto Height26 Content导航栏/ Button Width126 Height26 Content导航栏 Margin5,5,5,5/ Button Width126 Height26 Content导航栏 Margin5,5,5,5/ /StackPanel !--Right-- Grid WidthAuto HeightAuto BackgroundWhite Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition Width*/ /Grid.ColumnDefinitions Grid.RowDefinitions RowDefinition Height*/ RowDefinition Height*/ /Grid.RowDefinitions Rectangle FillGray Margin10,10,10,10 Grid.Row0 Grid.Column0/ Rectangle FillGray Margin10,10,10,10 Grid.Row0 Grid.Column1/ Rectangle FillGray Margin10,10,10,10 Grid.Row1 Grid.Column0/ Rectangle FillGray Margin10,10,10,10 Grid.Row1 Grid.Column1/ /Grid /DockPanel /Window其实用熟练上面的各个布局控件以后你会发现布局UI是一件非常容易的事遇到一个新的UI你会发现任意一个Panel都可以实现你的需求。当然对于较复杂且对要求很高的UI我们也会自定义一些Panel在下面我们就简单介绍一下自定义布局控件。