Xamarin.Mac 中的 .xib 文件

本文介绍如何使用 Xcode 的 Interface Builder 中创建的 .xib 文件来创建和维护 Xamarin.Mac 应用程序的用户界面。

注意

为 Xamarin.Mac 应用创建用户界面的首选方法是使用情节提要。 由于历史原因以及使用较旧的 Xamarin.Mac 项目，因此已保留本文档。 有关详细信息，请参阅我们的情节摘要简介文档。

概述

在 Xamarin.Mac 应用程序中使用 C# 和 .NET 时，你可以访问的用户界面元素和工具与使用 Objective-C 和 Xcode 的开发人员访问的元素和工具相同。 由于 Xamarin.Mac 与 Xcode 直接集成，你可以使用 Xcode 的 Interface Builder 来创建和维护用户界面（或选择直接使用 C# 代码创建）。

macOS 使用 .xib 文件定义应用程序用户界面（如菜单、Windows、视图、标签、文本字段）的元素，这些元素在 Xcode 的 Interface Builder 中以图形方式加以创建和维护。

本文将介绍在 Xamarin.Mac 应用程序中使用 .xib 文件的基础知识。 强烈建议你先阅读了解 Mac，因为它介绍了我们将在本文中使用的关键概念和技术。

你可能还需要查看 Xamarin.Mac 内部机制文档的向 Objective-C 公开 C# 类/方法部分，其中介绍了用于将 C# 类连接到 Objective-C 对象和 UI 元素的 Register 和 Export 属性。

Xcode 和 Interface Builder 简介

作为 Xcode 的一部分，Apple 已创建名为 Interface Builder 的工具，通过该工具，可在设计器中直观地创建用户界面。 Xamarin.Mac 可与 Interface Builder 顺利集成，使你可通过与 Objective-C 用户使用相同的工具创建 UI。

Xcode 组件

在 Visual Studio for Mac 的 Xcode 中打开 .xib 文件时，“项目导航器”位于左侧，“界面层次结构”和“界面编辑器”位于中间，“属性和实用程序”部分位于右侧：

让我们看看这些 Xcode 各部分的作用，以及如何使用它们创建 Xamarin.Mac 应用程序的界面。

项目导航

打开 .xib 文件在 Xcode 中进行编辑时，Visual Studio for Mac 会在后台创建 Xcode 项目文件，以便在 Visual Studio for Mac 和 Xcode 之间传递更改。 之后，当从 Xcode 切换回 Visual Studio for Mac 时，对此项目所作的任何更改都将通过 Visual Studio for Mac 与 Xamarin.Mac 项目同步。

通过“项目导航”部分，你可在组成此填充码 Xcode 项目的所有文件之间导航。 通常，你只会对此列表中的 .xib 文件感兴趣，例如 MainMenu.xib 和 MainWindow.xib。

接口层次结构

通过“界面层次结构”部分，你可轻松访问用户界面的多个关键属性，例如占位符和主窗口。 还可使用此部分访问组成用户界面的各个元素（视图），并通过在层次结构内拖动这些元素来调整其嵌套方式。

界面编辑器

“界面编辑器”部分提供了以图形方式布局用户界面的界面。 可从“属性和实用程序”部分的“库”中拖动元素来创建设计。 用户界面元素（视图）添加到设计图面后，会添加到“界面层次结构”部分，从而使其显示于“界面编辑器”中。

属性和实用程序

“属性和实用程序”部分分为两个需要处理的主要部分，即“属性”（又名“检查器”）和“库”：

本部分起初基本为空，但你在“用户编辑器”或“界面层次结构”中选择元素后，“属性”部分内会填充有你可调整的特定元素和属性的相关信息。

“属性”部分内具有 8 个不同的检查器选项卡，如下所示：

由左至右，这些选项卡依次为：

