WPF初学者指南1-Layout

  WPF大家可能都不会陌生，出来两年了,可是在国内用的人还是比较少的，不过最近MS正在推出windows7它的界面很华丽,主要就是有wpf这个技术来展现。据说在美国很多以前使用flash转播的电视MS都在争取他们开始使用wpf。

  另外大家都在silverlight,其实它也是WPF技术的一部分吧。我之前看了Barber的一系列为初学者写的文章,然后试着去体验了一下,感觉还不错。

   这里先给WPF的初学者介绍一下WPF的Layout,如果你觉得这个对你理解和学习wpf有帮助那么就给我个留言,让我知道这东东对你有帮助,这样我会更加有动力去写其他部分。呵呵。

1.Layout:

  Layout属性是WPF中最重要的部分之一。下面这几部分我就会给大家介绍WPF新的layout有哪些属性。

2.Layout的重要性:

  我觉得layout其实就是个基本的内嵌空白模块当你编写任何WPF程序时,不管你的程序是个Xbap或者是应用程序。使用layout可以让开发者或者是设计人员能够建立好WPF程序复杂的页面显示布局。如果没有layout属性,可以说我们无法实现任何事情。如果你想知道如何使用新的layout属性,那么就继续往下看吧。

  如果你是个做web网页开发的,那么可能下面这些东东对你来说都是一些新东西,但是如果你是做winform开发的,那么你以前肯定碰到过Panel类,可能你还使用过一些Panel的子类,比如FlowLayoutPanel和TableLayoutPanel。你应该也听说过windforms的属性比如Anchor和Dock。是不是很亲切,呵呵,这些东西在WPF中还是很有用的。不过你还有很多新的东西需要学习。对于web开发人员来说有个好消息是XAML文件的语法和XHTML的语法很相似,所以你不会有什么麻烦来创建一些UI界面。

  微软在WPF中增加了一些新的Layout控制来让开发人员使用,很多东西我觉得对于大多数人来说都是新的名词。这篇文章我们主要是关注一下这些新的layout控制,如果你觉得这些东西不够你用,你可以自己去开发一个自己的layout控制。

  在这篇文章中我们将会关注以下几个属性:

• Canvas
• StackPanel
• WrapPanel
• DockPanel
• Grid

   作为初学者,这篇文章当然只是介绍这些layout控件的基本使用,你可以google或者百度一下找到很多这些控件很多其它高级的使用方法。毕竟此文只是对于初学者。

首先我们来看如何使用Canvas.

3.Canvas:

    Canvas是用来控制页面边缘空白的。它是很简单的几个layout控件之一。基本上它就是一个X/Y坐标来设定位置的容器。如果它本身包含子控件,那么子控件必须有以下四个属性来显示在父控件中:

•    Canvas.Left
•    Canvas.Right
•    Canvas.Top
•    Canvas.Bottom

使用这四个属性就可以定位一个控件在父控件Canvas中的位置。这些属性可能让你觉得有点古怪,在.net2.0中根本就是没有这些的。

这里就有个问题,如果我们通过X/Y坐标来确定一个子控件的位置,那么我们如何阻止两个重叠的子控件重叠,如果让塔门区分出来哪个应该显示在上层，哪个在下层级。这些都可以通过一个叫做Canvas.ZIndex只来设定,如果这个值没有设定那么Canvas会通过谁先被添加到Canvas中来确定显示顺序。

下面我们来看个例子。下面这个图片显示了一个Canvas包含两个子控件,它们被存放在CanvasDEMO.xaml文件中。

 

下面是它的XAML文件代码:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF_Tour_Beginners_Layout.CanvasDEMO" x:Name="Window" Title="CanvasDEMO" Width="640" Height="480"> <Canvas Margin="0,0,0,0" Background="White"> <Rectangle Fill="Blue" Stroke="Blue" Width="145" Height="126" Canvas.Left="124" Canvas.Top="122"/> <Ellipse Fill="Green" Stroke="Green" Width="121" Height="100" Panel.ZIndex="1" Canvas.Left="195" Canvas.Top="191"/> </Canvas> </Window>

 在winform中用C#代码来实现这个功能的代码:

