Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序，同时还可以将您所有的项目、团队和利益干系人联系在一起。
本教程将为你介绍在Visual Studio中如何使用XAML创建自适应布局，利用这一知识，我们可以创建外观适用于任何设备的应用。在本教程中，我们将学习到如何创建新的DataTemplate、添加窗口吸附点，以及使用 VisualStateManager 和 AdaptiveTrigger 元素定制应用的布局。
Visual Studio最新版本免费下载试用
第0部分：从Github获取起始代码
从本站资源中下载Github页面示例，解压后访问Windows-appsample-photo-lab-master\\xaml-basics-starting-points\adaptive-layout目录，单击Photolab.sln打开项目。
第1部分：运行移动版仿真器
在 Visual Studio 工具栏中，确保将解决方案平台设置为 x86 或 x64 而不是 ARM，然后将目标设备从本地计算机更改为你已安装的移动版仿真器之一（例如，5 英寸的 1GB Mobile Emulator 10.0.15063 WVGA）。然后尝试在你通过按 F5 选择的移动版仿真器中运行
应用启动后你会发现，虽然应用能够正常工作，但在这么小的视区中看起来不太好看。 动态Grid元素通过减少所显示的列数来尝试适应有限的屏幕空间，但是所产生的布局看起来很普通并且不适合这么小的视区。
第2部分：生成定制的移动布局
为了使此应用在较小的设备上看起来更加美观，我们可以在XAML页面中创建一组单独的样式，并且仅在检测到移动设备时才使用这组样式。
创建新的DataTemplate我们将通过为图像创建新的 DataTemplate 来定制应用程序的库视图。 从解决方案资源管理器中打开MainPage.xaml，并在Page.Resources标记内添加以下代码。此模板通过消除图像周围的边框、除去每个缩略图下方的图像元数据，从而节省屏幕空间。<datatemplate> <grid> <image> /<image> /<grid> /<datatemplate>
将元数据添加到工具提示为了使用户依然能够访问每个图像的元数据，我们将会在每个图像项目中添加一个工具提示，即当你将鼠标悬停在缩略图上（或者长按触摸屏）时，将显示图像的标题、文件类型和尺寸。接下来，在刚创建的DataTemplate的Image标记中添加以下代码。
<image> <tooltipservice.tooltip> <tooltip> <stackpanel> <textblock> <stackpanel> <textblock> <textblock> /<stackpanel> /<stackpanel> /<tooltip> /<tooltipservice.tooltip> /<image>
添加 VisualState 资源库使用 VisualState 资源库告诉 VisualStateManager 在触发状态时要应用哪些属性。 每个资源库都以特定 XAML 元素的一个属性为目标，并将其设置为给定值。 将以下代码添加到你刚创建的移动版 VisualState 中 VisualState.StateTriggers 元素的下面。
<visualstatemanager.visualstategroups> <visualstategroup> <visualstate> <visualstate.statetriggers> <mobilescreentrigger> /<visualstate.statetriggers> /<visualstate> /<visualstategroup> /<visualstatemanager.visualstategroups>
这些资源库会将图像库的 ItemTemplate 设置为我们在第一部分中创建的新 DataTemplate，并将命令栏和缩放滑块与屏幕底部对齐，以便拇指能够在手机屏幕上更加轻松地触及。运行应用现在我们可以尝试使用移动版仿真器运行应用，如果如下图所示，那么恭喜，你的新布局显示成功。
如果你想了解Visual Studio其他相关教程或下载最新试用版，记得关注我们哦。