本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) ? **前言** 前幾天做一個類似微博的項目，想用下Android和Iphone里的下拉刷新控件，WP7里肯定不會有這種控件，只能自己去試著寫一寫，正好，前幾篇文章講完，講的是關于自定義控件的，因此，將自己寫的WP7下的自定義下拉刷新控件拿出來分析下，作為前幾篇文章的總結。如果您覺得不錯，請頂一下，要源碼的朋友，下面回復跟上郵箱，作者在第一時間發送給你。 ? **成果圖：** **說明：**Demo中是用了上下兩個的下拉刷新控件，上面的數字下拉刷新控件是將ListBoxItem靜態綁定上的，下面的控件通過綁定機制綁定到對象上去的。 圖一，二是點擊不同的項，都可以得到項索引或項內容。 圖三，是當用戶下拉列表時，上方顯示下拉刷新動畫效果和提示文字。 圖四，是下拉時，下拉事件打印出的字符串，說明可以回調用戶事件方法。  ? 圖一 ListBoxItem靜態數據綁定，點擊效果  圖二 動態對象數據綁定，點擊效果  圖三，下拉時，下拉動畫及提示顯示效果 ?  圖四，下拉時，下拉事件回調輸出 原創地址：[http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) **本控件主要實現了以下功能：** 1. 支持動畫效果的下拉刷新 1. 支持動態綁定數據源 1. 支持靜態ListBoxItem綁定 1. 支持ListBox自定義ItemTemplate模板 **源碼下載地址：** [http://download.csdn.net/detail/mr_raptor/4591131](http://download.csdn.net/detail/mr_raptor/4591131) **思路分析：** ? 基本功能：?? 如果想讓該控件支持下拉刷新列表，那么就意味在列表的最上部要添加一個Control，在用戶沒有下拉列表時，該Control不顯示，當用戶下拉列表到一定的距離時，該Control顯示出來，并且有動畫效果。 - 解決Control選擇問題 - 解決用戶操作及距離計算問題 - 動畫效果添加 復雜功能： 我們還要讓我們的下拉刷新控件支持ListBoxItem的自定義，否則只能顯示單一的方式，因此，還要考慮和使用自定義模板的問題，除此之后，還有最重要的一個，當用戶下瓣列表時，必需要有一個事件處理，用來回調用戶定義方法來刷新數據。 - 解決ListBoxItem模板自定義問題 - 解決刷新事件處理問題 為解決上述兩部分，本博文分為兩節分別介紹，內容不可能太詳細，適合有一定基礎的朋友，讓我們開始吧。 原創地址：[http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) **控件類型選擇** 要實現下拉列表刷新功能，那么控件里必然要有顯示數據的列表，根據前面文章 [WindowsPhone自定義控件詳解（一）](http://blog.csdn.net/mr_raptor/article/details/7251942)里分析可知，ListBox列表控件是繼承自ItemsControl，那么，我們就的控件肯定也是繼承自ItemsControl或ListBox了，但是繼承ListBox，通過自定義其Template，不太合適，因為那樣無法保證刷新顯示區效果，所以我選擇繼承ItemsControl。 結構如下： PullRefreshListBox.cs： ~~~ public class PullRefreshListBox:ItemsControl{ public PullRefreshListBox() { this.DefaultStyleKey = typeof(PullRefreshListBox); } DependencyProperty SelectedItem{}; DependencyProperty SelectedIndex{}; DependencyProperty RefreshText{}; public override void OnApplyTemplate() { ... } } ~~~ 其中，加了三個依賴屬性：SelectedItem， SelectedIndex， RefreshText，分別表示，當前列表中選擇的Item項， 索引值，下拉刷新顯示文字。 在OnApplyTemplate里，得到對應的樣式文件里的元素引用。 原創地址：[http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) **樣式模板：** 樣式模板里主要用來定義下拉刷新控件里的布局，根據前面文章[ WindowsPhone自定義控件詳解（二）](http://blog.csdn.net/mr_raptor/article/details/7251948)中基礎可知，修改控件的布局應該是對其Template屬性進行自定義。 而在下拉列表上部，要有一個用來裝動畫圖片，以及顯示的”正在刷新“等文字的下拉刷新效果區域，我用下圖來表示我的布局。  下拉顯示容器和列表顯示容器我放到了一個Grid里，上面的下拉容器中又分為左和右 兩部分，我用橫向布局StackPanel來放置，另外，由于下拉顯示容器在默認下是不顯示的，設置其隱藏屬性，當其顯示 時應該在列表容器上面，所以注意它們的順序。 **PullDownPanel：下拉容器StackPanel ** **RefreshImage：動畫圖片Image** **RefreshTextBlock：提示文字TextBlock** **列表容器：ScrollViewer** **列表項：ItemsPresenter** 對應的樣式文件里，結構如下： Generic.xaml ~~~ <Style TargetType="local:PullRefreshListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:PullRefreshListBox"> <Grid> <ScrollViewer x:Name="ScrollViewer" <ItemsPresenter x:Name="ItemsPresenter"/> </ScrollViewer> <StackPanel x:Name="PullDownPanel" Visibility="Collapsed" <Image x:Name="RefreshImage" Width="32" Height="32" Source="/PullRefreshListBox;component/Images/sync.png"> </Image> <TextBlock x:Name="RefreshTextBlock" Text="{TemplateBinding RefreshText}"></TextBlock> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> ~~~ ? 樣式文件里定義了元素，所以在代碼文件PullRefreshListBox.cs中的OnApplyTemplate方法里添加如下代碼，用來得到這些元素的引用： ~~~ // PullDown Panel Container PullDownPanel = this.GetTemplateChild("PullDownPanel") as StackPanel; RefreshTextBlock = this.GetTemplateChild("RefreshTextBlock") as TextBlock; // The List ScrollViewer ScrollViewer = this.GetTemplateChild("ScrollViewer") as ScrollViewer; // The List Data items display Presenter _ItemsContainer = this.GetTemplateChild(ItemsPresenterName) as ItemsPresenter; ~~~ 原創地址：[http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) 到了這里，基本結構已經搭完了，還沒有劇情，具體的劇情，下篇分解。 本文系本站原創,歡迎轉載! 轉載請注明出處: [http://blog.csdn.net/mr_raptor/article/details/7259652](http://blog.csdn.net/mr_raptor/article/details/7259652) ?