Canvas canv = new Canvas(); //add the Canvas as sole child of Window this.Content = canv; canv.Margin = new Thickness(0, 0, 0, 0); canv.Background = new SolidColorBrush(Colors.White); //The Rectangle Rectangle r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Blue); r.Stroke = new SolidColorBrush(Colors.Blue); r.Width = 145; r.Height = 126; r.SetValue(Canvas.LeftProperty, (double)124); r.SetValue(Canvas.TopProperty, (double)122); canv.Children.Add(r); //The Ellipse Ellipse el = new Ellipse(); el.Fill = new SolidColorBrush(Colors.Green); el.Stroke = new SolidColorBrush(Colors.Green); el.Width = 121; el.Height = 100; el.SetValue(Canvas.ZIndexProperty, 1); el.SetValue(Canvas.LeftProperty, (double)195); el.SetValue(Canvas.TopProperty, (double)191); canv.Children.Add(el);

 

 4.StackPanel:

 StackPanel控件也很容易使用。它主要是通过一个叫做Orientation的属性来设置内容是水平显示还是垂直显示。下面我们看个例子吧,是一个StackPanel包含两个button控件,这个文件叫做StackPanelDEMO.xaml。图片如下:

 

下面是在XAML中的代码:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF_Tour_Beginners_Layout.StackPanelDEMO" x:Name="Window" Title="StackPanelDEMO" WindowStartupLocation="CenterScreen" Width="640" Height="480"> <StackPanel Margin="0,0,0,0" Background="White" Orientation="Vertical"> <Button Content="Im Top of Stack"/> <Button Content="Im Bottom Of Stack"/> </StackPanel> </Window>

使用C#来实现这个功能的代码:

StackPanel sp = new StackPanel(); //add the StackPanel as sole child of Window this.Content = sp; sp.Margin = new Thickness(0, 0, 0, 0); sp.Background = new SolidColorBrush(Colors.White); sp.Orientation = Orientation.Vertical; //Button1 Button b1 = new Button(); b1.Content = "Im Top of Stack"; sp.Children.Add(b1); //Button2 Button b2 = new Button(); b2.Content = "Im Bottom of Stack"; sp.Children.Add(b2);  

 

5.WrapPanel:

这个控件也很好使用,我们就直接给出个例子来看它的效果吧:

它的代码我保存在WrapPanelDEMO.xaml 中:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF_Tour_Beginners_Layout.WrapPanelDEMO" x:Name="Window" Title="WrapPanelDEMO" WindowStartupLocation="CenterScreen" Width="640" Height="480"> <WrapPanel Margin="0,0,0,0" Background="White"> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> <Rectangle Margin="10,10,10,10" Fill ="Blue" Width="60" Height="60"/> </WrapPanel> </Window>

 那么用C#来实现这个功能如何做到:

WrapPanel wp = new WrapPanel(); //add the WrapPanel as sole child of Window this.Content = wp; wp.Margin = new Thickness(0, 0, 0, 0); wp.Background = new SolidColorBrush(Colors.White); //Add Rectangles Rectangle r; for (int i = 0; i <= 10; i++) { r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Blue); r.Margin = new Thickness(10, 10, 10, 10); r.Width = 60; r.Height = 60; wp.Children.Add(r); }

 6.DockPanel:

DockPanel控件是layout控件中最有用的之一。我们可能会把它作为每个新窗体的最基本的layout控件。我们试着去在一个form中使用两个DockPanel来显示,一个停靠在上边,一个停靠在下边。DockPanel有很多属性可以设置,这里只是使用了它的基本属性。

一个比较重要的我们下面就会用的属性是DockPanel.Dock。它的值可以设置为Top,Bottom,Right,Left,来确定这个panel是停靠在父容器的什么位置。下面我们看个例子吧:

 

xaml文件代码:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF_Tour_Beginners_Layout.DockPanelDEMO" x:Name="Window" Title="DockPanelDEMO" WindowStartupLocation="CenterScreen" Width="640" Height="480"> <DockPanel Width="Auto" Height="Auto" LastChildFill="True"> <Rectangle Fill="CornflowerBlue" Stroke="CornflowerBlue" Height="20" DockPanel.Dock="Top"/> <Rectangle Fill="Orange" Stroke="Orange" /> </DockPanel> </Window>

在C#中实现的代码:

 DockPanel dp = new DockPanel(); dp.LastChildFill = true; //this is the same as Width="Auto" in XAML, as long as its not applied to a GridColumn Width/Height /GridRow Width/Height which has special classes dp.Width = Double.NaN; dp.Height = Double.NaN; //add the WrapPanel as sole child of Window this.Content = dp; //Add Rectangles Rectangle rTop = new Rectangle(); rTop.Fill = new SolidColorBrush(Colors.CornflowerBlue); rTop.Stroke = new SolidColorBrush(Colors.CornflowerBlue); rTop.Height = 20; dp.Children.Add(rTop); rTop.SetValue(DockPanel.DockProperty,Dock.Top); Rectangle rFill = new Rectangle(); rFill.Fill = new SolidColorBrush(Colors.Orange); rFill.Stroke = new SolidColorBrush(Colors.Orange); dp.Children.Add(rFill);

