现代操作系统应用开发：UWP——自适应界面Adaptive UI(一)

功能简介

UWP 自适应界面，布局面板依据可用的屏幕空间，指定界面元素的大小和位置，设置相应控件的属性；

示例项目的实现的功能：

• 当窗口大小大于600时，同时并排显示两张图片
• 当窗口大小小于600时，只显示一张图片

实现效果

• 宽屏状态下：

• 窄屏状态下：

实现过程

在MainPage.xml中创建需要的控件

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!-- 创建了两个Image控件，放在Grid的第一列和第二列 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*" x:Name="RightColumn"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="Assets/left.jpg" ></Image>
    <Image Grid.Column="1" Source="Assets/right.jpg"></Image>
</Grid>

使用VisualStateManager

在你要添加自适应的Grid添加下面这段代码，这里主要是设置了不同的VisualState，直译就是可视状态，不同的可视状态可以在Setter中设置自己想要的值

<VisualStateManager.VisualS