原文： http://zetcode.com/gui/gtksharp/layout/

在本章中，我们将展示如何在窗口或对话框中布置窗口小部件。

在设计应用的 GUI 时，我们决定要使用哪些小部件以及如何在应用中组织这些小部件。 为了组织窗口小部件，我们使用专门的不可见窗口小部件，称为布局容器。 在本章中，我们将提到Alignment，Fixed，VBox和Table。

Fixed

Fixed容器将子窗口小部件放置在固定位置并具有固定大小。 此容器不执行自动布局管理。 在大多数应用中，我们不使用此容器。 我们在某些专业领域使用它。 例如游戏，使用图表的专用应用，可以移动的可调整大小的组件（如电子表格应用中的图表），小型教育示例。

fixed.cs

  1. using Gtk;
  2. using System;
  4. class SharpApp : Window {
  6.     private Gdk.Pixbuf rotunda;
  7.     private Gdk.Pixbuf bardejov;
  8.     private Gdk.Pixbuf mincol;
  10.     public SharpApp() : base("Fixed")
  11.     {
  12.         SetDefaultSize(300, 280);
  13.         SetPosition(WindowPosition.Center);
  14.         ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40));
  15.         DeleteEvent += delegate { Application.Quit(); };
  17.         try {
  18.             bardejov = new Gdk.Pixbuf("bardejov.jpg");
  19.             rotunda = new Gdk.Pixbuf("rotunda.jpg");
  20.             mincol = new Gdk.Pixbuf("mincol.jpg");
  21.         } catch {
  22.             Console.WriteLine("Images not found");
  23.             Environment.Exit(1);
  24.         }
  26.         Image image1 = new Image(bardejov);
  27.         Image image2 = new Image(rotunda);
  28.         Image image3 = new Image(mincol);
  30.         Fixed fix = new Fixed();
  32.         fix.Put(image1, 20, 20);
  33.         fix.Put(image2, 40, 160);
  34.         fix.Put(image3, 170, 50);
  36.         Add(fix);
  37.         ShowAll();
  38.     }
  40.     public static void Main()
  41.     {
  42.         Application.Init();
  43.         new SharpApp();
  44.         Application.Run();
  45.     }
  46. }

在我们的示例中，我们在窗口上显示了三个小图像。 我们明确指定放置这些图像的 x，y 坐标。

  1. ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40));

为了获得更好的视觉体验，我们将背景色更改为深灰色。

  1. bardejov = new Gdk.Pixbuf("bardejov.jpg");

我们将图像从磁盘加载到Gdk.Pixbuf对象。

  1. Image image1 = new Image(bardejov);
  2. Image image2 = new Image(rotunda);
  3. Image image3 = new Image(mincol);

Image是用于显示图像的小部件。 它在构造器中使用Gdk.Pixbuf对象。

  1. Fixed fix = new Fixed();

我们创建Fixed容器。

  1. fix.Put(image1, 20, 20);

我们将第一个图像放置在x = 20，y = 20坐标处。

  1. Add(fix);

最后，我们将Fixed容器添加到窗口中。

GTK# 中的布局管理 - 图1

图：固定

Alignment

Alignment容器控制其子窗口小部件的对齐方式和大小。

alignment.cs

  1. using Gtk;
  2. using System;
  4. class SharpApp : Window {
  6.     public SharpApp() : base("Alignment")
  7.     {
  8.         SetDefaultSize(260, 150);
  9.         SetPosition(WindowPosition.Center);
  10.         DeleteEvent += delegate { Application.Quit(); };
  12.         VBox vbox = new VBox(false, 5);
  13.         HBox hbox = new HBox(true, 3);
  15.         Alignment valign = new Alignment(0, 1, 0, 0);
  16.         vbox.PackStart(valign);
  18.         Button ok = new Button("OK");
  19.         ok.SetSizeRequest(70, 30);
  20.         Button close = new Button("Close");
  22.         hbox.Add(ok);
  23.         hbox.Add(close);
  25.         Alignment halign = new Alignment(1, 0, 0, 0);
  26.         halign.Add(hbox);
  28.         vbox.PackStart(halign, false, false, 3);
  30.         Add(vbox);
  32.         ShowAll();
  33.     }
  35.     public static void Main()
  36.     {
  37.         Application.Init();
  38.         new SharpApp();
  39.         Application.Run();
  40.     }
  41. }