• 文件检查器 – 文件检查器显示文件信息，例如正在编辑的 Xib 文件的文件名称和位置。
• 快速帮助 – 快速帮助选项卡基于 Xcode 中所选内容提供相应背景帮助。
• 标识检查器 – 标识检查器提供有关所选控件/视图的信息。
• 属性检查器 – 通过属性检查器，你可自定义所选控件/视图的各种属性。
• 大小检查器 – 通过大小检查器，你可控制所选控件/视图的大小和调整大小。
• 连接检查器 – 连接检查器显示所选控件的“输出口”和“操作”连接。 我们稍后将介绍“输出口”和“操作”。
• 绑定检查器 – 通过绑定检查器，你可配置控件，以使其值自动绑定到数据模型。
• 视图效果检查器 – 通过视图效果检查器，你可对控件指定效果，例如动画。

可使用“库”部分查找要放入设计器的控件和对象，从而以图形方式生成用户界面：

熟悉 Xcode IDE 和 Interface Builder 后，接下来我们看看如何使用它来创建用户界面。

在 Xcode 中创建和维护窗口

创建 Xamarin.Mac 应用用户界面的首选方法是使用情节提要（有关详细信息，请参阅情节提要简介文档），因此，在 Xamarin.Mac 中启动的任何新项目将默认使用情节提要。

要切换到使用基于 .xib 的 UI，请执行以下操作：

1. 打开 Visual Studio for Mac 并启动新的 Xamarin.Mac 项目。

2. 在“Solution Pad”中，右键单击项目，然后依次选择“添加”>“新建文件...”。

3. 选择“Mac”>“窗口控制器”：

   

4. 对名称输入 MainWindow，然后单击“新建”按钮：

   

5. 再次右键单击项目名称，然后选择“添加”>“新建文件...”

6. 选择“Mac”>“主菜单”：

   

7. 将名称保留为 MainMenu，然后单击“新建”按钮。

8. 在“Solution Pad”中，选择“main.storyboard”文件，右键单击并选择“移除”：

   

9. 在“移除”对话框中，单击“删除”按钮：

   

10. 在“Solution Pad”中，双击“Info.plist”文件，将其打开进行编辑。

11. 从“主界面”下拉列表中选择 MainMenu：

    

12. 在“Solution Pad”中，双击“MainMenu.xib”文件将其打开，以便在 Xcode 的 Interface Builder 中进行编辑。

13. 在“库检查器”的搜索字段中键入 object，然后将新对象拖动到设计图面上：

    

14. 在“标识检查器”中，为“类”输入 AppDelegate：

    

15. 从接口层次结构中选择“文件所有者”，切换到“连接检查器”，并将一行从委托拖动到AppDelegate刚刚添加到项目中的对象：

    

16. 保存更改并返回到 Visual Studio for Mac。

完成所有这些更改后，编辑“AppDelegate.cs”文件，使其如下所示：

using AppKit;
using Foundation;

namespace MacXib
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public MainWindowController mainWindowController { get; set; }

        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
            mainWindowController = new MainWindowController ();
            mainWindowController.Window.MakeKeyAndOrderFront (this);
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

现在，应用的主窗口在添加窗口控制器时会自动包含在项目中的 .xib 文件中。 要编辑窗口设计，请在 Solution Pad 中双击 MainWindow.xib 文件：

这将在 Xcode 的 Interface Builder 中打开窗口设计：

标准窗口工作流

对于在 Xamarin.Mac 应用程序中创建和使用的任何窗口，此过程基本相同：

1. 对于非默认自动添加到项目的新窗口，请向项目添加新窗口定义。
2. 双击 .xib 文件打开窗口设计，以便在 Xcode 的 Interface Builder 中编辑。
3. 在“属性检查器”和“大小检查器”中设置任何必需的窗口属性。
4. 拖动生成界面所需的控件，并在“属性检查器”中对其进行配置。
5. 使用“大小检查器”处理 UI 元素的大小调整。
6. 通过输出口和操作向 C# 代码公开窗口的 UI 元素。
7. 保存更改并切换回 Visual Studio for Mac，以便与 Xcode 同步。

设计窗口布局

在 Interface Builder 中布局用户界面的过程对于添加的每个元素基本相同：

