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)

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

  1. Double Tap,手指连续两次点击触发。
  2. DragCompleted,拖拽停止时发生。
  3. DragDelta,拖拽过程中发生,可以通过DragDeltaGestureEventArgs参数的两个属性:HorizontalChange和VerticalChange获得被拖拽物体的坐标变化,从而掌握拖拽路径。
  4. DragStarted,开始拖拽时发生。
  5. Flick,拖拽过程中在运动状态下放开手指(快速滑动的效果)时发生。
  6. GestureBegin,任何手势开始时发生。
  7. GestureCompleted,任何手势结束时发生。
  8. Hold,手指按住保持一秒时发生。
  9. PinchCompleted,两个手指触控操作结束时发生。
  10. PinchStart,两个手指触控操作开始时发生。
  11. Tap,手指点击一次时发生(单击效果)。
  12. 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  阅读(1781)  评论(2编辑  收藏  举报