前几天一直在研究在UWP中如何实现双页面视图,如下图所示。昨天偶然发现一篇相关文章,使我茅塞顿开,我又对其中的代码修改了一下,于是出现了这篇博客……
先上参考文章的的链接:用UWP实现一个和win10设置页面类似的布局
思路是用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">
<!--宽屏设置-->