XAML - 环境设置


Microsoft 为 XAML 提供了两个重要的工具 -

  • 视觉工作室
  • 表达混合

目前,这两种工具都可以创建 XAML,但事实是 Visual Studio 更多地被开发人员使用,而 Expression Blend 仍然更多地被设计人员使用。

Microsoft 提供了 Visual Studio 的免费版本,可以从https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx下载

注意- 在本教程中,我们将主要使用 WPF 项目和 Windows 应用商店应用程序。但Visual Studio的免费版本不支持Windows Store App。因此,为此目的,您将需要 Visual Studio 的许可版本。

安装

按照下面给出的步骤在您的系统上安装 Visual Studio -

  • 下载文件后,运行安装程序。将显示以下对话框。

Visual Studio 对话框
  • 单击“安装”按钮,它将开始安装过程。

安装
  • 安装过程成功完成后,您将看到以下屏幕。

Visual Studio 安装完成
  • 如果需要,关闭此对话框并重新启动计算机。

  • 现在从“开始”菜单打开 Visual studio,它将显示以下对话框。第一次需要一些时间,只是为了准备。

Visual Studio 开始菜单

一切完成后,您将看到 Visual Studio 的主窗口。

主窗口

实施的第一步

让我们从一个简单的实现开始。请按照以下步骤操作 -

  • 单击“文件”→“新建”→“项目”菜单选项。

项目菜单
  • 将显示以下对话框 -

对话框
  • 在“模板”下,选择“Visual C#”,然后选择“WPF 应用程序”。为项目命名并单击“确定”按钮。

  • 在 mainwindow.xaml 文件中,默认写入以下 XAML 标记。您将在本教程后面了解所有这些标签。

<Window x:Class = "FirstStepDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
         
   </Grid> 
</Window> 

默认情况下,网格被设置为页面后的第一个元素。

让我们在 Grid 元素下添加一个按钮和一个文本块。这称为对象元素语法,左尖括号后跟我们要实例化的名称,例如按钮,然后定义内容属性。分配给内容的字符串将显示在按钮上。现在将按钮的高度和宽度分别设置为 30 和 50。类似地初始化文本块的属性。

现在看看设计窗口。您将看到一个按钮。现在按 F5 执行此 XAML 代码。

<Window x:Class = "FirstStepDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Button Content = "First Button" Height = "30" Width = "80"/> 
      <TextBlock Text = "Congratulations you have successfully build your first app" 
         Height = "30" Margin = "162,180,122,109"/> 
   </Grid> 
	
</Window> 

当您编译并执行上述代码时,您将看到以下窗口。

第一个按钮

恭喜!您已经设计了第一个按钮。