一起学windows phone7开发(二十五.Toolkit 增补)

     十一月初，微软的silverlight toolkit for phone又放出四个新控件，这四个控件使用都要比之前的复杂，并且很有用。

一．              AutoCompleteBox:这个控件很像ajax里的输入框，可以联想词。不过需要自已生成一个词库文件，还要编写代码来加载词载。在silverlgiht toolkit sample里面已经有这个示例代码了（loremIpsum.cs,loremIpsum.txt，这里只是一个拉丁文的测试文件，所以需要自已来实现字库文件）。

<phone:PhoneApplicationPage.Resources>//把字库以资源方式载入

      <data:LoremIpsum x:Key="words"/>

 </phone:PhoneApplicationPage.Resources>

 

<toolkit:AutoCompleteBox HorizontalAlignment="Left" Margin="82,32,0,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="291" Height="72" ItemsSource="{StaticResource words}" />

 

另外还可以产生一个两行的联想串。不过需要自已编程并binding.

 

二． NavigationTransition：这个控件用来实现页面的切换效果。

在正式版中，页面间的切换没有动画效果，很多朋友也都问过我怎么实现，以前的方法可以通过VisualStateManager对Grid施加动画效果来模拟，但是对VisualStateManager或blend工具不熟悉的人来说还是挺难的。不过现在好了，出来这么一个控件，只要加载到页面，简单设置一下就可以出现多种页面动画效果，非常好用。

1.首先在xaml中加入toolkit 声明：xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

2.在xaml中手工加入这个控件：

<toolkit:TransitionService.NavigationInTransition>//进入页面动画效果

        <toolkit:NavigationInTransition>

            <toolkit:NavigationInTransition.Backward>

                <toolkit:RotateTransition Mode="In180Clockwise"/>//这是一个旋转的动画效果

            </toolkit:NavigationInTransition.Backward>

            <toolkit:NavigationInTransition.Forward>

                <toolkit:RotateTransition Mode="In180Clockwise"/>

            </toolkit:NavigationInTransition.Forward>

        </toolkit:NavigationInTransition>

    </toolkit:TransitionService.NavigationInTransition>

    <toolkit:TransitionService.NavigationOutTransition>//退出页面动画效果

        <toolkit:NavigationOutTransition>

            <toolkit:NavigationOutTransition.Backward>

                <toolkit:RotateTransition Mode="Out180Clockwise"/>

            </toolkit:NavigationOutTransition.Backward>

            <toolkit:NavigationOutTransition.Forward>

                <toolkit:RotateTransition Mode="Out180Clockwise"/>

            </toolkit:NavigationOutTransition.Forward>

        </toolkit:NavigationOutTransition>

    </toolkit:TransitionService.NavigationOutTransition>

对于这个控件共有五种动画效果,以及每种动画都有多种模式的设置：RollTransition（这个没有模式设置）、RotateTransition、SlideTransition、SwivelTransition、TurnstileTransition

另外，进入和退出页面的动画效果是可以设置为不同的效果的。

3.最重要的修改：

将App.xaml.cs中InitializePhoneApplication()函数里的RootFrame进行修改,如果不改的话，是没有动画效果的。

//RootFrame = new PhoneApplicationFrame();

RootFrame = new TransitionFrame();

 

三． ListPicker:当点中这个控件时，会弹出一个列表来，这个列表有两种，一种是简单的像下拉列表框那样的，还有一种是Full Mode的，会弹出一个完整页面的列表来。

1. 简单列表：

<toolkit:ListPicker Height="220" HorizontalAlignment="Left" Margin="12,381,0,0"  Name="listPicker1" VerticalAlignment="Top" Width="438" Header="Test1"  SelectionChanged="listPicker1_SelectionChanged">

     <sys:String>Red</sys:String>//可以为列表只加入几个字符串

     <sys:String>Green</sys:String>

     <sys:String>Blue</sys:String>

 </toolkit:ListPicker>

SelectionChanged:用来响应列表选中的项。

 

1. Full Mode:

    <toolkit:ListPicker ItemsSource="{Binding}" Height="88" HorizontalAlignment="Left" Margin="6,513,0,0" Name="listPicker2" VerticalAlignment="Top" Width="444" Header="Test2" FullModeHeader="Colors" >

         <toolkit:ListPicker.ItemTemplate>

             <DataTemplate>//设置在显示框中的显示样式

                   <StackPanel Orientation="Horizontal">

                       <Rectangle Fill="{Binding}" Width="24" Height="24"/>

                       <TextBlock Text="{Binding}" Margin="12 0 0 0"/>

                    </StackPanel>

             </DataTemplate>

       </toolkit:ListPicker.ItemTemplate>

            </toolkit:ListPicker>

FullModeHeader:给Full Mode列表加标题名

ItemsSource:绑定要显示在列表中的内容

绑定显示内容的方法有两种：

a. ItemsSource="{Binding}"//在xaml中绑定，这时一定要把要绑定的列表传给系统的 DataContext = AccentColors;

 b. listPicker2.ItemsSource = AccentColors;//动态绑定列表项

 

也可以对列表项的样式进行设置：

<toolkit:ListPicker.FullModeItemTemplate>

      <DataTemplate>

          <StackPanel Orientation="Horizontal" Margin="16 21 0 20">

                 <Rectangle Fill="{Binding}" Width="50" Height="50"/>

                 <TextBlock Text="{Binding}" Margin="12 10 0 0"/>

           </StackPanel>

       </DataTemplate>

</toolkit:ListPicker.FullModeItemTemplate>

 

 

四． LongListSelector:这个控件是一个归类列表，并且可以快速选择按类选择。这个控件最主要的是要把需要的数据进行绑定和分类，在sample中有一个People的例子（PeopleByFirstName.cs、PeopleInGroup.cs、Person.cs这几个文件可以看出如何实现）

<toolkit:LongListSelector HorizontalAlignment="Left" Margin="12,162,0,0" Name="longListSelector1" VerticalAlignment="Top" Height="213" Width="438" ItemsSource="{StaticResource people}">//绑定ItemsSource, people是通过编程得到的资源

 

<toolkit:LongListSelector.GroupItemsPanel>//设置以什么样的方式显示分类列表，如果没有这个设置，分类列表以直列显示

<toolkit:LongListSelector.GroupItemTemplate>//分类列表内的item显示内容和方式

<toolkit:LongListSelector.GroupHeaderTemplate>//设置列表分类的头的显示内容和方式

 <toolkit:LongListSelector.ItemTemplate>//设置列表里的内容的显示方式

 

 

示例代码：http://www.52winphone.com/bbs/viewthread.php?tid=30&extra=page%3D1 testnewcontrols