Visual Studio系列教程：如何创建自适应布局（一）

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 x:Key="ImageGridView_MobileItemTemplate" x:DataType="local:ImageFileInfo"> <!-- Create image grid --> <Grid Height="{Binding ItemSize, ElementName=page}" Width="{Binding ItemSize, ElementName=page}"> <!-- Place image in grid, stretching it to fill the pane--> <Image x:Name="ItemImage" Source="{x:Bind ImagePreview}" Stretch="UniformToFill"> </Image> </Grid> </DataTemplate>

   

• 将元数据添加到工具提示

  为了使用户依然能够访问每个图像的元数据，我们将会在每个图像项目中添加一个工具提示，即当你将鼠标悬停在缩略图上（或者长按触摸屏）时，将显示图像的标题、文件类型和尺寸。接下来，在刚创建的DataTemplate的Image标记中添加以下代码。

  <Image ...> <!-- Add a tooltip to the image that displays metadata --> <ToolTipService.ToolTip> <ToolTip x:Name="tooltip"> <!-- Arrange tooltip elements vertically --> <StackPanel Orientation="Vertical" Grid.Row="1"> <!-- Image title --> <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}" HorizontalAlignment="Center" Style="{StaticResource SubtitleTextBlockStyle}" /> <!-- Arrange elements horizontally --> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <!-- Image file type --> <TextBlock Text="{x:Bind ImageFileType}" HorizontalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" /> <!-- Image dimensions --> <TextBlock Text="{x:Bind ImageDimensions}" HorizontalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" Margin="8,0,0,0" /> </StackPanel> </StackPanel> </ToolTip> </ToolTipService.ToolTip> </Image>

   

• 添加 VisualState 资源库

  使用 VisualState 资源库告诉 VisualStateManager 在触发状态时要应用哪些属性。 每个资源库都以特定 XAML 元素的一个属性为目标，并将其设置为给定值。 将以下代码添加到你刚创建的移动版 VisualState 中 VisualState.StateTriggers 元素的下面。

  <VisualStateManager.VisualStateGroups> <VisualStateGroup> <!-- Add a new VisualState for mobile devices --> <VisualState x:Key="Mobile"> <!-- Trigger visualstate when a mobile device is detected --> <VisualState.StateTriggers> <local:MobileScreenTrigger InteractionMode="Touch" /> </VisualState.StateTriggers> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>

  这些资源库会将图像库的 ItemTemplate 设置为我们在第一部分中创建的新 DataTemplate，并将命令栏和缩放滑块与屏幕底部对齐，以便拇指能够在手机屏幕上更加轻松地触及。

• 运行应用

  现在我们可以尝试使用移动版仿真器运行应用，如果如下图所示，那么恭喜，你的新布局显示成功。

  

如果你想了解Visual Studio其他相关教程或下载最新试用版，请点击这里。

转载于:https://my.oschina.net/u/4087915/blog/3024063