1. 在“库检查器”中找到所需的控件，并将其拖动到“界面编辑器”并进行放置。
2. 在“属性检查器”中设置任何必需的窗口属性。
3. 使用“大小检查器”处理 UI 元素的大小调整。
4. 如果使用自定义类，请在“标识检查器”中进行设置。
5. 通过输出口和操作向 C# 代码公开 UI 元素。
6. 保存更改并切换回 Visual Studio for Mac，以便与 Xcode 同步。

例如：

1. 在 Xcode 中，从“库”部分拖动“Push Button”：

   

2. 将此按钮拖放到“界面编辑器”中的“窗口”中：

   

3. 单击“属性检查器”中的 Title 属性，将此按钮的标题更改为 Click Me：

   

4. 从“库”部分拖动“标签”：

   

5. 将此标签拖放到“界面编辑器”中此按钮旁的“窗口”中：

   

6. 按住此标签上的右控点，将其拖动至靠近窗口边缘的位置：

   

7. 在“界面编辑器”中选择标签后，切换到“大小检查器”：

   

8. 在“自动调整大小”框中，单击右侧的暗红色括号，然后单击中心的暗红色水平箭头：

   

9. 这可确保在正在运行的应用程序中调整窗口大小时，标签会拉伸以增大和缩小。 红色括号以及“自动调整大小”框的顶部和左侧指示标签粘贴到其给定的 X 和 Y 位置。

10. 保存对用户界面的更改

在调整控件大小和移动控件时，你应该会注意到，Interface Builder 会根据 OS X 人机界面指南提供有用贴靠提示。 这些指南可帮助你创建外观和风格为 Mac 用户所熟悉的高质量应用程序。

如果查看“界面层次结构”部分，请注意构成用户界面的元素的布局和层次结构的显示方式：

从这里，你可选择要进行编辑的项，或者根据需要进行拖动来对 UI 元素重新排序。 例如，如果某个 UI 元素被另一元素覆盖，你可将其拖动到列表底部，使其成为窗口上最顶层的项。

有关在 Xamarin.Mac 应用程序中使用窗口的详细信息，请参阅我们的窗口文档。

向 C# 代码公开 UI 元素

完成在 Interface Builder 中布局用户界面的外观操作后，需要公开 UI 的元素，以便可以使用 C# 代码访问它们。 为此，将使用操作和输出口。

设置自定义主窗口控制器

为了能够创建输出口和操作以向 C# 代码公开 UI 元素，Xamarin.Mac 应用需要使用自定义窗口控制器。

请执行以下操作：

1. 在 Xcode 的 Interface Builder 中打开应用的情节提要。

2. 在 Design Surface 中选择 NSWindowController。

3. 切换到“标识检查器”视图，并输入 WindowController 作为“类名称”：

   

4. 保存更改并返回到 Visual Studio for Mac 以同步。

5. WindowController.cs 文件将添加到 Visual Studio for Mac 的 Solution Pad 中的项目中：

   

6. 在 Xcode 的 Interface Builder 中重新打开情节提要。

7. WindowController.h 文件将可供使用：

   

输出口和操作

那么什么是输出口和操作？ 在传统的 .NET 用户界面编程中，用户界面中的控件在添加时会自动作为属性公开。 然而在 Mac 中情况则不同，如果仅将控件添加到视图，代码不可对其进行访问。 开发人员必须对代码显式公开 UI。 为此，Apple 提供了两个选项：

• 输出口 – 输出口类似于属性。 如果将控件连接到输出口，则控件会通过属性对代码公开，从而使控件可执行诸如附加事件处理程序和调用方法等操作。
• 操作 - 操作类似于 WPF 中的命令模式。 例如，对控件执行操作时，比如单击按钮，则控件会自动在代码中调用方法。 操作功能强大且非常方便，因为你可对同一操作连接多个控件。

在 Xcode 中，可通过拖动控件直接将输出口和操作添加到代码中。 更具体地说，这意味着若要创建输出口或操作，需选择要添加输出口和操作的控件元素，按住键盘上的 Ctrl 按钮，然后将此控件直接拖到代码中。

