Visual Studio是一款完备的工具和服务,可帮助您为Microsoft平台和其他平台创建各种各样的应用程序,同时还可以将您所有的项目、团队和利益干系人联系在一起。
本教程将为你介绍在Visual Studio中如何使用XAML创建自适应布局,利用这一知识,我们可以创建外观适用于任何设备的应用。在本教程中,我们将学习到如何创建新的DataTemplate、添加窗口吸附点,以及使用 VisualStateManager 和 AdaptiveTrigger 元素定制应用的布局。
第3部分:在单个设备上适应多个窗口大小
创建新定制布局可解决移动设备响应式设计的难题,但是台式机和平板电脑的情况又是怎样的呢?
该应用在全屏中可能看起来很美观,但如果用户收缩窗口,则最终可能会出现难看的界面。通过使用 VisualStateManager 在单个设备上适应多个窗口大小,我们可以确保最终用户体验始终感觉良好。
添加窗口吸附点
第一步是定义触发不同 VisualStates 所在的“吸附点”。 从解决方案资源管理器中打开 App.xaml,并在 Application 标记之间添加以下代码。
<Application.Resources> <!-- window width adaptive snap points --> <x:Double x:Key="MinWindowSnapPoint">0</x:Double> <x:Double x:Key="MediumWindowSnapPoint">641</x:Double> <x:Double x:Key="LargeWindowSnapPoint">1008</x:Double> </Application.Resources>复制代码
这会为我们提供三个吸附点,利用这些吸附点,我们可以为三个窗口大小范围创建新的 VisualStates:
- 小(宽度为 0 - 640 像素)
- 中等(宽度为 641 - 1007 像素)
- 大(宽度大于 1007 像素)
创建新的 VisualStates 和 StateTriggers
接下来,我们将创建与每个吸附点相对应的 VisualStates 和 StateTriggers。 在 MainPage.xaml 中,将以下代码添加到在第 2 部分创建的 VisualStateManager 中。
<VisualStateManager.VisualStateGroups> <VisualStateGroup> ... <!-- Large window VisualState --> <VisualState x:Key="LargeWindow"> <!-- Large window trigger --> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> <!-- Medium window VisualState --> <VisualState x:Key="MediumWindow"> <!-- Medium window trigger --> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> <!-- Small window VisualState --> <VisualState x:Key="SmallWindow"> <!-- Small window trigger --> <VisualState.StateTriggers > <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>复制代码
添加资源库
最后,将这些资源库添加至 SmallWindow 状态。
<VisualState x:Key="SmallWindow"> ... <!-- Small window setters --> <VisualState.Setters> <!-- Apply mobile itemtemplate and styles --> <Setter Target="ImageGridView.ItemTemplate" Value="{StaticResource ImageGridView_MobileItemTemplate}" /> <Setter Target="ImageGridView.ItemContainerStyle" Value="{StaticResource ImageGridView_MobileItemContainerStyle}" /> <!-- Adjust the zoom slider to fit small windows--> <Setter Target="ZoomSlider.Minimum" Value="80" /> <Setter Target="ZoomSlider.Maximum" Value="180" /> <Setter Target="ZoomSlider.TickFrequency" Value="20" /> <Setter Target="ZoomSlider.Value" Value="100" /> </VisualState.Setters> </VisualState>复制代码
每当视区的宽度小于 641 像素时,这些资源库就会将移动版 DataTemplate 和样式应用于桌面应用。 它们还会调整缩放滑块以更好地适应小屏幕。
运行应用
在 Visual Studio 工具栏中,将目标设备设置为本地计算机,并运行该应用。 加载该应用时,请尝试更改窗口的大小。 当你将窗口缩小为小尺寸时,应该会看到应用切换为你在第 2 部分中创建的移动布局。
现在,你已完成本实验,并且拥有足够的自适应布局知识,可以自行进行进一步的实验。可以尝试向你之前添加的仅限于移动版的工具提示添加评级控件。 或者,作为一项较大的挑战,尝试一下为较大的屏幕大小优化布局(考虑电视屏幕或 Surface Studio)。
如果你想了解Visual Studio其他相关教程或下载最新试用版,请点击这里。