十一月初,微软的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:这个控件用来实现页面的切换效果。

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

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(这个没有模式设置)、RotateTransitionSlideTransitionSwivelTransitionTurnstileTransition

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

3.最重要的修改:

App.xaml.csInitializePhoneApplication()函数里的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.csPeopleInGroup.csPerson.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

 

 

posted on 2010-11-15 11:47  小镇  阅读(4296)  评论(7编辑  收藏  举报