DEVDIV.COM

诺基亚WP

736

扩展控件（Siverlight Toolkit 控件库）

2012-2-5 21:13| 发布者: max| 评论: 0|原作者: WindowsPhone

Siverlight Toolkit for Windows Phone 7是是微软Siverligt团队的一个产品，在Siverlight Toolkit的基础上，专门为wp7打造的开源控件库，这个控件库给我们提供了一些控件，丰富了wp7的UI，这个库默认并没有与开发工具一起安装，需要我们单独下载，下载网址，如下：
http://silverlight.codeplex.com/releases/view/60291
下载完成后需要我们安装，但是你会发现，安装后并没有在工具箱中出现，其实我们只要在工具箱上点右键，然后选择Choose Items，然后勾选即可出现，标准的控件如果没有出现在工具箱上你也可以用这种方式添加。

1.jpg


Siverlight Toolkit for Windows Phone 7给我们提供了一下组件：
AutoCompleteBox ：带有联想功能的输入框
ContextMenu ：右键菜单，在手机上就是长按了。
DatePicker ：日期选择控件
GestureService/GestureListener ：手势
ListPicker ：类似ComboBox的控件
LongListSelector ：归类列表控件
Page Transitions ：翻页特效
PerformanceProgressBar ：进度条
TiltEffect ：使控件按下去后有倾斜的效果
TimePicker ：时间选择控件
ToggleSwitch ：开关控件
WrapPanel：
由于篇幅有限，这一节我们只讲翻页特效Page Transitions 和ListPicker，其它的请读者自己查看安装目录下的例子。
翻页特效:
1. 在References上点右键出现如下图，然后选择Add Reference
         
        2.jpg

       
2.找到Microsoft.Phone.Controls.oolkit并单击OK
         
        3.jpg

       
于是Microsoft.Phone.Controls.oolkit就被添加到工程里了
         
        4.jpg

       
3.在xmal页面添加
  1. xmlns:SLtoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
复制代码
5.jpg

       
4.在    <!--LayoutRoot is the root grid where all page content is placed-->
上添加如下
  1. <toolkit:TransitionService.NavigationInTransition>
  2.         <toolkit:NavigationInTransition>//进入页面时的动画
  3.             <toolkit:NavigationInTransition.Backward>
  4.                 <toolkit:RotateTransition Mode="In180clockwise"/>
  5.             </toolkit:NavigationInTransition.Backward>
  6.             <toolkit:NavigationInTransition.Forward>
  7.                 <toolkit:RotateTransition Mode="In180Clockwise"/>
  8.             </toolkit:NavigationInTransition.Forward>
  9.         </toolkit:NavigationInTransition>
  10.     </toolkit:TransitionService.NavigationInTransition>
  11.     <toolkit:TransitionService.NavigationOutTransition>
  12.         <toolkit:NavigationOutTransition>//离开时的动画
  13.             <toolkit:NavigationOutTransition.Backward>
  14.                 <toolkit:TurnstileTransition Mode="BackwardOut"/>
  15.             </toolkit:NavigationOutTransition.Backward>
  16.             <toolkit:NavigationOutTransition.Forward>
  17.                 <toolkit:TurnstileTransition Mode="ForwardOut"/>
  18.             </toolkit:NavigationOutTransition.Forward>
  19.         </toolkit:NavigationOutTransition>
  20.     </toolkit:TransitionService.NavigationOutTransition>
复制代码
App.xaml.cs中的InitializePhoneApplication() 函数里把RootFrame = new PhoneApplicationFrame();改为 RootFrame = new TransitionFrame();

至此大功告成了，此外还有RollTransition、SlideTransition、SwivelTransition、TurnstileTransition这四个特效，请读者自己动手试验。

ListPicker：

6.jpg
  1. <SLtoolkit:ListPicker >
  2.                 <SLtoolkit:ListPickerItem Content="吃饭" />
  3.                 <SLtoolkit:ListPickerItem Content="睡觉" />
  4.                 <SLtoolkit:ListPickerItem Content="上班" />
  5.             </SLtoolkit:ListPicker>
复制代码
我们还可以把ListPicker设置为全屏模式

7.jpg
  1. <SLtoolkit:ListPicker x:Name="lp" Height="556" HorizontalAlignment="Left" ListPickerMode="Full" VerticalAlignment="Top" Width="434" ItemCountThreshold="3" Header="联系人" FullModeHeader="大红人" Background="LightBlue" >
  2.                 <SLtoolkit:ListPicker.FullModeItemTemplate>
  3.                     <DataTemplate>
  4.                         <StackPanel Orientation="Horizontal" Opacity="0.7">
  5.                             <TextBlock Text="{Binding Id}" Margin="5" Foreground="Green" VerticalAlignment="Center" FontSize="32" />
  6.                             <TextBlock Text="{Binding Name}" VerticalAlignment="Center" FontSize="32" />
  7.                         </StackPanel>
  8.                     </DataTemplate>
  9.                 </SLtoolkit:ListPicker.FullModeItemTemplate>
  10.             </SLtoolkit:ListPicker>
复制代码
定义一个全屏的模版，分别绑定Id和Name属性，Opacity为置透明度。
  1. public partial class ToolkitControls : PhoneApplicationPage
  2.     {
  3.         public List<Pepole> list;
  4.         public ToolkitControls()
  5.         {
  6.             InitializeComponent();
  7.             list = new List<Pepole>();
  8.             list.Add(new Pepole() { Id = 0, Name = "张三" });
  9.             list.Add(new Pepole() { Id = 1, Name = "李四" });
  10.             list.Add(new Pepole() { Id = 2, Name = "王五" });
  11.             list.Add(new Pepole() { Id = 3, Name = "赵六´" });
  12.             list.Add(new Pepole() { Id = 4, Name = "阿猫" });
  13.             list.Add(new Pepole() { Id = 5, Name = "阿狗" });
  14.             list.Add(new Pepole() { Id = 6, Name = "旺财" });
  15.             list.Add(new Pepole() { Id = 7, Name = "小顺子 });
  16.             lp.ItemsSource = list;
  17.         }
  18.     }

  20.     public class Pepole
  21.     {
  22.         public int Id { get; set; }
  23.         public string Name { get; set; }
  24. }
复制代码
定义一个类Pepole，设置两个属性，定义一个list，给它赋值并赋给ListPicker的数据源


顶
怒
悦
喷
收藏 分享

发现更多精彩

联系我们

电话：

邮件：

及时将最新信息发给我

通过Email及时将最新的模板和服务发给我。

关注微博

及时了解我们最新动态。关注我们的微博

DEVDIV新浪微博

DEVDIV腾讯微博

关于我们

关于我们|手机版|Archiver|DEVDIV.COM ( 京ICP备07040843号 )  

GMT+8, 2012-5-19 15:57

Powered by DEVDIV.COM!

© 2010-2012 DEVDIV.COM Coummunity.

回顶部