WP7 开发（八） WP7控件开发（五）-Silverlight Tookit控件集
工具(控件集)：
1.Contextmenu;2.ToggleSwitch;3.WrapPanel;4.DataPicker;
5.TimePicker;6.AutoCompleteBox;7.NavigationTransition;
8.ListPicker;9.LongListSelector
1.Contextmenu:长按弹出菜单；不能在容器控件中使用
<toolkit:ContextMenuService.ContextMenu>(需额外添加代码)
<toolkit:ContentMenu Height="400" Margin="123,168,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" BorderBrush="Red" BorderThickness="5">
<toolkit:MenuItem Header="Test1" Click="MenuItem_Click"/>
<toolkit:MenuItem Header="Test2" Click="MenuItem_Click"/>
<toolkit:Separator/>//分隔符控件
<toolkit:MenuItem Header="Test3" Click="MenuItem_Click"/>
</toolkit：ContentMenu>
</toolkit:ContextMenuService.ContextMenu>
---菜单增加图片---
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Height="400" Margin="123,168,0,0"
HorizontalAlignment="Left" Name="contextMenu1" VerticalAlignment="Top" Width="200" BorderBrush="Red" BorderThickness="5">
<toolkit:MenuItem Header="Test1" Click="MenuItem_Click"/>
<toolkit:MenuItem Header="Test2" Click="MenuItem_Click"/>
<toolkit:Separator/>
<toolkit:MenuItem Click="MenuItem_Click">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal">
<Image Width="50" Height="50" Source="ApplicationIcon.png"/>
<TextBlock Text="Test3"/>
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuSeervice.ContextMenu>
2.ToggleSwitch:有两种状态Checked和UnChecked
<toolkit:ToggleSwitch Header="ToggleSwitch" Content="是"
HorizontalAlignment="Left" Margin="74,106,0,0" Name="toggleSwitch1" Height="116"VeiticalAlignment="Top"
Width="271" Checked="toggleSwitch1_Checked" UnChecked="toggleSwitch1_UnChecked"/>
<toolkit:ToggleSwitch Header="ToggleSwitch" Height="116" HorizontalAlignment="Left" Margin="74,106,0，0" Name="toggleSwitch2" VerticalAllignment="Top" Width="271" Checked="toggleSwitch2_Checked" UnChecked="toggleSwitch2_UnChecked"/>
（对于中文文字需代码改写）在代码中：
在Checked事件中：toggleSwitch2.Content="是";
在UnChecked事件中：toggleSwitch2.Content="否";
3.WrapPanel:包含在控件里的元素从左到右或从上到下一次安排位置，并会自动换行（子控件自动排列，如：颜色、日历）
<controlsToolkit:WrapPanel x:Name="wp1" Width="35"
Margin="15,0,15,201" Height="300" VerticalAlignment="Bottom" Orientation="Horizontal"/>
在页面加载时，代码:
for(int i=0;i<30;i++)
{
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Yellow)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Purple)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Red)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Black)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Brown)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Cyan)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Green)});
wp1.Children.Add(new Rectangle({Height=50,Width=50,
Fill=new SolidColorBrush(Color.Gray)});
}
4.DataPicker:日期控件
<toolkit:DataPicker Margin="41,121,75,0" Height="77"
Name="dataPiaker1" VerticalAlignment="Top" Foreground="White" HorizontalContentAlignment="Center"
ValueCahnge="dataPicker1_ValueChanged">
<toolkit:DataPicker.Backgroung>
<ImageBrush ImageSource="Image/hkd16.jpg"/>
</toolkit:DataPicker.Background>
</toolkit:DataPicker>
属性：ValueStringFormat:设置显示时间格式
Description:Short data format(DataPicker default)
XAML:"{}{0:d}" Sample:9/20/2010
Description:Short data format(TimePicker default)
XAML:"{}{0:t}" Sample:4:00 PM
Description:Long data format
XAML:"{}{0:D}" Sample:Monday,September 20,2010
Description:Long time format
XAML:"{}{0:T}" Sample:4:00:00 PM
Description:Explicit month/day/year fromat
XAML:"{}{0:MM-dd-yyyy}" Sample:09-20-2010
Description:Explicit 24-hour time fromat with text
XAML:"{}The 24-hour time is {0:HH:mm}."
Sample:The 24-hour time is 16:00
对于日期下的两个按钮设置图片：
(1).需先添加一个文件夹，命名为：Toolkit.Content
(2).加载图片：对应的系统目录（注意对图片的属性的修改）
(3).Content/Copy if New
5.TimePicker
<toolkit:TimePicker HorizontalAlignment="Left" Margin="92,275,0,0" Name="timePicker1" Width="302" VerticalAlignment="Top" ValueStringFormat="{}12小时{0:d}"
ValueCahnged="timePicker1_ValueChanged"/>
（工程中新建文件夹:Toolkit.Content,将两个ApplicationBarIconButton的图片放进去，并加入到工程中）
在对应的事件的代码：(年月日和时间)
this.PageTitle.Text=e.NewDataTime.ToString();
6.AutoCompleteBox：输入文字时，可以列出联想词
（不过需后台，加入词库！）
<phone:PhoneApplicationPage.Resources>//字库以资源方式载入
<data:LoremIpsum x:Key="words"/> //自定义资源
</phone:PhoneApplicationPage.Resources>
<toolkit:AutoCompeleteBox HorizontalAlignment="Left" Margin="82,32,0,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="291" Height="72"
ItemSource="{StaticResourcewords}"/>
属性：
1.FilterMode:匹配方式
2.IsDropDownOpen:下拉列表是否打开
3.IsTextCompletionEnable:自动完成匹配填写
4.MaxDropDownHeight:下拉列表的最大高度
5.MinimumPopulateDelay:最小匹配时间
6.MinimumPrefixLength：最短匹配长度
事件:
DropDownClosed/DropDownCloseing
DropDownOpened/DropDownOpening
在项目中，加一个文本,写入你的词库
7.NavigationTransition:实现页面的切换效果
将App.xaml.cs中InitializePhoneAppliction()函数里的RootFrame进行修改：RootFrame=new TransitionFrame();(注意)
五种动画效果：
-RollTransition
-RotateTransition
-SlideTransition
-SwivelTransition
-TurnstileTransition
//进入页面动画效果
<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>
8.ListPicker:简单列表框
属性：Full Mode 完整页面的列表框
属性：ListPickerMode的使用
(对于本题的字符串需要一个字符串的命名空间：
xmlns:sys="clr-namespace:System;assembly=mscorlib")
<toolkit:ListPicker Height="220" Name="listPicker1"
HorizontalAlignment="Left" Margin="12,381,0,0" Width="438"
VerticalAlignment="Top" Header="Test1" SelectionChanged="listPicker1_SelectionChanged">
<sys:String>Red</sys:String>
<sys:String>Green</sys:String>
<sys:String>Blue</sys:String>
</toolkit:ListPicker>
<toolkit:ListPicker ItemsSource="{Binding}" Height="88" Name="listPicker2" HorizontalAlignment="Left" Margin="6,513,0,0" VerticalAlignment="Top" Width="444"
Header="Test2" FellModeHeader="Colors">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}" Width="24" Height="24"/>
<TextBlock Text="{Binding}" Margin="12 0 0 0"/>
</StackPanle>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}" Width="24" Height="24"/>
<TextBlock Text="{Binding}" Margin="12 0 0 0"/>
</StackPanle>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
对于数据绑定：后台代码;
static readonly string[] AccentColors={"purple","blue","park","teal","red","dark"};
在构造函数中：this.DataContent=AccentColors;
9.LongListSelector:是一个归类列表；把数据进行绑定和分类
<toolkit:LongListSelector HorizontalAlignment="Left" Margin="12,162,0,0" Name="longListSelector1" Height="213"
VerticalAlignment="Top" Width="438" ItemsSource="{StaticResource people}">
//设置以什么样的方式显示分类列表，如果没有这个设置，分类列表以直列显示
<toolkit:LongListSelector.GroupItemsPanel>
//分类列表内的item显示内容和方式
<toolkit:LongListSelector.GroupItemTemplate>
//设置列表分类的头的显示内容和方式
<toolkit:LongListSelector.GroupHeaderTemplate>
//设置列表里的内容的显示方式
<toolkit:LongListSelector.ItemTemplate>
UserControl:UserControl类；同样基于UIElement
对于便于打开和关闭使用Popup控件，放在最外面
<Popup x:Name="WaitingWnd" IsOpen="Falsh">
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Height="44" HorizontalAlignment="Left" Margin="0,144,0,0" Name="textBlock1" Text="请等待。。。"
VerticalAlignment="Top" Foreground="Gray" Width="200" FontSize="32" TextAlignment="Center"/>
<Image Height="150" HorizontalAlignment="Left" Margin="22,6,0,0" Name="image1" Stretch="Fill" Width="150"
VerticalAlignment="Top"/>
</Grid>
</Popup>
后台代码：声明变量
DispatcherTimer Timer=null;//定时器
int Count=1;
public double Speed{get;set;}
在load事件中：
Timer=new DispatcherTimer();
Timer.Interval=TimSpan.FranFillireconds(Speed);
Timer.Tick=new EventHndler(Timer_Tick);
在Timer_Tick事件中：//动态加载
this.image1.Source=new BitmapImage(new Uri("Arrets/Loading00"+Count+".png",UriKind.Relative));
Count=(Count==0?1:Count+1);
public void WaitingBegin()
{
Timer.Start();
WaitingWnd.IsOpen=true;
}
public void WaitingEnd()
{
Timer.Stop();
WaitingWnd.IsOpen=false;
}
写好后，就可使用，直接放到窗体上
在页面加载时；
调用WaitingBegin()方法