在代码示例中，我们在窗口的右下角放置了两个按钮。 为此，我们使用一个水平框和一个垂直框以及两个对齐容器。

  1. Alignment valign = new Alignment(0, 1, 0, 0);

这会将子窗口小部件置于底部。

  1. vbox.PackStart(valign);

在这里，我们将Alignment小部件放置到垂直框中。

  1. HBox hbox = new HBox(true, 3);
  2. ...
  3. Button ok = new Button("OK");
  4. ok.SetSizeRequest(70, 30);
  5. Button close = new Button("Close");
  7. hbox.Add(ok);
  8. hbox.Add(close);

我们创建一个水平框，并在其中放置两个按钮。

  1. Alignment halign = new Alignment(1, 0, 0, 0);
  2. halign.Add(hbox);
  4. vbox.PackStart(halign, false, false, 3);

这将创建一个对齐容器，它将其子窗口小部件放在右侧。 我们将水平框添加到对齐容器中，然后将对齐容器包装到垂直框中。 我们必须记住，对齐容器仅包含一个子窗口小部件。 这就是为什么我们必须使用盒子。

GTK# 中的布局管理 - 图2

图：对齐

Table

Table小部件按行和列排列小部件。

calculator.cs

  1. using Gtk;
  2. using System;
  4. class SharpApp : Window {
  6.     public SharpApp() : base("Calculator")
  7.     {
  8.         SetDefaultSize(250, 230);
  9.         SetPosition(WindowPosition.Center);
  10.         DeleteEvent += delegate { Application.Quit(); };
  12.         VBox vbox = new VBox(false, 2);
  14.         MenuBar mb = new MenuBar();
  15.         Menu filemenu = new Menu();
  16.         MenuItem file = new MenuItem("File");
  17.         file.Submenu = filemenu;
  18.         mb.Append(file);
  20.         vbox.PackStart(mb, false, false, 0);
  22.         Table table = new Table(5, 4, true);
  24.         table.Attach(new Button("Cls"), 0, 1, 0, 1);
  25.         table.Attach(new Button("Bck"), 1, 2, 0, 1);
  26.         table.Attach(new Label(), 2, 3, 0, 1);
  27.         table.Attach(new Button("Close"), 3, 4, 0, 1);
  29.         table.Attach(new Button("7"), 0, 1, 1, 2);
  30.         table.Attach(new Button("8"), 1, 2, 1, 2);
  31.         table.Attach(new Button("9"), 2, 3, 1, 2);
  32.         table.Attach(new Button("/"), 3, 4, 1, 2);
  34.         table.Attach(new Button("4"), 0, 1, 2, 3);
  35.         table.Attach(new Button("5"), 1, 2, 2, 3);
  36.         table.Attach(new Button("6"), 2, 3, 2, 3);
  37.         table.Attach(new Button("*"), 3, 4, 2, 3);
  39.         table.Attach(new Button("1"), 0, 1, 3, 4);
  40.         table.Attach(new Button("2"), 1, 2, 3, 4);
  41.         table.Attach(new Button("3"), 2, 3, 3, 4);
  42.         table.Attach(new Button("-"), 3, 4, 3, 4);
  44.         table.Attach(new Button("0"), 0, 1, 4, 5);
  45.         table.Attach(new Button("."), 1, 2, 4, 5);
  46.         table.Attach(new Button("="), 2, 3, 4, 5);
  47.         table.Attach(new Button("+"), 3, 4, 4, 5);
  49.         vbox.PackStart(new Entry(), false, false, 0);
  50.         vbox.PackEnd(table, true, true, 0);
  52.         Add(vbox);
  53.         ShowAll();
  54.     }
  56.     public static void Main()
  57.     {
  58.         Application.Init();
  59.         new SharpApp();
  60.         Application.Run();
  61.     }
  62. }

我们使用Table小部件创建一个计算器框架。

  1. Table table = new Table(5, 4, true);

我们创建一个具有 5 行 4 列的表小部件。 第三个参数是齐次参数。 如果设置为true，则表中的所有小部件都具有相同的大小。 所有窗口小部件的大小等于表容器中最大的窗口小部件。

  1. table.Attach(new Button("Cls"), 0, 1, 0, 1);