7.Grid:

Gird在wpf的layout中的地位至关重要,它有点像html中的table控件,可以把整个form分割成很多行很多列的一个类似于表格的东西,它的四个重要属性:

• Grid.Column
• Grid.Row
• Grid.ColumnSpan
• Grid.RowSpan

前面两个属性是行列,后面是说明一个空间占据几个行几个列,下面的例子比较容易说明这个问题:

它的代码如下：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WPF_Tour_Beginners_Layout.GridDEMO" x:Name="Window" Title="GridDEMO" WindowStartupLocation="CenterScreen" Width="640" Height="480"> <Grid Width="Auto" Height="Auto" > <Grid.ColumnDefinitions> <ColumnDefinition Width="40"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <Rectangle Fill="Aqua" Grid.Column="0" Grid.Row="0"/> <Rectangle Fill="Plum" Grid.Column="1" Grid.ColumnSpan="2"/> </Grid> </Window>

C#中实现这个功能:

Grid grid = new Grid(); grid.Width = Double.NaN; //this is the same as Width="Auto" in XAML grid.Height = Double.NaN; //this is the same as Height="Auto" in XAML //add the Grid as sole child of Window this.Content = grid; //col1 ColumnDefinition cd1 = new ColumnDefinition(); cd1.Width = new GridLength(40); grid.ColumnDefinitions.Add(cd1); //col2 ColumnDefinition cd2 = new ColumnDefinition(); cd2.Width = new GridLength(1, GridUnitType.Star); grid.ColumnDefinitions.Add(cd2); //col3 ColumnDefinition cd3 = new ColumnDefinition(); cd3.Width = new GridLength(2, GridUnitType.Star); grid.ColumnDefinitions.Add(cd3); //Now add the cells to the grid Rectangle r1c1 = new Rectangle(); r1c1.Fill = new SolidColorBrush(Colors.Aqua); r1c1.SetValue(Grid.ColumnProperty, 0); r1c1.SetValue(Grid.RowProperty, 0); grid.Children.Add(r1c1); Rectangle r1c23 = new Rectangle(); r1c23.Fill = new SolidColorBrush(Colors.Plum); r1c23.SetValue(Grid.ColumnProperty, 1); r1c23.SetValue(Grid.ColumnSpanProperty, 2); grid.Children.Add(r1c23);

上面这几个layout的控件学会了,你就可以试着把他们组合到一块设计自己的一个wpf程序,我再给大家个组合到一块的例子:

XAMl文件:

 <Window x:Class="WPF_Tour_Beginners_Layout.PuttingItAllTogether" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStartupLocation="CenterScreen" Title="PuttingItAllTogether" Width="640" Height="480" > <DockPanel Width="Auto" Height="Auto" LastChildFill="True"> <!--Top Menu Area--> <Menu Width="Auto" Height="20" Background="#FFA9D1F4" DockPanel.Dock="Top"> <!-- File Menu --> <MenuItem Header="File"> <MenuItem Header="Save"/> <Separator/> <MenuItem Header="Exit"/> </MenuItem> <!-- About Menu --> <MenuItem Header="Help"> <MenuItem Header="About"/> </MenuItem> </Menu> <!--Bottom Status Bar area, declared before middle section, as I want it to fill entire bottom of Window, which it wouldn't if there was a Left docked panel before it --> <StackPanel Width="Auto" Height="31" Background="#FFCAC5C5" Orientation="Horizontal" DockPanel.Dock="Bottom"> <Label Width="155" Height="23" Content="Status Bar Message...." FontFamily="Arial" FontSize="10"/> </StackPanel> <!--Left Main Content area--> <StackPanel Width="136" Height="Auto" Background="White"> <Button Margin="5,5,5,5" Width="Auto" Height="26" Content="button1"/> <Button Width="126" Height="26" Content="button2" Margin="5,5,5,5"/> <Button Width="126" Height="26" Content="button3" Margin="5,5,5,5"/> </StackPanel> <!--Right Main Content area, NOTE HOW this Grid is the last child so takes all the remaining room --> <Grid Width="Auto" Height="Auto" Background="#FFCC9393"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/> <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/> <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/> <Rectangle Fill="Aqua" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/> </Grid> </DockPanel> </Window>

 

是不是挺酷的。呵呵。我也写的手都有点抖了。后续会继续看barber的文章然后给大家总结出来一些资料。可能你看完这个文章对xaml很想深入了解,下一篇就会介绍xaml和它后面的代码文件C#或VB的关系,以及如何很好的使用它。