一起學windows phone7開發(二十五.Toolkit 增補)

十一月初,微軟的silverlight toolkit for phone又放出四個新控件,這四個控件使用都要比之前的複雜,並且很有用。

一.              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:這個控件用來實現頁面的切換效果。

在正式版中,頁面間的切換沒有動畫效果,很多朋友也都問過我怎麼實現,以前的方法可以通過VisualStateManagerGrid施加動畫效果來模擬,但是對VisualStateManagerblend工具不熟悉的人來說還是挺難的。不過現在好了,出來這麼一個控件,只要加載到頁面,簡單設置一下就可以出現多種頁面動畫效果,非常好用。

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(這個沒有模式設置)、RotateTransitionSlideTransitionSwivelTransitionTurnstileTransition

另外,進入和退出頁面的動畫效果是可以設置爲不同的效果的。

3.最重要的修改:

App.xaml.csInitializePhoneApplication()函數裏的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.csPeopleInGroup.csPerson.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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章