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()方法