对于 Xamarin.Mac 开发人员，这意味着你应拖动到与要创建输出口或操作的 C# 文件所对应的 Objective-C 存根文件中。 Visual Studio for Mac 创建一个名为 MainWindow.h 的文件作为其生成的填充码 Xcode 项目的一部分，以便使用 Interface Builder：

此存根 .h 文件反映了创建新的 NSWindow 时自动添加到 Xamarin.Mac 项目的 MainWindow.designer.cs。 此文件用于同步对 Interface Builder 所作的更改，我们将在其中创建输出口和操作，以便向 C# 代码公开 UI 元素。

添加输出口

基本了解输出口和操作的含义后，我们来看看如何创建输出口，以向 C# 代码公开 UI 元素。

请执行以下操作：

1. 在 Xcode 中屏幕右上角，单击“双圆”按钮，打开“助手编辑器”：

   

2. 此时 Xcode 会切换为拆分视图模式，“界面编辑器”位于一边，“代码编辑器”位于另一边。

3. 请注意，Xcode 已自动在“代码编辑器”中选取 MainWindowController.m 文件，这是不正确的。 如果你还记得我们上面讨论的输出口和操作，就知道需要选择 MainWindow.h。

4. 在“代码编辑器”顶部，单击“自动链接”并选择 MainWindow.h 文件：

   

5. 此时 Xcode 应选择了正确的文件：

   

6. 最后一步非常重要！ 如果你未选中正确的文件，则无法创建输出口和操作，或者其会公开给 C# 中错误的类！

7. 在“界面编辑器”中，按住键盘上的 Ctrl，单击并将前面创建的标签拖动到代码编辑器中（@interface MainWindow : NSWindow { } 代码下方）：

   

8. 会显示一个对话框。 使“连接”保持设置为“输出口”，然后在“名称”中输入 ClickedLabel：

   

9. 单击“连接”按钮，创建输出口：

   

10. 保存对文件所做的更改。

添加操作

接下来，我们来了解如何创建一个操作，以向 C# 代码公开用户与 UI 元素的交互。

请执行以下操作：

1. 请确保我们仍在助理编辑器中，并且 MainWindow.h 文件在代码编辑器中可见。

2. 在“界面编辑器”中，按住键盘上的 Ctrl，单击并将前面创建的按钮拖动到代码编辑器中（@property (assign) IBOutlet NSTextField *ClickedLabel; 代码下方）：

   

3. 将“连接”类型更改为“操作”：

   

4. 输入 ClickedButton 作为名称：

   

5. 单击“连接”按钮，创建操作：

   

6. 保存对文件所做的更改。

用户界面连接和公开给 C# 代码后，请切换回 Visual Studio for Mac，使其同步在 Xcode 和 Interface Builder 中所作的更改。

编写代码

创建用户界面并将其 UI 元素通过输出口和操作公开给代码后，便可开始编写代码以完成程序。 例如，在 Solution Pad 中双击 MainWindow.cs 文件进行编辑：

将以下代码添加到 MainWindow 类，以使用上面创建的示例输出口：

private int numberOfTimesClicked = 0;
...

public override void AwakeFromNib ()
{
    base.AwakeFromNib ();

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}

请注意，NSLabel 在 C# 中可通过直接名称进行访问，该名称是你在 Xcode 中创建其输出口时分配的，在本例中称为 ClickedLabel。 可以采用与任何普通 C# 类相同的方式访问公开对象的任何方法或属性。

重要

需要使用 AwakeFromNib 而不是 Initialize 等其他方法，因为 OS 从 .xib 文件加载和实例化用户界面后会调用 AwakeFromNib。 如果我们尝试在 .xib 文件完全加载和实例化之前尝试访问标签控件，我们会遇到 NullReferenceException 错误，因为此时标签控件尚未创建。

接下来，将下面的分部类添加到 MainWindow 类：

partial void ClickedButton (Foundation.NSObject sender) {

    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}

此代码会附加到在 Xcode 和 Interface Builder 中创建的操作，且每次用户点击按钮时都会调用此代码。

某些 UI 元素自动具有内置操作，例如默认菜单栏中的项，例如“打开...”菜单项 (openDocument:)。 在 Solution Pad 中，双击 AppDelegate.cs 文件将其打开以供编辑，并在 DidFinishLaunching 方法下面添加以下代码：

