SilverlightToolkit
|
Microsoft Silverlight for Windows Phone Toolkit是由微软Silverlight团队为Windows Phone 7开发的一组Silverlight组件包。它在Windows Phone 7标准组件之外提供了一套控件和组件包。其目标是更加快速地提供控件和新功能。
Toolkit组件可以从网上下载，同时微软还提供了对应Toolkit的源文件和范例代码压缩包下载。 下载地址：http://silverlight.codeplex.com/releases/view/75888
下载之后我们可以进行傻瓜式的安装，它会默认在C:\Program Files\Microsoft SDKs\Windows Phone\v7.1的文件夹下就有了这个toolkit，在使用到的时候，打开vs2010，然后在Toolbox（工具箱）中右键选择“选择项”，浏览中找到这个目录，然后选择Microsoft.Phone.Controls.Toolkit.dll文件，之后在Windows Phone Components列表中选择要使用的新控件。 但是在这里要注意版本的问题，笔者遇到了这样的问题，在wp7sdk7.1中之前使用过一个版本，虽然说是7.0的Silverlight Toolkit，但是在项目中可以使用，但是在这次装了7.1的Silverlight Toolkit之后不能正常使用，在添加.dll文件的时候提示出错了，于是笔者就卸载了刚装的Silverlight Toolkit，再次代开工具箱的添加项对话框，发现之前使用过的工具也都报错，系统自动剔除了之前使用过的Silverlight Toolkit控件，于是再次安装7.1的Silverlight Toolkit，这次问题竟然解决了，虽然繁琐，但是把方法写出来，希望对遇到同样问题的朋友有所帮助。 接下来就是在xaml设计中使用它们了，但是要在xaml中输入命名空间 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"，这个命名空间的书写理解起来也很明确（见名知意），xmlns即xml的namespace，命名空间中要引用的是“toolkit”，clr即公共语言运行时编译，在clr下的命名空间，使用的是Microsoft.Phone.Controls,程序集（assembly）为Microsoft.Phone.Controls.Toolkit。其实可以不用手动写这个命名空间，只要把一个控件拖拽到xmal页面中，程序就会自动在的头标签中添加这一命名空间。
ContentMenu控件 使用ContentMenu可以在某些组件上通过长按显示弹出式菜单。只要在需要长按显示菜单的控件中加入ContentMenu即可。 在ContentMenu中，MenuItem表示菜单项，可以是文字，也可以是图标。而Separator表示菜单分隔符，其实就是一条横线。我们可以像WinForm中给每一个菜单项添加相应的事件，如Click事件。 例子中我们把一张图片设置成当点击长按的时候弹出菜单，点击相应菜单项的时候会出现相应的提示。
DatePicker（日期选择器）和TimePicker（时间选择器） 这两个控件在实际编程中相当常用。用法相当简单。我们可以给上述两个控件添加ValueChanged事件来说明值发生变化的时候会有什么事情。 在例子中我们会使用长日期格式和自定义24小时表示。在值发生变化的时候在TextBlock中给出相应的值。这是通过设置ValueStringFormat属性来规定显示格式的。 常用日期和时间显示格式
默认的，日期选择器使用短日期格式，时间选择器使用短时间格式。
ToggleSwitch（开关控件） 在实际编程中开关的使用是很经常的，这个控件常用做蓝牙及Wifi的开启关闭。 通过属性IsChecked可以设置开关控件的状态。它的状态只有两种，选中和未选中，它的事件类似于RadioButton控件，Checked、UnChecked事件以及Click事件。 在使用默认的ToggleSwitch控件之外，我们可以自定义开关控件的外观，如使用 <TOOLKIT:TOGGLESWITCH.HEADERTEMPLATE>标签来定义ToggleSwitch的Header部分，使用 <TOOLKIT:TOGGLESWITCH.CONTENTTEMPLATE>标签来定义ToggleSwitch的内容部分。
AutoCompleteBox（自动完成控件） 在我们经常遇见的输入内容的时候，只要输入一小部分就可以自动提示完整的信息，这种效果可以使用AutoCompleteBox实现，过程可以这样理解，在一个字符串数组或者其他集合中存放一定的信息，在输入时，遍历集合中的信息，找到匹配的就显示出来，找不到就不显示，好比登陆QQ时，只要我们输入国一次QQ号，就把它保存下来，在下次输入的时候就自动提示。在使用的时候要使用资源绑定的定义，在以后部分会有资源绑定的介绍。我们可以使用不同的格式，显示一行的或者是两行的提示信息。它的数据DataContext继承自PhoneApplicationPage 类的DataContext属性，而PhoneApplicationPage的这个属性是继承自FrameworkElement的，它的作用是参与数据绑定。 其它常用属性：
手势监听（GestureListener） 手势监听可以在现有控件上增加对手势操作的识别与信号的处理。目前可以监听到的手势有：
NavigationTransition（页面切换） SilverlightToolkit为页面提供了切换效果。使用时首先在App.xaml.cs中的InitializePhoneApplication方法里将“RootFrame=new PhoneApplicationFrame();”改成“RootFrame=new TransitionFrame();”。然后<TOOLKIT:TRANSITIONSERVICE.NAVIGATIONINTRANSITION>来配置页面进入的效果， <TOOLKIT:TRANSITIONSERVICE.NAVIGATIONOUTTRANSITION>来配置页面退出时的效果。使用 来配置页面切换的效果。它继承自TransitionElement。这里提供了5中切换效果。分别是 滚动效果RollTransition、旋转效果RotateTransition、幻灯片效果SlideTransition、上下翻转效果SwivelTransition、左右翻转效果TurnstileTransition。
列表选择控件ListPicker 列表选择控件也是toolkit提供的一种方便快捷的控件，它有两种样式，一种是弹出式，一种是全屏式。 使用弹出式即是在中定义一系列，从中选择一种，也可以使用数据绑定。而使用全屏的方式一般会使用数据的绑定。ListPicker的Header属性是用来显示标题的，FullModeHeader是用来显示点开全屏列表时显示的标题。
下面用实例来说明： 创建一个页面“test1.xaml”，在页面中设置一个ListPicker与一个AutoCompleteBox来实现默认状态的ListPicker与单行的AutoCompleteBox效果，并配合Button实现跳转，如： <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <toolkit:ListPicker Height="245" HorizontalAlignment="Left" Margin="36,6,0,0" Name="listPicker1" VerticalAlignment="Top" Width="388" Header="颜色"> <sys:String>红色sys:String> <sys:String>绿色sys:String> <sys:String>蓝色sys:String> <sys:String>紫色sys:String> <sys:String>黑色sys:String> toolkit:ListPicker> <toolkit:AutoCompleteBox HorizontalAlignment="Left" Margin="36,351,0,0" Name="myAutoCompleteBoxSingle" VerticalAlignment="Top" Width="388" ItemsSource="{Binding}"/> <Button Content="Go Test2" Height="72" HorizontalAlignment="Left" Margin="264,245,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /> Grid> 在这里要练习页面切换的功能，所以将App.xaml.cs中的 RootFrame = new PhoneApplicationFrame();
改为： RootFrame = new Microsoft.Phone.Controls.TransitionFrame();
然后注意在页面的标签下写页面切换的代码，如： <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardIn"/> toolkit:NavigationInTransition.Forward> toolkit:NavigationInTransition> toolkit:TransitionService.NavigationInTransition> <toolkit:TransitionService.NavigationOutTransition> <toolkit:NavigationOutTransition> <toolkit:NavigationOutTransition.Backward> <toolkit:SwivelTransition Mode="BackwardIn"/> toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> <toolkit:SwivelTransition Mode="ForwardIn"/> toolkit:NavigationOutTransition.Forward> toolkit:NavigationOutTransition> toolkit:TransitionService.NavigationOutTransition> 在后台实现跳转与数据的绑定： using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using Microsoft.Phone.Controls;namespace ToolKit{ public partial class MainPage : PhoneApplicationPage { static readonly string[] AccentColors = { "red","green","blue","white","black"}; // 构造函数 public MainPage() { InitializeComponent(); DataContext = AccentColors; } private void button1_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new Uri("/test2.xaml",UriKind.Relative)); } }} 另外创建一个页面“test2.xaml”，在这个页面中同样要使用Button配合test1.xaml来练习页面切换，代码： <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:RotateTransition Mode="In180Clockwise"/> toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:RotateTransition Mode="Out180Clockwise"/> toolkit:NavigationInTransition.Forward> toolkit:NavigationInTransition> toolkit:TransitionService.NavigationInTransition> <toolkit:TransitionService.NavigationOutTransition> <toolkit:NavigationOutTransition> <toolkit:NavigationOutTransition.Backward> <toolkit:SlideTransition Mode="SlideDownFadeIn"/> toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> <toolkit:SlideTransition Mode="SlideLeftFadeOut"/> toolkit:NavigationOutTransition.Forward> toolkit:NavigationOutTransition> toolkit:TransitionService.NavigationOutTransition> 此外，在这个页面中使用Image与ContextMenu控件实现长按显示菜单，代码： <Image Height="150" HorizontalAlignment="Left" Margin="102,29,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="images/3.jpg"> <toolkit:ContextMenuService.ContextMenu> <toolkit:ContextMenu Height="234" HorizontalAlignment="Left" Margin="79,103,0,0" Name="contextMenu" VerticalAlignment="Top" Width="271"> <toolkit:MenuItem Header="Rotate" Name="mnuRotate" /> <toolkit:Separator /> <toolkit:MenuItem Header="Zoom 1:10" Name="menuZoom1" Click="menuZoom1_Click" /> <toolkit:MenuItem Header="Zoom 1:20" Name="menuZoom2" Click="menuZoom2_Click"/> toolkit:ContextMenu> toolkit:ContextMenuService.ContextMenu> Image> 再写入一个DatePicker与一个TimePicker，使用长日期格式和自定义24小时表示： <toolkit:TimePicker HorizontalAlignment="Left" Margin="28,268,0,0" Name="myTimePicker" VerticalAlignment="Top" Width="408" ValueStringFormat="{}Time是{0:HH:mm}" ValueChanged="myTimePicker_ValueChanged"/> <toolkit:DatePicker HorizontalAlignment="Left" Margin="29,197,0,0" Name="myDatePicker" VerticalAlignment="Top" Width="408" ValueStringFormat="{}{0:D}" ValueChanged="myDatePicker_ValueChanged"/> 最后利用有限的空间练习全屏的Listpicker，代码： <toolkit:ListPicker Header="Full ListPicker" Height="217" Name="listPicker1" Width="410" ItemsSource="{Binding}" Margin="26,357,20,33"> <toolkit:ListPicker.FullModeItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/> <TextBlock Text="{Binding}" VerticalAlignment="Center"/> StackPanel> DataTemplate> toolkit:ListPicker.FullModeItemTemplate> <toolkit:ListPicker.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/> <TextBlock Text="{Binding}" VerticalAlignment="Center"/> StackPanel> DataTemplate> toolkit:ListPicker.ItemTemplate> toolkit:ListPicker> <Button Content="Go Test1" Height="72" HorizontalAlignment="Left" Margin="263,333,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /> 后台中的代码中稍微写一些验证与数据绑定就行： using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using Microsoft.Phone.Controls;namespace ToolKit{ public partial class AandL2 : PhoneApplicationPage { static readonly string[] AccentColors = { "magenta", "purple", "teal", "lime", "brown", "pink", "orange", "blue", "red", "green","red", "green", "blue", "white", "black" }; public AandL2() { InitializeComponent(); this.listPicker1.DataContext = AccentColors; } private void menuZoom1_Click(object sender, RoutedEventArgs e) { MessageBox.Show("你点击了menuZoom1"); } private void menuZoom2_Click(object sender, RoutedEventArgs e) { MessageBox.Show("你点击了menuZoom2"); } private void myDatePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e) { MessageBox.Show("日期：\n" + myDatePicker.Value); } private void myTimePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e) { MessageBox.Show("时间：\n" + myTimePicker.Value); } private void button1_Click(object sender, RoutedEventArgs e) { this.NavigationService.Navigate(new Uri("/test1.xaml", UriKind.Relative)); } }} 运行test1.xaml后，效果： 默认的ListPicker效果
长按图片后的ContextMenu效果
DatePicker效果
我们会发现应用程序栏的图片无法正常显示，怎么解决这个问题呢？如果我们下载到了源代码，会在源代码
中发现，DatePicker与TimePicker中的AppBar的定义是这样的 <shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Check.png" Text="DONE"/><shell:ApplicationBarIconButton IconUri="/Toolkit.Content/ApplicationBar.Cancel.png" Text="CANCEL"/> 很明显在我们的项目中没有这样的文件夹与文件，所以在项目中创建一个文件夹叫做“Toolkit.Content”，在wp7的Icon文件夹中找到这两的图片，
将它们复制到新建的文件夹中，并根据源代码中的文件名字更改图片名字，并设置其生成操作属性为“内容”，再次运行程序，图片可以正常显示：
全屏的ListPicker效果
再建一个文件“test3.xaml”,在这个文件中练习手势监听，要理解手势监听其实就相当于给控件额外的添加了一些事件，其中TextBlock是用来显示信息的： <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Border x:Name="border" Width="300" Height="200" Background="Red" BorderBrush="{StaticResource PhoneForegroundBrush}" RenderTransformOrigin="0.5,0.5" Opacity=".5" CacheMode="BitmapCache" BorderThickness="4,16,4,4"> <Border.RenderTransform> <CompositeTransform x:Name="transform"/> Border.RenderTransform> <toolkit:GestureService.GestureListener> <toolkit:GestureListener Tap="GestureListener_Tap" Hold="GestureListener_Hold" DoubleTap="GestureListener_DoubleTap" DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" DragCompleted="GestureListener_DragCompleted" Flick="GestureListener_Flick" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta" PinchCompleted="GestureListener_PinchCompleted" /> toolkit:GestureService.GestureListener> Border> <TextBlock Height="101" HorizontalAlignment="Left" Margin="65,458,0,0" Name="myTextBlock" Text="" VerticalAlignment="Top" Width="318" TextWrapping="Wrap"/> <TextBlock Height="89" HorizontalAlignment="Left" Margin="65,25,0,0" Name="myTextBlockInfo" Text="" TextWrapping="Wrap" VerticalAlignment="Top" Width="318" /> Grid> 后台监听： using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using Microsoft.Phone.Controls;namespace ToolKit{ public partial class test3 : PhoneApplicationPage { public test3() { InitializeComponent(); } private void GestureListener_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e) { myTextBlockInfo.Text = "Tap"; //单击使border回复到原点 transform.TranslateX = transform.TranslateY = 0; } private void GestureListener_DragStarted(object sender, DragStartedGestureEventArgs e) { myTextBlockInfo.Text = "DragStarted"; //开始拖拽后改变border背景色 SolidColorBrush greenBrush = new SolidColorBrush(); greenBrush.Color = Colors.Green; border.Background = greenBrush; } private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e) { myTextBlockInfo.Text = "DragDelta"; //使border随着拖拽操作而移动位置 transform.TranslateX += e.HorizontalChange; transform.TranslateY += e.VerticalChange; } private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e) { myTextBlockInfo.Text = "DragCompleted"; //拖拽操作结束时恢复border背景色 SolidColorBrush redBrush = new SolidColorBrush(); redBrush.Color = Colors.Red; border.Background = redBrush; } private void GestureListener_Flick(object sender, FlickGestureEventArgs e) { myTextBlockInfo.Text = "Flick"; //划动时显示划动的方向、角度、水平速度和垂直速度 myTextBlock.Text = string.Format("{0}Flick:Angle{1} Velocity{2},{3}", e.Direction, Math.Round(e.Angle), e.HorizontalVelocity, e.VerticalVelocity); } double initialAngle; double initialScale; private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e) { myTextBlockInfo.Text = "PinchStarted"; //开始多点触控操作时记录下当前border的角度和变形比例 SolidColorBrush blueBrush = new SolidColorBrush(); blueBrush.Color = Colors.Blue; border.Background = blueBrush; initialAngle = transform.Rotation; initialScale = transform.ScaleX; } private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e) { myTextBlockInfo.Text = "PinchDelta"; //开始多点触控操作时，根据手指变形使border旋转和缩放 transform.Rotation = initialAngle + e.TotalAngleDelta; transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio; } private void GestureListener_PinchCompleted(object sender, PinchGestureEventArgs e) { myTextBlockInfo.Text = "PinchCompleted"; //多点操作结束时改变border的背景色 SolidColorBrush redBrush = new SolidColorBrush(); redBrush.Color = Colors.Red; border.Background = redBrush; } private void GestureListener_Hold(object sender, Microsoft.Phone.Controls.GestureEventArgs e) { myTextBlockInfo.Text = "Hold"; //长按后恢复初始位置、角度、缩放比例 transform.TranslateX = transform.TranslateY = 0; transform.ScaleX = transform.ScaleY = 1; transform.Rotation = 0; } private void GestureListener_DoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e) { myTextBlockInfo.Text = "DoubleTap"; //双击使缩放比例回复 transform.ScaleX = transform.ScaleY = 1; } }} 其实在这里多点触控是无法实现的，除非使用真机调试。看看效果
最后新建一个页面“test4.xaml”，来看看ToggleButton的使用和多行的自动完成控件： |