我们在表格容器上附加一个按钮。 到表格的左上方单元格。 前两个参数是单元格的左侧和右侧，后两个参数是单元格的顶部和左侧。

  1. vbox.PackEnd(table, true, true, 0);

我们将表格小部件打包到垂直框中。

GTK# 中的布局管理 - 图3

图：计算机骨架

窗口

接下来，我们将创建一个更高级的示例。 我们显示一个窗口，可以在 JDeveloper IDE 中找到它。

windows.cs

  1. using Gtk;
  2. using System;
  4. class SharpApp : Window {
  6.     public SharpApp() : base("Windows")
  7.     {
  8.         SetDefaultSize(300, 250);
  9.         SetPosition(WindowPosition.Center);
  10.         BorderWidth = 15;
  11.         DeleteEvent += delegate { Application.Quit(); };
  13.         Table table = new Table(8, 4, false);
  14.         table.ColumnSpacing = 3;
  16.         Label title = new Label("Windows");
  18.         Alignment halign = new Alignment(0, 0, 0, 0);
  19.         halign.Add(title);
  21.         table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, 
  22.             AttachOptions.Fill, 0, 0);
  24.         TextView wins = new TextView();
  25.         wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20));
  26.         wins.CursorVisible = false;
  27.         table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand,
  28.             AttachOptions.Fill | AttachOptions.Expand, 1, 1);
  30.         Button activate = new Button("Activate");
  31.         activate.SetSizeRequest(50, 30);
  32.         table.Attach(activate, 3, 4, 1, 2, AttachOptions.Fill, 
  33.             AttachOptions.Shrink, 1, 1);
  35.         Alignment valign = new Alignment(0, 0, 0, 0);
  36.         Button close = new Button("Close");
  37.         close.SetSizeRequest(70, 30);
  38.         valign.Add(close);
  39.         table.SetRowSpacing(1, 3);
  40.         table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill,
  41.             AttachOptions.Fill | AttachOptions.Expand, 1, 1);
  43.         Alignment halign2 = new Alignment(0, 1, 0, 0);
  44.         Button help = new Button("Help");
  45.         help.SetSizeRequest(70, 30);
  46.         halign2.Add(help);
  47.         table.SetRowSpacing(3, 6);
  48.         table.Attach(halign2, 0, 1, 4, 5, AttachOptions.Fill, 
  49.             AttachOptions.Fill, 0, 0);
  51.         Button ok = new Button("OK");
  52.         ok.SetSizeRequest(70, 30);
  53.         table.Attach(ok, 3, 4, 4, 5, AttachOptions.Fill, 
  54.             AttachOptions.Fill, 0, 0);
  56.         Add(table);
  57.         ShowAll();
  58.     }
  60.     public static void Main()
  61.     {
  62.         Application.Init();
  63.         new SharpApp();
  64.         Application.Run();
  65.     }
  66. }

该代码示例显示了如何在 GTK# 中创建类似的窗口。

  1. Table table = new Table(8, 4, false);
  2. table.ColumnSpacing = 3;

该示例基于Table容器。 列之间将有 3px 的间距。

  1. Label title = new Label("Windows");
  3. Alignment halign = new Alignment(0, 0, 0, 0);
  4. halign.Add(title);
  6. table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, 
  7.     AttachOptions.Fill, 0, 0);

这段代码创建了一个向左对齐的标签。 标签放置在Table容器的第一行中。

  1. TextView wins = new TextView();
  2. wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20));
  3. wins.CursorVisible = false;
  4. table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand,
  5.     AttachOptions.Fill | AttachOptions.Expand, 1, 1);

文本视图小部件跨越两行两列。 我们使小部件不可编辑并隐藏光标。

  1. Alignment valign = new Alignment(0, 0, 0, 0);
  2. Button close = new Button("Close");
  3. close.SetSizeRequest(70, 30);
  4. valign.Add(close);
  5. table.SetRowSpacing(1, 3);
  6. table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill,
  7.     AttachOptions.Fill | AttachOptions.Expand, 1, 1);

我们将关闭按钮放在文本视图小部件旁边的第四列中。 （我们从零开始计数）将按钮添加到对齐小部件中，以便可以将其对齐到顶部。

GTK# 中的布局管理 - 图4

图：窗口

在本章中，我们介绍了 GTK# 小部件的布局管理。