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页面中，程序就会自动在<phone>的头标签中添加这一命名空间。

ContentMenu控件

使用ContentMenu可以在某些组件上通过长按显示弹出式菜单。只要在需要长按显示菜单的控件中加入ContentMenu即可。

在ContentMenu中，MenuItem表示菜单项，可以是文字，也可以是图标。而Separator表示菜单分隔符，其实就是一条横线。我们可以像WinForm中给每一个菜单项添加相应的事件，如Click事件。

例子中我们把一张图片设置成当点击长按的时候弹出菜单，点击相应菜单项的时候会出现相应的提示。

DatePicker（日期选择器）和TimePicker（时间选择器）

这两个控件在实际编程中相当常用。用法相当简单。我们可以给上述两个控件添加ValueChanged事件来说明值发生变化的时候会有什么事情。

在例子中我们会使用长日期格式和自定义24小时表示。在值发生变化的时候在TextBlock中给出相应的值。这是通过设置ValueStringFormat属性来规定显示格式的。

常用日期和时间显示格式

短日期格式：{}{0:d},4/9/2012
短时间格式：{}{0:t},9:21 AM
长日期格式：{}{0:D},Monday,April 9,2012
长时间格式：{}{0:T},9:22:00 AM
月/日/年格式：{}{0:MM-dd-yyyy},04-09-2012
包括自定义文本的24小时表示格式：{}现在时间是：{0:HH:mm},如：现在时间是：9:24

默认的，日期选择器使用短日期格式，时间选择器使用短时间格式。

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的，它的作用是参与数据绑定。

其它常用属性：

FilterMode，匹配方式，取值可以使Contains、Startwith等。
IsDropDownOpen，下拉列表是否打开。
IsTextCompletionEnable，是否自动完成匹配填写。
MaxDropDownHeight，下拉列表的最大高度。
MinimumPopulateDelay，最小匹配时间。
MinimumPrefixLength，最短匹配长度。

手势监听（GestureListener）

手势监听可以在现有控件上增加对手势操作的识别与信号的处理。目前可以监听到的手势有：

Double Tap，手指连续两次点击触发。
DragCompleted，拖拽停止时发生。
DragDelta，拖拽过程中发生，可以通过DragDeltaGestureEventArgs参数的两个属性：HorizontalChange和VerticalChange获得被拖拽物体的坐标变化，从而掌握拖拽路径。
DragStarted，开始拖拽时发生。
Flick，拖拽过程中在运动状态下放开手指（快速滑动的效果）时发生。
GestureBegin，任何手势开始时发生。
GestureCompleted，任何手势结束时发生。
Hold，手指按住保持一秒时发生。
PinchCompleted，两个手指触控操作结束时发生。
PinchStart，两个手指触控操作开始时发生。
Tap，手指点击一次时发生（单击效果）。
PinchDelta，两个手指触控操作过程中发生。

NavigationTransition（页面切换）

SilverlightToolkit为页面提供了切换效果。使用时首先在App.xaml.cs中的InitializePhoneApplication方法里将“RootFrame=new PhoneApplicationFrame();”改成“RootFrame=new TransitionFrame();”。然后<toolkit:TransitionService.NavigationInTransition>来配置页面进入的效果，

<toolkit:TransitionService.NavigationOutTransition>来配置页面退出时的效果。使用<toolkit:TurnstileTransition Mode="XXXX">

来配置页面切换的效果。它继承自TransitionElement。这里提供了5中切换效果。分别是

滚动效果RollTransition、旋转效果RotateTransition、幻灯片效果SlideTransition、上下翻转效果SwivelTransition、左右翻转效果TurnstileTransition。

列表选择控件ListPicker

列表选择控件也是toolkit提供的一种方便快捷的控件，它有两种样式，一种是弹出式，一种是全屏式。

使用弹出式即是在<toolkit:ListPicker>中定义一系列<sys:string>，从中选择一种，也可以使用数据绑定。而使用全屏的方式一般会使用数据的绑定。ListPicker的Header属性是用来显示标题的，FullModeHeader是用来显示点开全屏列表时显示的标题。

下面用实例来说明：

创建一个页面“test1.xaml”，在页面中设置一个ListPicker与一个AutoCompleteBox来实现默认状态的ListPicker与单行的AutoCompleteBox效果，并配合Button实现跳转，如：

        <!--ContentPanel - 在此处放置其他内容-->
        <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();

然后注意在页面的<phone:PhoneApplicationPage>标签下写页面切换的代码，如：

    <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是用来显示信息的：

<!--ContentPanel - 在此处放置其他内容-->
        <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的使用和多行的自动完成控件：

 <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <toolkit:MenuItem Name="myMenuItem"/>
            <toolkit:ToggleSwitch Header="点击试试" Height="120" Margin="31,57,0,0" 
                                  Name="myToggleSwitch" VerticalAlignment="Top" HorizontalAlignment="Left" Width="221" 
                                  IsChecked="true" Click="myToggleSwitch_Click" />
            <toolkit:ToggleSwitch Margin="31,206,110,224">
                <toolkit:ToggleSwitch.HeaderTemplate>
                    <DataTemplate>
                        <!--定义Header部分，使用数据模板-->
                        <ContentControl FontSize="40" Foreground="Blue"
                                        Content="20:02 PM"/>
                    </DataTemplate>
                </toolkit:ToggleSwitch.HeaderTemplate>
                <toolkit:ToggleSwitch.ContentTemplate>
                    <!--定义主体部分-->
                    <DataTemplate>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Alarm:" FontSize="30"/>
                                <ContentControl HorizontalAlignment="Left"
                                                FontSize="30" Content="{Binding}"/>
                                <!--绑定属性，即IsChecked-->
                            </StackPanel>
                            <TextBlock Text="everySchoolDay" FontSize="25" Foreground="Red"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ToggleSwitch.ContentTemplate>
            </toolkit:ToggleSwitch>
            <toolkit:AutoCompleteBox  Margin="31,428,51,0" 
                                     Name="myAutoCompleteBoxDouble" VerticalAlignment="Top"  
                                     ItemsSource="{Binding}" ValueMemberPath="Item1">
                   <toolkit:AutoCompleteBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Margin="8,0" Text="{Binding Item1}"/>
                            <TextBlock Margin="8,-6,8,2" Foreground="Yellow" FontSize="24" Text="{Binding Item2}"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:AutoCompleteBox.ItemTemplate>
            </toolkit:AutoCompleteBox>
        </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 test4 : PhoneApplicationPage
    {
        static List<MyList<string, string>> AccentColors2 = new List<MyList<string, string>>();
        public test4()
        {
            InitializeComponent();
            AccentColors2.Add(new MyList<string, string> { Item1 = "red", Item2 = "这是红色" });
            AccentColors2.Add(new MyList<string, string> { Item1 = "blue", Item2 = "这是蓝色" });
            AccentColors2.Add(new MyList<string, string> { Item1 = "green", Item2 = "这是绿色" });
            DataContext = AccentColors2;
        }
        private void myToggleSwitch_Click(object sender, RoutedEventArgs e)
        {
            if (this.myToggleSwitch.IsChecked == true)
            {
                MessageBox.Show("开关控件打开");
            }
            else if (this.myToggleSwitch.IsChecked == false)
            {
                MessageBox.Show("开关控件关闭");
            }
        }
    }
}

效果

后记，SilverlightToolkit的使用还有很多很多的知识，一切最好在实践中学习。

posted on 2012-04-19 10:39 WaitingSky 阅读(1779) 评论(2) 编辑收藏举报