一. AutoCompleteBox:這個控件很像ajax裏的輸入框,可以聯想詞。不過需要自已生成一個詞庫文件,還要編寫代碼來加載詞載。在silverlgiht toolkit sample裏面已經有這個示例代碼了(loremIpsum.cs,loremIpsum.txt,這裏只是一個拉丁文的測試文件,所以需要自已來實現字庫文件)。
<phone:PhoneApplicationPage.Resources>//把字庫以資源方式載入
<data:LoremIpsum x:Key="words"/>
</phone:PhoneApplicationPage.Resources>
<toolkit:AutoCompleteBox HorizontalAlignment="Left" Margin="82,32,0,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="291" Height="72" ItemsSource="{StaticResource words}" />
另外還可以產生一個兩行的聯想串。不過需要自已編程並binding.
二. NavigationTransition:這個控件用來實現頁面的切換效果。
在正式版中,頁面間的切換沒有動畫效果,很多朋友也都問過我怎麼實現,以前的方法可以通過VisualStateManager對Grid施加動畫效果來模擬,但是對VisualStateManager或blend工具不熟悉的人來說還是挺難的。不過現在好了,出來這麼一個控件,只要加載到頁面,簡單設置一下就可以出現多種頁面動畫效果,非常好用。
1.首先在xaml中加入toolkit 聲明:xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
2.在xaml中手工加入這個控件:
<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>
對於這個控件共有五種動畫效果,以及每種動畫都有多種模式的設置:RollTransition(這個沒有模式設置)、RotateTransition、SlideTransition、SwivelTransition、TurnstileTransition
另外,進入和退出頁面的動畫效果是可以設置爲不同的效果的。
3.最重要的修改:
將App.xaml.cs中InitializePhoneApplication()函數裏的RootFrame進行修改,如果不改的話,是沒有動畫效果的。
//RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();
三. ListPicker:當點中這個控件時,會彈出一個列表來,這個列表有兩種,一種是簡單的像下拉列表框那樣的,還有一種是Full Mode的,會彈出一個完整頁面的列表來。
1. 簡單列表:
<toolkit:ListPicker Height="220" HorizontalAlignment="Left" Margin="12,381,0,0" Name="listPicker1" VerticalAlignment="Top" Width="438" Header="Test1" SelectionChanged="listPicker1_SelectionChanged">
<sys:String>Red</sys:String>//可以爲列表只加入幾個字符串
<sys:String>Green</sys:String>
<sys:String>Blue</sys:String>
</toolkit:ListPicker>
SelectionChanged:用來響應列表選中的項。
1. Full Mode:
<toolkit:ListPicker ItemsSource="{Binding}" Height="88" HorizontalAlignment="Left" Margin="6,513,0,0" Name="listPicker2" VerticalAlignment="Top" Width="444" Header="Test2" FullModeHeader="Colors" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>//設置在顯示框中的顯示樣式
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}" Width="24" Height="24"/>
<TextBlock Text="{Binding}" Margin="12 0 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
</toolkit:ListPicker>
FullModeHeader:給Full Mode列表加標題名
ItemsSource:綁定要顯示在列表中的內容
綁定顯示內容的方法有兩種:
a. ItemsSource="{Binding}"//在xaml中綁定,這時一定要把要綁定的列表傳給系統的 DataContext = AccentColors;
b. listPicker2.ItemsSource = AccentColors;//動態綁定列表項
也可以對列表項的樣式進行設置:
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<Rectangle Fill="{Binding}" Width="50" Height="50"/>
<TextBlock Text="{Binding}" Margin="12 10 0 0"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
四. LongListSelector:這個控件是一個歸類列表,並且可以快速選擇按類選擇。這個控件最主要的是要把需要的數據進行綁定和分類,在sample中有一個People的例子(PeopleByFirstName.cs、PeopleInGroup.cs、Person.cs這幾個文件可以看出如何實現)
<toolkit:LongListSelector HorizontalAlignment="Left" Margin="12,162,0,0" Name="longListSelector1" VerticalAlignment="Top" Height="213" Width="438" ItemsSource="{StaticResource people}">//綁定ItemsSource, people是通過編程得到的資源
<toolkit:LongListSelector.GroupItemsPanel>//設置以什麼樣的方式顯示分類列表,如果沒有這個設置,分類列表以直列顯示
<toolkit:LongListSelector.GroupItemTemplate>//分類列表內的item顯示內容和方式
<toolkit:LongListSelector.GroupHeaderTemplate>//設置列表分類的頭的顯示內容和方式
<toolkit:LongListSelector.ItemTemplate>//設置列表裏的內容的顯示方式
示例代碼:http://www.52winphone.com/bbs/viewthread.php?tid=30&extra=page%3D1 testnewcontrols