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

Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序，同时还可以将您所有的项目、团队和利益干系人联系在一起。

本教程将为你介绍在Visual Studio中如何使用XAML创建自适应布局，利用这一知识，我们可以创建外观适用于任何设备的应用。在本教程中，我们将学习到如何创建新的DataTemplate、添加窗口吸附点，以及使用 VisualStateManager 和 AdaptiveTrigger 元素定制应用的布局。

Visual Studio最新版本免费下载试用

第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其他相关教程或下载最新试用版，请点击这里。