特效：ListBox数据加载特效

应用程序在加载数据的时候，总是死死的瞬间显示，会不会觉得乏味呢？  一般显示列表数据使用的ListBox控件 , 这里我写了一个ListBox的数据加载效果，请大家围观 (顺便扯蛋一句，Silverlight的中实现此效果方法类似),  好了废话不多说， 上代码 !!!

逐个加载数据代码:

1.         private int i = 0;
2.         private List<Users> list = new List<Users>();
3.         private DispatcherTimer dt = new DispatcherTimer() { Interval = new TimeSpan(0, 0, 0, 0, 100) };
4.         private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
5.         {
6.             /*加载xml内容*/
7.             XDocument x = XDocument.Parse(Tools.WriteOrReadToFile("xml/Config.xml", null, Enums.FileType.读));
8.             foreach (XElement temp in x.Element("root").Element("users").Elements())
9.             {
10.                 Users user = new Users() { Address = temp.Attribute("Address").Value, Age = temp.Attribute("Age").Value, EnglishName = temp.Attribute("EnglishName").Value, Name = temp.Attribute("Name").Value };
11.                 list.Add(user);
12.             }
14. /*这里必须新开一个线程去执行加载，不然ListBox还是会同时显示数据项*/
15. /*DispatcherTimer也是一个线程*/
17.             dt.Tick += new EventHandler(dt_Tick);          
18.             dt.Start();
19.         }
20.         void dt_Tick(object sender, EventArgs e)
21.         {
22.             if (i < list.Count)
23.             {
24.                 listBox1.Items.Add(list[i]);         //添加数据
25.                 i++;
26.             }
27.             else
28.             {
29.                 i = 0;
30.                 dt.Stop();
31.             }
32.         }

复制代码

接着编辑ListBox的ItemContainerStyle模版,创建一个状态组，再创建一个状态，打开故事板,在0秒的时候把ContentContainer的透明度设置成"0",    0.5秒的时候设置成1,这就是传说中的淡出效果,再给ContentContainer添加一个GoToStateAction触发器，在Load事件里调用自己定义的状态, F5 ,搞定！

1. <VisualStateGroup x:Name="VisualStateGroup">
2.           <VisualState x:Name="VisualState">
3.                      <Storyboard>
4.                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentContainer">
5.                                           <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
6.                                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
7.                                   </DoubleAnimationUsingKeyFrames>
8.                        </Storyboard>
9.               </VisualState>
10.   </VisualStateGroup>

复制代码