使用 XAML 设计器创建 UI
Visual Studio 2012 中的 XAML 设计器提供了一个可视化界面，可帮助您设计使用 XAML、WPF 和 Silverlight 应用程序生成的 Windows 应用商店应用程序。可通过从**“工具箱”**中拖动控件并在“属性”窗口中设置属性，为应用程序创建用户界面。还可直接在“XAML”视图中编辑 XAML。
XAML 设计器工作区
Visual Studio 的 XAML 设计器中的工作区由若干可视界面元素构成。这些元素包括美工板、工具箱、“设备”窗口、“文档大纲”窗口、解决方案资源管理器、“属性”窗口和 XAML 编辑器。若要打开 XAML 设计器，请在解决方案资源管理器中右击某个 XAML 页，然后选择**“视图设计器”**。
创作视图
XAML 设计器针对应用程序所呈现的 XAML 标记提供“XAML”视图和同步“设计”视图。在 Visual Studio 中打开 XAML 文档后，可使用**“设计”和“XAML”**选项卡在“设计”视图和“XAML”视图之间切换。在“设计”视图中，含有“美工板”的窗口为活动窗口，可使用它作为主要工作图面。在该窗口中可通过添加或绘制元素然后修改这些元素，以可视方式设计应用程序中的页面。有关详细信息，请参见在 XAML 设计器中使用元素。下图展示了“设计”视图中的美工板。
.png "XAML 设计器的设计视图")
可使用**“交换窗格”**按钮切换在顶部显示哪个窗口：美工板还是 XAML 编辑器。
美工板中提供以下这些功能：
对齐线
对齐线是显示为红色虚线的“对齐边界”，在控件边缘对齐时或文本基线对齐时显示对齐线。只有在启用了**“对齐线对齐”**后，才会显示对齐边界。Grid 轨道
Grid 轨道用于管理网格面板中的行和列。可创建和删除行和列，还可调整其相对宽度和高度。美工板左侧显示用于行的垂直 Grid 轨道，而顶部显示用于列的水平线。Grid 装饰器
Grid 装饰器显示为一个三角形，在 Grid 轨道上有垂直或水平线附加到该三角形。当拖动 Grid 装饰器时，将随鼠标的移动更新相邻列或行的宽度或高度。Grid 装饰器用于控制 Grid 的行和列的宽度和高度。可通过单击 Grid 轨道，添加新的列或行。向有两个或更多列或行的 Grid 面板添加新行或列直线时，将在轨道之外显示一个微型工具栏，通过它可显式设置宽度和高度。通过这个微型工具栏，可设置 Grid 行和列的固定、星号和自动大小调整选项。
大小调整图柄
所选控件上显示大小调整图柄，通过它可调整控件的大小。调整控件的大小时，通常会显示宽度和高度值，以帮助您设置控件的大小。有关在“设计”视图中操纵控件的详细信息，请参见在 XAML 设计器中使用元素。边距
边距表示控件边缘与其容器边缘之间固定空间的大小。可使用“属性”窗口中**“布局”**下的 Margin 属性设置控件的边距。边距装饰器
可使用边距装饰器更改元素相对于其布局容器的边距。边距装饰器打开时，未设置边距，而边距装饰器显示一条断开的锁链。未设置边距时，在运行时调整布局容器的大小时，元素将留在原处。边距装饰器闭合时，边距装饰器显示一个完整的锁链，而在运行时调整布局容器的大小时元素将与边距一起移动（边距保持固定）。元素图柄
将指针移至某个元素四周包围的蓝色方框的角落时，可使用美工板上显示的元素图柄修改该元素。通过这些图柄，可对元素进行旋转、调整大小、翻转、移动或向其添加圆弧半径。元素图柄的符号因功能而异，并根据指针的确切位置发生变化。如果看不到元素图柄，请确保选择了该元素。
在“设计”视图中，屏幕左下区域提供其他美工板命令，如下所示：
.png "设计视图命令")
此工具栏上提供以下这些命令：
缩放
通过缩放可调整设计图面的大小。可从 12.5% 缩放到 800%，也可选择**“适合选择”和“全部适合”**等选项。显示/隐藏对齐网格
显示或隐藏显示网格线的对齐网格。启用**“网格线对齐”或“对齐线对齐”**后，使用网格线。开启/关闭网格线对齐
在美工板上拖动元素时，如果启用了**“网格线对齐”**，则元素倾向于与最靠近的水平和垂直网格线对齐。开启/关闭对齐线对齐
对齐线可帮助使控件彼此对齐。在相对于控件拖动其他控件时，如果启用了**“对齐线对齐”**，则当某些控件的边缘和文本水平或垂直对齐时，将显示对齐边界。对齐边界显示为红色虚线。
在“XAML”视图中，含有 XAML 编辑器的窗口为活动窗口，而 XAML 编辑器为主要创作工具。可扩展应用程序标记语言 (XAML) 提供一个基于 XML 的声明性词汇表，用于指定应用程序的用户界面。“XAML”视图中具有 IntelliSense、自动格式设置、语法突出显示和标记导航功能。下图展示了“XAML”视图：
.png "XAML 视图")
拆分视图栏
当 XAML 编辑器在下方窗口时，拆分视图栏显示在“XAML”视图的顶部。通过拆分视图栏，可控制“设计”视图和“XAML”视图的相对大小。还可交换视图的位置（使用**“交换窗格”**按钮）、指定水平还是垂直排列视图以及折叠其中任意一个视图。标记缩放
通过标记缩放，可调整“XAML”视图的大小。可从 20% 缩放到 400%。
“设备”窗口
通过 Visual Studio 的 XAML 设计器中的“设备”窗口，可在设计时为应用程序模拟各种视图、显示屏和显示选项。该窗口类似于下方所示：
.png "设备窗口")
下面是“设备”窗口中提供的选项：
视图
指定应用程序的方向和布局。使用 XAML 生成的 Windows 应用商店应用程序的项目模板（网格、拆分和空白）可检测和转达上述视图。模板的每页均提供这些视图：横向。全屏视图 (W x H)。这是默认视图。
对齐。当用户将应用程序与一端对齐时显示此视图。应用程序在所有页上均垂直平移。在此视图中，应用程序的宽度为 320 像素。
填充。当用户将两个应用程序在一端对齐时显示此视图。在此视图中，应用程序的宽度将变窄 322 像素。
纵向。全屏视图 (H x W)。在此视图中，应用程序的宽度和高度值互换。
根据用户设置的视图，可能会禁用某些视图。例如，如果将显示屏分辨率设置为 1280 x 800，则同时禁用填充和对齐。对于协定，某些可视状态（下一节中介绍）可能不可用。
可视状态
指定要为编辑当前视图而显示的 ApplicationViewState 可视状态组中的当前状态。如果当前文档中未找到这些状态，则将禁用此选项。（默认情况下，在 Visual Studio 的“基本页”项模板中包括和定义状态。）显示
指定为其设计应用程序的设备的显示分辨率。主题
指定应用程序主题。显示镶边
在“设计”视图中开启和关闭应用程序四周模拟的平板电脑边框。选中该复选框显示边框。重写缩放
开启和关闭在设计图面中仿真文档缩放。这样可按一个倍数提高缩放百分比。选中该复选框开启仿真。例如，如果缩放百分比为 100%，则设计图面中的文档将最大缩放至 140%。如果当前缩放百分比为 180，则禁用此选项。剪切以进行显示
指定显示模式。选中该复选框可将文档大小剪切至显示屏大小。
“文档大纲”窗口
XAML 设计器中的“文档大纲”窗口可帮助您执行以下任务：
查看美工板上所有元素的层次结构。
选择元素，以使您可修改这些元素（在层次结构中来回移动元素、在美工板上修改元素、在“属性”窗口中设置这些元素的属性等）。有关详细信息，请参见在 XAML 设计器中使用元素
为控件元素创建和修改模板。
使用所选元素的上下文菜单。美工板中的所选元素也有同一菜单。
.png "“文档大纲”窗口")
“文档大纲”窗口中提供的选项包括：
文档大纲
“文档大纲”窗口中的主视图显示文档在树结构中的层次结构。可根据文档大纲的的层次结构性质以不同的详细信息级别检查该文档，并可单个或成组地锁定和隐藏元素。显示/隐藏
显示或隐藏与文档大纲中各项对应的美工板元素。使用**“显示/隐藏”**按钮（显示眼睛符号）或按 CTRL+H 隐藏元素，按 SHIFT+CTRL+H 显示这些元素。锁定/取消锁定
锁定或取消锁定与文档大纲中各项对应的美工板元素。无法修改已锁定的元素。使用**“锁定/取消锁定”**按钮（在锁定时显示挂锁符号）或按 CTRL+L 锁定元素，按 SHIFT+CTRL+L 将其解锁。返回到范围
“文档大纲”窗口顶部的选项（显示向上箭头符号）可将文档大纲返回上一个范围。仅在样式或模板的范围内时才适用范围上移。
“属性”窗口
在“属性”窗口中可设置控件的属性值。该窗口类似于下方所示：
.png "“属性”窗口")
“属性”窗口的顶部有若干选项。可使用**“名称”框更改当前所选元素的名称。左上角有一个图标表示当前所选的元素。若要按类别或字母顺序排列属性，请在“排列依据”列表中单击“类别”、“名称”或“源”。若要查看控件的事件列表，请单击“事件”按钮，其中显示闪电符号。若要搜索某个属性，请在“搜索”**框中键入该属性的名称。在键入时，“属性”窗口将显示与搜索匹配的属性。某些属性使您可通过选择向下箭头按钮设置高级属性。有关使用属性和处理事件的详细信息，请参见快速入门：添加控件和处理事件
每个属性值的右侧是“属性标记”，显示为方框符号。属性标记的外观指示是否向属性应用了数据绑定或资源。例如，白色方框符号指示默认值，黑色方框符号通常指示已应用本地资源，而橙色方框通常指示已应用数据绑定。单击属性标记时，可导航到样式的定义、打开数据绑定生成器或资源选取器。