UWP应用中的双页面视图

前几天一直在研究在UWP中如何实现双页面视图，如下图所示。昨天偶然发现一篇相关文章，使我茅塞顿开，我又对其中的代码修改了一下，于是出现了这篇博客……

先上参考文章的的链接：用UWP实现一个和win10设置页面类似的布局

                                        UWP怎么双击后退按钮完全退出应用

思路是用RelativePanel实现，左边是ListView，右边是Frame。如代码所示：

<RelativePanel Margin="0,10,0,0">
            <!--左半部分的list-->
            <ListView x:Name="left" IsItemClickEnabled="True" SelectionMode="None" ItemClick="left_ItemClick">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="10">
                            <TextBlock>                                
                                <Run Text="Item: "></Run>
                                <Run Text="{Binding}"></Run>
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <!--右半部份的详细信息-->
            <Frame Name="right"></Frame>
        </RelativePanel>

后台的数据绑定：

public MainPage()
        {
            this.InitializeComponent();
            left.ItemsSource = Enumerable.Range(1, 10).ToList();
        }

这个页面中，我们准备在窗口宽度小于500时显示窄布局，大于500时显示宽布局，下面就是我们的VisualState发挥作用的时候了。我们先创建一个VisualStateGroup，只用来针对窗口大小来调整布局。

<VisualStateManager.VisualStateGroups>
            <!--这个group里的VisualState只针对窗口宽度调整布局，不涉及设备-->
            <VisualStateGroup x:Name="windowSize">
                <!--宽屏设置-->