功能简介

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.VisualStateGroups>
    <VisualStateGroup x:Name="LayoutVisualStates">
        <!-- 这里设置了两个VisualState：WideLayout和NarrowLayout,x:Name是你自己取得名字 -->
        <VisualState x:Name="WideLayout">
            <VisualState.Setters>
                <!-- 
                这里实际上可以包括多个setter，Target为对应控件的属性，Value为你想要设置的属性值 
                当处于WideLayout状态下时，RightColumn（对应是哪个控件见上面）的宽度被设置为*
               -->
                <Setter Target="RightColumn.Width" Value="*"></Setter>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="NarrowLayout">
            <!-- 这里也是同样的道理 -->
            <VisualState.Setters>
                <Setter Target="RightColumn.Width" Value="0"></Setter>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

在构造函数上添加函数监听窗口尺寸变化

public MainPage()
{
    this.InitializeComponent();
    /*
    * C#事件订阅
    * Lambda表达式，s和e为传入参数
    */
    this.SizeChanged += (s, e) =>
    {
        //首先，state默认设置为WideLayout（WideLayout是你在xaml里设置的名字）
        var state = "WideLayout";
        if (e.NewSize.Width > 000 && e.NewSize.Width < 600)
        {
            //如果界面小于600，则将state设置为NarrowLayout
            state = "NarrowLayout";
        }
        //这里将变换State
        VisualStateManager.GoToState(this, state, true);
    };
}

补充

关于

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="20" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="30" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="0" Grid.Column="1" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="0" Grid.Column="2" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="1" Grid.Column="0" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="1" Grid.Column="1" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="1" Grid.Column="2" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="2" Grid.Column="0" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="2" Grid.Column="1" BorderBrush="AliceBlue" BorderThickness="3"></Grid>
<Grid Grid.Row="2" Grid.Column="2" BorderBrush="AliceBlue" BorderThickness="3"></Grid>

效果截图：

总结

整个自适应界面的实现过程大致就是这样了，其实这其中最重要的部分就是第二部分，VisualStateManager中Setter的设置，除了文中提到的Width设置，你还可以根据自己的需要设置不同的值，反正可以在Xaml文件中设置的控件的属性值都利用Setter设置

FYI

项目下载：AdaptiveUISample

友链：C# 事件订阅

项目下载之后记住把Debug模式从ARM换成X86或X64（根据你自己的机型选择），之前一开始学习的时候不知道这一点，从网上下载下来的项目都运行不了，纠结的一逼(╥╯^╰╥)

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