“Longhorn”应用开发部署初探(二)

Longhorn 专栏收录该内容
2 篇文章 0 订阅

作者: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的最左边,其它的按钮依次按水平排列。

http://msdn.microsoft.com/msdnmag/issues/04/01/DevelopingAppsforLonghorn/fig07.gif

图六 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
http://msdn.microsoft.com/msdnmag/issues/04/01/DevelopingAppsforLonghorn/fig08.gif

图七 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定义的,而上下文菜单是动态创建的。
http://msdn.microsoft.com/msdnmag/issues/04/01/DevelopingAppsforLonghorn/fig09.gif

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

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值