作者： winsome_zhong（翻译）    来自:网络
     作者：Dino Esposito
  翻译：winsome zhong
  
  
  三、XAML语言
   XAML由四大类元素组成－－－－面板（panels）、交互式控件（interactive controls）、文档对象（documents）和图形（graphic shapes）。另外边框（Border）元素也很重要，虽然它不属于四大类元素。在XAML中，Panel负责管理页面布局，并且是其他元素的容器，控制它们的大小、位置及内容的绘制方式等。Longhorn内建了6个Panel类－－Canvas， DockPanel, FlowPanel, GridPanel, Table和TextPanel。但是开发人员可以创建自己的Panel，定制其绘制行为。
   Canvas是面板中唯一支持坐标的，它上面的控件元素从一个固定的位置开始绘制，具有特定的尺寸。如果两个控件元素重叠，后绘制的那个将覆盖掉前一个。注意坐标是相对于Canvas的，（0，0）代表Canvas的左上角。下面是一个Canvas对象的例子：
   <Canvas xmlns="http://schemas.microsoft.com/2003/xaml"
   Height="600" Width="800">
   <Border Background="red"
   Canvas.Top="0px" Canvas.Left="0px"
   Height="100px" Width="100px" />
   <Border Background="green "
   Canvas.Top="100px" Canvas.Left="100px"
   Height="100px" Width="100px" />
   <Border Background="blue"
   Canvas.Top="50px" Canvas.Left="50px"
   Height="100px" Width="100px" />
   </Canvas>
   而DockPanel却不是这样，DockPanel上的所有控件元素彼此都是垂直或水平地dock在一起的，DockPanel上不需要坐标，控件得位置是相对于上一个控件的。DockPanel是创建工具栏这类东西的理想的选择。例如：
  <Border xmlns="http://schemas.microsoft.com/2003/xaml" Background="black" >
   <DockPanel>
   <Button DockPanel.Dock="Left" Width="50px" Height="32px">
   Open
   </Button>
   <Button DockPanel.Dock="Left" Width="50px" Height="32px">
   Save
   </Button>
   <Button DockPanel.Dock="Left" Width="50px" Height="32px">
   Print
   </Button>
   </DockPanel>
  </Border>
  结果如图6，第一个按钮在Panel的最左边，其它的按钮依次按水平排列。
  
  
  图六 Button Layout
  
  
   FlowPanel又是另一种方式，它使上面的控件沿着一个方向一个接一个的排列，当控件超出了Panel的宽度或高度，你可以设置让它折叠显示到下一行或把超出的部分截掉不显示。下面这个例子演示了FlowPanel是如何折叠显示的。FlowPanel上有4个方块（其实是Border），它们的width之和大于FlowPanel的width。因此不能在一行显示所有的方块，最后一个方块被显示在第二行。FlowPanel默认的排列方向是从左至右，从上到下：
  <FlowPanel Width="250px" Height="250px">
   <Border Background="red" Width="75px" Height="75px" />
   <Border Background="green" Width="75px" Height="75px" />
   <Border Background="blue" Width="75px" Height="75px" />
   <Border Background="orange" Width="75px" Height="75px" />
  </FlowPanel>
   GridPanel是一个轻量级的布局管理器，它把上面的控件像网格一样进行布局，从而构造出一个简单的表格。GridPanel允许你在行或列上放上任意的控件，组合成一个控件矩阵。但是GridPanel的功能还是比较简单，要构造更为高级的表格，你可以使用Table panel。Table panel用于显示一些复杂的表格数据，它支持一些高级的表格特性比如Header、Footer、Column、Row Group等。
   最后，TextPanel用于优化文本的显示，它支持一些比较复杂的文本格式。但是，对于基本的文本显示，用Text可能是一个更好的选择，Text用于显示没有格式的文本。
   所有复责与用户交互的控件都在MSAvalon.Windows.Controls命名空间中。比如Button、ComboBox、ListBox、CheckBox、ContextMenu、RadioButtonList和PageViewer等。交互式控件的基类式Control，它提供了控件公用的属性和方法。比较特别的是PageViewer,这个控件用于查看在线文档，并且封装了分页和导航功能。下面的脚本生成一个PageViewer，它把Source属性中指定的文件中的文本分页显示出来。
  <DockPanel ID="root" xmlns="http://
   schemas.microsoft.com/2003/xaml/"
   xmlns:def="Definition">
   <Text DockPanel.Dock="Top">See a
   PageViewer control in action below.
   </Text>
   <PageViewer DockPanel.Dock="Top"
   Source="Sample.xaml" Height="80%" Width="80%"/>
   <Button DockPanel.Dock="Top" Width="50%">OK</Button>
  </DockPanel>
  运行结果如图7
  
  
  图七 Page Viewer
  
  有意思的是Page Viewer不能显示纯粹的Txt、RTF或HTML，至少目前是这样。PageViewer的Source属性中指定的文件必须是一个XAML文件，该文件中被显示的ASCII文本还必须用支持分页的Avalon控件包裹（Avalon是Longhorn新的显示子系统的代号），比如TextPanel。把下面这段代码存为sample.xaml，做为上个例子中PageViewer显示的文件（注意其中的xmlns是必须的）：
  <TextPanel ID="root" xmlns="http://schemas.microsoft.com/2003/xaml/">
   text to show goes here
  </TextPanel>
   命名空间MSAvalon.Windows.Documents中的类负责文档的显示。这些类的集合看上去像HTML标签的扩充，包括Block, Column, Heading, Footer，ColumnGroup, RowGroup, HyperLink和List这些类。
   Longhorn使用Windows矢量图形（Windows Vector Graphics，简称WVG）来绘制图形内容，WVG比起GDI和GDI+来有很多优点,它是一个基于XML的图形系统，便于使用和重用，对SVG爱好者而言这是个好消息。WVG预定义的图形有Ellipse, Line, Path, Polygon, Polyline, 和Rectangle。它们都是Shape的子类。Shape可以倾斜、旋转和透明化。除了可以像以前一样使用纯色来作为背景外，你还可以指定渐进色的背景。下面这个例子使用水平渐进色来填充一个椭圆，从红色开始最后过渡到蓝色：
  <Rectangle Fill="HorizontalGradient Red Blue"
   RectangleLeft="150" RectangleTop="150"
   Width="50" Height="50">
  </Rectangle>
  
  四、构建一个范例
   使用XAML语言，你可以快速高效地设计用户界面。我敢保证到Longhorn发布时，许多完全支持所见及所得的XAML开发工具会被更新或被开发出来,目前发布的预览版的Whidbey中已经包括了一部分这方面的扩展。下面让我们来构建一个范例程序。你将看到这和编写Windows窗体应用并没有太大的不同，而且你也将马上惊奇的发现你已掌握的.NET的技能可以很好的被应用在Longhorn上。这个程序的用户界面如图8所示，包括一个文本筐和一个上下文菜单。文本筐是用XAML定义的，而上下文菜单是动态创建的。
  
  
  图八 Context Menu
  
  程序源码如下：
  <Window
   xmlns="http://schemas.microsoft.com/2003/xaml"
   xmlns:def="Definition"
   def:Class="Application2.Window1"
   def:CodeBehind="Window1.xaml.cs"
   Text="Application2" Visible="True">
  
   <FlowPanel DockPanel.Dock="Fill">
   <TextBox ID="input" Margin="10,10"
   Background="LightCyan"
   BorderBrush="black" FontFamily="verdana"
   FontSize="16"
   BorderThickness="1"
   ContextMenuEvent="OnContextMenu"
   Height="40" Width="360">Right-click to see a
   context menu</TextBox>
   </FlowPanel>
  </Window>
  
  // C# source file for the application
  
  namespace MsdnLHSample
  {
   public partial class MyApp : Application
   {
   void AppStartingUp(object sender, StartingUpCancelEventArgs e)
   {
   Window mainWindow = new Window1();
   mainWindow.Show();
   }
   }
  }
  
  // C# source file for the window
  
  using System;
  using MSAvalon.Windows;
  using MSAvalon.Windows.Media;
  using MSAvalon.Windows.Controls;
  using MSAvalon.Windows.Documents;
  using MSAvalon.Windows.Navigation;
  using MSAvalon.Windows.Shapes;
  using MSAvalon.Windows.Data;
  
  namespace MsdnLHSample
  {
  
   // input is the textbox declared in the XAML
  
   public partial class Window1 : Window
   {
   private void OnContextMenu(object sender, ContextMenuEventArgs e)
   {
   CreateMenu();
   }
  
   private void CreateMenu()
   {
   ContextMenu cm = new ContextMenu();
   cm.FontFamily = "verdana";
   cm.Background = Brushes.LightYellow;
  
   MenuItem mi0 = new MenuItem();
   mi0.Header = "Lower case";
   mi0.FontSize = new FontSize(16);
   mi0.Click += new ClickEventHandler(LowerCase);
  
   cm.Items.Add(mi0);
  
   MenuItem mi1 = new MenuItem();
   mi1.FontSize = new FontSize(16);
   mi1.Header = "Upper case";
   mi1.Click += new ClickEventHandler(UpperCase);
   cm.Items.Add(mi1);
  
   MenuItem mi2 = new MenuItem();
   mi2.Header = "Select All";
   mi2.FontSize = new FontSize(16);
   mi2.Click += new ClickEventHandler(SelectAll);
   cm.Items.Add(mi2);
  
  
   input.ContextMenu = cm;
   }
  
   public void LowerCase(Object sender, ClickEventArgs args)
   {
   MenuItem mi = (MenuItem) args.Source;
   ContextMenu menu = (ContextMenu) mi.Parent;
   TextBox thisTextBox = (TextBox) menu.PlacementTarget;
  
   thisTextBox.Text = thisTextBox.Text.ToLower();
   }
  
   public void UpperCase(Object sender, ClickEventArgs args)
   {
   MenuItem mi = (MenuItem)args.Source;
   ContextMenu menu = (ContextMenu)mi.Parent;
   TextBox thisTextBox = (TextBox)menu.PlacementTarget;
  
   thisTextBox.Text = thisTextBox.Text.ToUpper();
   }
  
   public void SelectAll(Object sender, ClickEventArgs args)
   {
   MenuItem mi = (MenuItem)args.Source;
   ContextMenu menu = (ContextMenu)mi.Parent;
   TextBox thisTextBox = (TextBox)menu.PlacementTarget;
  
   thisTextBox.SelectAll();
   }
  
   }
  }
   前面提到过Longhorn中所有的应用程序都是Application类的一个实例。这个对象是Longhorn应用模型的核心。但是Application对象只提供了一些基本的功能，一般只用于一些低级的、不需要导航功能的程序。实际上大部分Longhorn应用程序使用的是Application的一个子类－－NavigationApplication，这个对象增加了对导航的支持。NavigationApplication支持大量的属性、方法和事件，这使你可以把一大堆的XAML Page组合到一个应用程序中。做一个这样的比较可能更清楚些：基于Application类的Longhorn应用程序类似于Win32中基于对话筐的程序。而基于NavigationApplication的，可导航的的Longhorn程序则相当于一个完整的Win32程序，它包括众多的窗体，一起完成程序的功能。下面是一个如何在Page中导航的例子：
  myApp = NavigationApplication.Current;
  win = (Navigation.NavigationWindow) myApp.Windows[0];
  ......
  private void Button_Back(Object sender, ClickEventArgs e)
  {
   // If possible, go to the previous window
   if(win.CanGoBack())
   win.GoBack();
  }
   可以通过Application（或NavigationApplication）的静态属性Current获得application对象的引用。前面的例子还演示了如何从堆栈中获取对第一个窗体的引用。在Button_Back事件中首先检查第一个窗体对象是否存在，如果存在就跳转过去。
   下面的例子演示了怎样通过继承NavigationApplication并覆盖其OnStartingUp方法来定制程序启动时的行为：
  public class MyApp : NavigationApplication
  {
   NavigationWindow win;
   ......
   protected override void OnStartingUp(StartingUpCancelEventArgs e)
   {
   win = new NavigationWindow();
   // Add elements to the window
   ......
   navWin.Show();
   }
   ......
  }
  
   让我们再回到图8的例子。根据我们刚刚的讨论，本例你既可以用Application作为基类，也可以用NavigationApplication，因为这只是一个单窗体的应用程序,我使用的是Application，程序中覆盖了Application的AppStartingUp方法，并且定义了几个事件处理器。AppStartingUp是进行系统初始化工作的理想地点。在AppStartingUp中我们创建了本例的主窗体，窗体中的文本筐在XAML中描述，文本筐被绑定到ContextMenuEvent事件，当用户在文本筐右击鼠标时触发该事件，创建一个上下文菜单对象（ContextMenu）。上下文菜单使用图形化设计器设计，通过选择背景色，前景色，边框，字体等等，你可以轻易的定制菜单（以及其他控件）的外观。这在Wind32编程中这种定制需要许多编程工作，而在.NET Framework中，托管代码封装了大部分的属性，用户可以控制的属性比较少。
   菜单项使用MenuItem类来创建，而将它们绑定到事件处理器的方法几乎是和.NET中一样的：
  mia = new MenuItem[3];
  for (int i=0; i<3; i++)
  {
   mia[i] = new MenuItem();
   cm.Items.Add(mia[i]);
   mia[i].Foreground = Brushes.Black;
  }
  mia[0].Header = "Lower Text";
  mia[1].Header = "Upper case";
  mia[2].Header = "Select all";
  mia[0].Click += new ClickEventHandler(LowerCase);
  mia[1].Click += new ClickEventHandler(UpperCase);
  mia[2].Click += new ClickEventHandler(SelectAll);
  
  
  当一个菜单项被点击时，相应的事件处理器被执行，事件处理器的第一个参数被赋值为一个指向菜单项的引用：
  public void LowerCase(Object sender, ClickEventArgs args)
  {
   MenuItem mi = (MenuItem) args.Source;
   ContextMenu menu = (ContextMenu) mi.Parent;
   TextBox thisTextBox = (TextBox) menu.PlacementTarget;
   thisTextBox.Text = thisTextBox.Text.ToLower();
  }
  为了获取TextBox对象，你必须从结构数中往上追溯。首先，获取MenuItem对象，然后是ContextMenu对象，最后获得ContextMenu的owner：TextBox，这时要修改TextBox对象的内容就轻而易举了。
  
  译后：
   这是我翻译的第一篇技术资料。坦白的说，这不是一篇非常好的文章，应用模型的一个简单介绍，作者却罗嗦了这么长的篇幅，以至于翻完上半部分后我几度有放弃的想法。不过第一篇发表后读者的热情响应倒令我有些意外，于是我不得不对这篇文章重新评估，作为一篇介绍性的资料，作者其实已经尽职了的，虽然罗嗦但却浅鲜易懂，看着轻松的很，比起那些高深却晦涩的自然更受欢迎些了。在第二篇中，我有意的删减了一些内容，也是为大家节省点时间。对于Longhorn的开发，我想以后还会找一些好的文章翻出来给大家共享，也希望能得到大家支持和反馈。
   Winsome
  winsome_zhong@163.com