跳到主要内容

主窗口

您现在可以开始 Avalonia 项目之旅了。 我们将从主应用程序窗口开始。打开 MainWindow.axaml 文件。

信息

请注意，在 Avalonia 中，XAML 文件的扩展名为 .axaml （而不是 .xaml）。它表示 'Avalonia XAML'，文件扩展名是出于技术原因引入的。

发生了什么？​

在 MainWindow.axaml XAML 文件中，<Window>...</Window> XAML 标记表示 Avalonia 窗口。与其他 Avalonia 控件一样，窗口将在目标平台上绘制，并具有 4 个布局区域：margin(边距)、border(边框)、padding(内边距) 和 content(内容)。

MainWindow 的内容​

在 Windows 的内容中, 你可以看到一个 <TextBlock>...</TextBlock> XAML 标签。这表示一个 TextBlock 控件，它会将 文本 绘制到屏幕上。 TextBlock 的 Text 属性绑定到 MainViewModel 类的 Greeting 属性。

备注

类名可能显示为:

  • MainViewModel
  • MainWindowViewModel

检查您的项目使用哪个模板来确认名称是否正确。

XAML
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

您可以更改文件 MainWindowViewModel.cs 中的文本，以查看 UI 界面上的对此更改的表现。

C#
namespace GetStartedApp.ViewModels;

public class MainWindowViewModel : ViewModelBase
{
    public string Greeting => "Welcome to Avalonia! This is my added text.";
}
Application runningApplication running
信息

有关控件布局区域概念的更多信息，请参阅这里.

XAML 预览器​

如果您使用的 IDE 安装了我们的 IDE 扩展，例如 Rider、Visual Studio 或 Visual Studio Code，您可以在预览器视图中看到 XAML 代码的实时更改。

XAML 预览器在一种特殊的创作模式（称为设计模式）下创建应用实例。当您的应用在设计模式下运行时，它可以执行特殊逻辑，以便与可视化设计器进行协调。Design.IsDesignMode

导航到 MainWindow.axaml 文件并单击编辑器窗口右上角的 Split View 按钮。

Rider Avalonia Previewer ControlsRider Avalonia Previewer ControlsRider with the Avalonia XAML Previewer OpenRider with the Avalonia XAML Previewer Open
  • 构建项目。
Avalonia XAML PreviewerAvalonia XAML Previewer
  • 删除绑定 {Binding Greeting} 并且修改为 <TextBlock Text="my text" />

您将看到预览窗格中的新文本随着您的输入而变化。 这是 Avalonia design-time preview behaviour（设计时预览行为） 的一个示例，它将帮助您准确、快速地开发用户界面演示。

  • 运行项目以查看新文本是否也在运行时出现。

在下一页中，您将向窗口添加一个简单的 Button。