Windows phone UI虚拟化和数据虚拟化(一)
2014-03-03 16:33
435 查看
今天和大家分享一些关于windows phone ui虚拟化和数据虚拟化的一些知识。
也顺便回答我上一篇【LongListSelector 控件 在 wp7 和wp8中的不同之处】里,留下的那个问题,微软为什么推荐使用longlistselector.
已经是帮我们实现了虚拟化。我们只需要注意别把美好的虚拟化破坏掉就好了。
![](http://images.cnitblog.com/blog/22572/201401/171528194084.png)
MainPageViewMode.cs
public
class
MainPageViewModel
{
//省略
public MainPageViewModel()
{ //我们模拟1000条商品数据
listProduct =
new List<Product>(1000);
for (int i = 0; i < 1000; i++)
{
listProduct.Add(new
Product { Id = i, Name =
"产品-" + rnd.Next(1000, 10000).ToString(), Category =
"" });
} }
}
Mainpage.xaml
<DataTemplate x:Key="LBDataTemplate">
<Grid Loaded="Grid_Loaded" d:DesignWidth="411.045"
d:DesignHeight="78.209">
<TextBlock HorizontalAlignment="Left" Margin="10,17,0,25"
TextWrapping="Wrap"
Foreground="Black"
Text="{Binding Name}" Height="36"
Width="197" FontSize="30"/>
</Grid>
</DataTemplate>
<ListBox Background="AliceBlue" ItemsSource="{Binding
ListProduct}" x:Name="listbox" Grid.Row="1" ItemTemplate="{StaticResource
LBDataTemplate}" />
Loaded="Grid_Loaded" 此事件触发说明模板被加载。这里我们用的是ListBox控件
public MainPage()
{
InitializeComponent();
vm=
new MainPageViewModel();
LayoutRoot.DataContext = vm;
}
private
void Grid_Loaded(object sender,
RoutedEventArgs e)
{
vm.LoadItemCounter++;//界面上item被渲染的数目
}
![](http://images.cnitblog.com/blog/22572/201401/171528198775.png)
![](http://images.cnitblog.com/blog/22572/201401/171528204391.png)
我们看到我们绑定的数据源有1000条数据,页面加载后item只渲染了21个。看似是有这样一个规律的 可视区域数目*2+3
![](http://images.cnitblog.com/blog/22572/201401/171528207209.png)
![](http://images.cnitblog.com/blog/22572/201401/171528214083.png)
<StackPanel/>
</ItemsPanelTemplate>
![](http://images.cnitblog.com/blog/22572/201401/171528219397.png)
因为实现listbox的关键是默认的容器 VirtualizingStackPanel
通过工具编辑变成了StackPanel
改回VirtualizingStackPanel
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
![](http://images.cnitblog.com/blog/22572/201401/171528222671.png)
好,到这里们我己经掌握了,什么是UI虚拟化,如何避免常见的破坏UI虚拟化的场景。
![](http://images.cnitblog.com/blog/22572/201401/171528225642.png)
那么为什么微软官方推荐我们用longlistselector代替ListBox呢?
![](http://images.cnitblog.com/blog/22572/201401/171528229391.png)
是的,Longlistselector的 DataTemplate得到了复用。我们的item的datatemplate不会再渲染新的了。
打完,收功!
也顺便回答我上一篇【LongListSelector 控件 在 wp7 和wp8中的不同之处】里,留下的那个问题,微软为什么推荐使用longlistselector.
如果不是新人,那么对于"虚拟化"这个词应该不陌生。
"虚拟化"简单来说,就是在数据量很大的时候,我们只加载与可视区域(如手机屏幕)相应的少量数据。
我们先来看一下UI虚拟化。
一:Windows phone UI虚拟化
对于wp的ui虚拟化,其实我们并不需要花太多心思,因为系统自带且用的最多的listbox 和longlistselector。
已经是帮我们实现了虚拟化。我们只需要注意别把美好的虚拟化破坏掉就好了。
1.首先,演示一下虚拟化。
![](http://images.cnitblog.com/blog/22572/201401/171528194084.png)
MainPageViewMode.cs
public
class
MainPageViewModel
{
//省略
public MainPageViewModel()
{ //我们模拟1000条商品数据
listProduct =
new List<Product>(1000);
for (int i = 0; i < 1000; i++)
{
listProduct.Add(new
Product { Id = i, Name =
"产品-" + rnd.Next(1000, 10000).ToString(), Category =
"" });
} }
}
Mainpage.xaml
<DataTemplate x:Key="LBDataTemplate">
<Grid Loaded="Grid_Loaded" d:DesignWidth="411.045"
d:DesignHeight="78.209">
<TextBlock HorizontalAlignment="Left" Margin="10,17,0,25"
TextWrapping="Wrap"
Foreground="Black"
Text="{Binding Name}" Height="36"
Width="197" FontSize="30"/>
</Grid>
</DataTemplate>
<ListBox Background="AliceBlue" ItemsSource="{Binding
ListProduct}" x:Name="listbox" Grid.Row="1" ItemTemplate="{StaticResource
LBDataTemplate}" />
Loaded="Grid_Loaded" 此事件触发说明模板被加载。这里我们用的是ListBox控件
MainPage.cs
MainPageViewModel vm;public MainPage()
{
InitializeComponent();
vm=
new MainPageViewModel();
LayoutRoot.DataContext = vm;
}
private
void Grid_Loaded(object sender,
RoutedEventArgs e)
{
vm.LoadItemCounter++;//界面上item被渲染的数目
}
![](http://images.cnitblog.com/blog/22572/201401/171528198775.png)
![](http://images.cnitblog.com/blog/22572/201401/171528204391.png)
我们看到我们绑定的数据源有1000条数据,页面加载后item只渲染了21个。看似是有这样一个规律的 可视区域数目*2+3
随着我们滑动列表,Item也在不断被渲染。
![](http://images.cnitblog.com/blog/22572/201401/171528207209.png)
嗯哪,这就是所谓的UI虚拟化了。
2.常见的破坏虚拟化的场景
很多时候,我们在编辑模板的时候,会破坏掉虚拟化。看下面
![](http://images.cnitblog.com/blog/22572/201401/171528214083.png)
当我们编辑ListBox的ItemsPanel的时候,工具帮我们自动生成了下面的代码。
<ItemsPanelTemplate x:Key="ItemsPanelTemplate"><StackPanel/>
</ItemsPanelTemplate>
这时候我们再次运行
![](http://images.cnitblog.com/blog/22572/201401/171528219397.png)
WoW ! 这次页面一加载,ListBox就在不停地渲染Item.直至全部!
为什么会产生这种情况?因为实现listbox的关键是默认的容器 VirtualizingStackPanel
通过工具编辑变成了StackPanel
改回VirtualizingStackPanel
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
![](http://images.cnitblog.com/blog/22572/201401/171528222671.png)
呼! 星星又亮了!
好,到这里们我己经掌握了,什么是UI虚拟化,如何避免常见的破坏UI虚拟化的场景。
以及如何判断我们对控件更改后,节操和虚拟化还在不在。
妈妈再也不用担心我们不小心破坏虚拟化了!
下面我们来看一下LonglistSelector还是上面的例子。我们把<ListBox 换成 <phone:LongListSelector 去掉ItemsPanel="{StaticResource ItemsPanelTemplate}"
![](http://images.cnitblog.com/blog/22572/201401/171528225642.png)
还是虚拟化,只不过默认生成的item数不一样了。
那么为什么微软官方推荐我们用longlistselector代替ListBox呢?
我们继续滑动。
看输出!
![](http://images.cnitblog.com/blog/22572/201401/171528229391.png)
什么!!!还是31,没反应?!!!
是的,Longlistselector的 DataTemplate得到了复用。我们的item的datatemplate不会再渲染新的了。
打完,收功!
东西有点多,分两篇吧,下一篇是对性能提升更有用处的数据虚拟化。
附件Demo
转自:http://www.cnblogs.com/beyoung/p/windows-phone-Virtualizing.html相关文章推荐
- Windows phone UI虚拟化和数据虚拟化
- Windows phone UI虚拟化和数据虚拟化(二)
- Windows phone UI虚拟化和数据虚拟化(一)
- Windows phone UI虚拟化和数据虚拟化(二)
- Windows phone UI流畅度优化
- Windows Phone UI 风格
- C# Windows Phone App 开发,自制LockScreen 锁定画面类别(Class),从【网路图片】、【Assets资源】、【UI】修改锁定画面。
- Windows Phone UI控件
- C# Windows Phone App 开发,修改【锁定画面】,从【Assets】、【UI】、【网路图片】,并解决失灵问题。
- Windows Phone UI 开发中的各种诡异
- Windows Phone Listbox虚拟化的问题
- [WP8.1UI控件编程]Windows Phone VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虚拟化排列布局控件
- windows phone UI吐槽---跑偏了就再也跑不回来了
- 分享Silverlight/WPF/Windows Phone一周学习导读(10月1日-10月15日)
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(1月16日-2月5日)
- Windows Phone Dev Center - Simulation Dashboard for Windows Phone
- 免费Ebook 分享《Silverlight for Windows Phone Toolkit in Depth》
- 我为博客园打造的全新版windows phone Pre
- Silverlight for Windows Phone 7:Dotfuscator - 保护您的应用程序
- Windows Live & Windows Phone 7