04、数据绑定控件 ListBox 的一个 Bug

同事这两天在做 universal 项目的时候，遇到一个诡异的问题，即使设置 Page 为

缓存状态， 在页面跳转后， ListBox 的位置不会被缓存，怀疑是页面的缓存状态出了问题：

this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

写了一个 demo，测试了一下：

1）在程序启动的时候，默认显示 PivotPage 页面。分别放置 ListView、 ItemsControl、ListBox 控件：

<Pivot Title="Pivot">
    <PivotItem Header="PivotItem 1">
        <Grid>
            <ListView x:Name="lv1" ItemsSource="{Binding list}"/>
        </Grid>
    </PivotItem>

    <PivotItem Header="PivotItem 2">
        <Grid>
            <ScrollViewer>
                <ItemsControl x:Name="lv2" ItemsSource="{Binding list}"/>
            </ScrollViewer>
        </Grid>
    </PivotItem>

    <PivotItem Header="PivotItem 3">
        <Grid>
            <ListBox IsTapEnabled="False" x:Name="lv3" ItemsSource="{Binding list}"/>
        </Grid>
    </PivotItem>
</Pivot>
<Button Content="Page2" Click="Button_Click" HorizontalAlignment="Left" Margin="261,531,0,0" VerticalAlignment="Top"/>

2）在 C# 页面，进行数据绑定：

 public List<string> list { get; set; }

 public PivotPage()
 {
     this.InitializeComponent();

     this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

     // 填充字符串
     list = new List<string>();

     for (int i = 1; i < 200; i++)
     {
         list.Add("测试内容 ： " + i);
     }

     // 设置当前页面的上下文为 this
     this.DataContext = this;
 }

 

放置一个跳转按钮：

 private void Button_Click(object sender, RoutedEventArgs e)
 {
     Frame.Navigate(typeof(Page2));
 }

页面启动后，分别滑动  ListView、ItemsControl、ListBox 控件：

3）点击 按钮，跳转到 Page2, 然后再 点击 GoBack 按钮:

回到 PivotPage 后， 滑动 ListBox 控件，就会诡异的返回到第一项。而 ListView 和 ItemsControl 没有这个问题：

    另外，我怀疑，在 store app 中，ListBox 其实是作为一个  multiple ListPicker 用的，

数据绑定重点使用 ListView　和 GridView 了，个人的猜测 ....

补充：

 1、针对 ListBox：

     ItemsPanel 属性 默认应该是 VirtualizingStackPanel ，当返回的时候，会返回顶部：

 

当换为 ItemsStackPanel 时，就没问题了，导航返回后，单击不会返回顶部：

(ItemsStackPannel: MSDN)

2、 ListView 控件在做 折行布局时，如果 ListView 的ItemsPanel属性为WrapGrid 则在 Navigate  back 的时候，

如果滑动列表，则会返回顶部；如果为 ItemsWrapGrid，则不会:

<ListView x:Name="lv1" ItemsSource="{Binding list}" ItemTemplate="{StaticResource template}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>                                
            <ItemsWrapGrid  Orientation="Horizontal"/> <!-- 如果使用 <WrapGrid/> 作为容器，则出现导航回来后，返回顶部-->
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

 

Demo 下载链接

Demo2 下载链接