[Export ("openDocument:")]
void OpenDialog (NSObject sender)
{
    var dlg = NSOpenPanel.OpenPanel;
    dlg.CanChooseFiles = false;
    dlg.CanChooseDirectories = true;

    if (dlg.RunModal () == 1) {
        var alert = new NSAlert () {
            AlertStyle = NSAlertStyle.Informational,
            InformativeText = "At this point we should do something with the folder that the user just selected in the Open File Dialog box...",
            MessageText = "Folder Selected"
        };
        alert.RunModal ();
    }
}

此处的关键行是 [Export ("openDocument:")]，它告诉 NSMenu AppDelegate 具有响应 openDocument: 操作的方法 void OpenDialog (NSObject sender)。

有关使用菜单的详细信息，请参阅我们的菜单文档。

与 Xcode 同步更改

从 Xcode 切换回 Visual Studio for Mac 时，在 Xcode 中所作的任何更改将会自动与 Xamarin.Mac 项目同步。

如果在 Solution Pad 中选择 MainWindow.designer.cs ，你将能够在 C# 代码中查看输出口和操作的连接方式：

注意 MainWindow.designer.cs 文件中的这两个定义：

[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);

与 Xcode 的 MainWindow.h 文件中的定义对齐：

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

如你所见，Visual Studio for Mac 会侦听对 .h 文件的更改，然后在相应的 .designer.cs 文件中自动同步这些更改，以将其公开给应用程序。 你可能还会注意到，MainWindow.designer.cs 是一个分部类，因此 Visual Studio for Mac 不必修改 MainWindow.cs，该项将覆盖我们对类所做的任何更改。

通常，你永远都不需要自行打开 MainWindow.designer.cs，这里提供它只是为了进行介绍。

重要

大多数情况下，Visual Studio for Mac 会自动发现 Xcode 中所作的任何更改，并将其同步到 Xamarin.Mac 项目。 如果同步不自动进行，请切换回 Xcode，然后再次切换到 Visual Studio for Mac。 这通常会开始同步周期。

向项目添加新窗口

除主文档窗口外，Xamarin.Mac 应用程序可能需要向用户显示其他类型的窗口，例如“首选项”或“检查器面板”。 将新窗口添加到项目时，应始终使用“具有控制器的 Cocoa 窗口”选项，以便更轻松地从 .xib 文件加载窗口。

要添加新窗口，请执行以下操作：

1. 在“Solution Pad”中，右键单击项目，然后依次选择“添加”>“新建文件...”。

2. 在“新建文件”对话框中，选择 Xamarin.Mac >“具有控制器的 Cocoa 窗口”：

   

3. 对“名称”输入 PreferencesWindow，然后单击“新建”按钮。

4. 双击 PreferencesWindow.xib 文件将其打开，以便在 Interface Builder 中编辑：

   

5. 设计界面：

   

6. 保存更改并返回到 Visual Studio for Mac 以与 Xcode 同步。

将以下代码添加到 AppDelegate.cs 以显示新窗口：

[Export("applicationPreferences:")]
void ShowPreferences (NSObject sender)
{
    var preferences = new PreferencesWindowController ();
    preferences.Window.MakeKeyAndOrderFront (this);
}

var preferences = new PreferencesWindowController (); 行将创建窗口控制器的新实例，该实例从 .xib 文件加载窗口并将加以扩充。 preferences.Window.MakeKeyAndOrderFront (this); 行向用户显示新窗口。

运行代码并从应用程序菜单中选择“首选项...”，即可显示窗口：

有关在 Xamarin.Mac 应用程序中使用窗口的详细信息，请参阅我们的窗口文档。

向项目添加新视图

有时，可以更轻松地将窗口的设计分解为多个更易于管理的 .xib 文件。 例如，在“首选项”窗口中选择工具栏项时切换主窗口的内容，或者为响应“源列表”选择而切换内容。

将新视图添加到项目时，应始终使用“具有控制器的 Cocoa 视图”选项，以便更轻松地从 .xib 文件加载视图。

要添加新视图，请执行以下操作：

1. 在“Solution Pad”中，右键单击项目，然后依次选择“添加”>“新建文件...”。

2. 在“新建文件”对话框中，选择 Xamarin.Mac >“具有控制器的 Cocoa 视图”：

   

3. 对“名称”输入 SubviewTable，然后单击“新建”按钮。

4. 双击 SubviewTable.xib 文件将其打开，以便在 Interface Builder 中编辑并设计用户界面：

   

5. 连接任何必需的操作和输出口。

6. 保存更改并返回到 Visual Studio for Mac 以与 Xcode 同步。

接下来编辑 SubviewTable.cs 并将以下代码添加到 AwakeFromNib 文件，以在加载新视图时填充该视图：

public override void AwakeFromNib ()
{
    base.AwakeFromNib ();

    // Create the Product Table Data Source and populate it
    var DataSource = new ProductTableDataSource ();
    DataSource.Products.Add (new Product ("Xamarin.iOS", "Allows you to develop native iOS Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Android", "Allows you to develop native Android Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Mac", "Allows you to develop Mac native Applications in C#"));
    DataSource.Sort ("Title", true);

    // Populate the Product Table
    ProductTable.DataSource = DataSource;
    ProductTable.Delegate = new ProductTableDelegate (DataSource);

    // Auto select the first row
    ProductTable.SelectRow (0, false);
}

向项目添加枚举以跟踪当前正在显示的视图。 例如 SubviewType.cs：

public enum SubviewType
{
    None,
    TableView,
    OutlineView,
    ImageView
}

编辑将使用并显示视图的窗口的 .xib 文件。 添加“自定义视图”，该视图将在 C# 代码加载到内存中后充当视图的容器，并将其公开给名为 ViewContainer 的输出口：

保存更改并返回到 Visual Studio for Mac 以与 Xcode 同步。

接下来，编辑窗口的 .cs 文件，该文件将显示新视图（例如 MainWindow.cs），并添加以下代码：

private SubviewType ViewType = SubviewType.None;
private NSViewController SubviewController = null;
private NSView Subview = null;
...

private void DisplaySubview(NSViewController controller, SubviewType type) {

    // Is this view already displayed?
    if (ViewType == type) return;

    // Is there a view already being displayed?
    if (Subview != null) {
        // Yes, remove it from the view
        Subview.RemoveFromSuperview ();

        // Release memory
        Subview = null;
        SubviewController = null;
    }

    // Save values
    ViewType = type;
    SubviewController = controller;
    Subview = controller.View;

    // Define frame and display
    Subview.Frame = new CGRect (0, 0, ViewContainer.Frame.Width, ViewContainer.Frame.Height);
    ViewContainer.AddSubview (Subview);
}

如果需要显示从窗口容器中的 .xib 文件加载的新视图（上面添加的自定义视图），可使用此代码删除任何现有视图并将其交换为新视图。 此代码好像已识别到你已经显示了一个视图，如果是这样，它会将其从屏幕上删除。 接下来，它将采用已传入的视图（从视图控制器中加载的视图）调整其大小以适应内容区域，并将其添加到内容中以供显示。

要显示新视图，请使用以下代码：

DisplaySubview(new SubviewTableController(), SubviewType.TableView);

这将为要显示的新视图创建视图控制器的新实例，设置其类型（由添加到项目的枚举指定），并使用添加到窗口类的 DisplaySubview 方法实际显示视图。 例如：

有关在 Xamarin.Mac 应用程序中使用窗口的详细信息，请参阅我们的窗口和对话框文档。

总结

本文详细介绍了如何在 Xamarin.Mac 应用程序中使用 .xib 文件。 我们了解了 .xib 文件的不同类型，如何使用 .xib 文件创建应用程序的用户界面、如何在 Xcode 的 Interface Builder 中创建和维护 .xib 文件，以及如何在 C# 代码中使用 .xib 文件。

相关链接

• 了解 Mac
• Windows
• 菜单
• 对话框
• 使用图像
• macOS 人机界面指南