WindowsPhone pull-down refresh control-PullRefreshListBox

++ ++

This article is original on this site. You are welcome to repost it! Reprinted please indicate the source:

Http://blog.csdn.net/mr_raptor/article/details/7259652

++ ++

 

Preface

 

A microblog-like project was created a few days ago. To use the pull-down and refresh controls in Android and Iphone, WP7 certainly does not have such controls. You can only write them by yourself, the previous articles are about custom controls. Therefore, we can analyze the custom pull-down refresh control in WP7, as a summary of the previous articles. If you think it is good, please try it out. If you want a friend of the source code, please keep up with your mailbox and the author will send it to you as soon as possible.

 

Result diagram:

 

Note:In the Demo, two pull-down refresh controls are used. The above pull-down refresh control statically binds ListBoxItem. The following controls are bound to objects through the binding mechanism.

 

Figure 1 and figure 2 show the index or content of each item by clicking on different items.

 

Figure 3 shows the pull-down animation effect and prompt text on the top of the user drop-down list.

 

Figure 4 shows the string printed by the drop-down event during the drop-down operation, indicating that the user event method can be called back.

 

Figure 1 static data binding of ListBoxItem

Figure 2 Dynamic Object Data Binding and click Effect

Figure 3. drop-down animation and prompt Display Effect

 

Figure 4. pull-down Event Callback output

Address: http://blog.csdn.net/mr_raptor/article/details/7259652

This control mainly implements the following functions:

1. Supports pull-down refresh of animation Effects
2. Supports dynamic binding of data sources
3. Support static ListBoxItem binding
4. Support ListBox custom ItemTemplate Template

Train of Thought Analysis:

 

Basic functions:

If you want to allow the Control to refresh the list from a drop-down list, a Control is added at the top of the list. If the user does not have a drop-down list, the Control is not displayed, when the user drop-down list reaches a certain distance, the Control is displayed with animation effect.

• Solve the Control Selection Problem
• Solving user operations and distance computing problems
• Add animation Effects

Complex functions:

We also want our drop-down refresh control to support ListBoxItem customization. Otherwise, we can only display a single method. Therefore, we also need to consider and use the Custom template, the most important one is that an event must be processed when the user's lower-part list is used to call back the User-Defined method to refresh the data.

• Solve the ListBoxItem template customization Problem
• Solve the Problem of handling refresh events

In order to solve the above two parts, this blog will be divided into two sections, the content cannot be too detailed, suitable for friends with a certain degree of foundation, let's get started.

Address: http://blog.csdn.net/mr_raptor/article/details/7259652

Control Type Selection

To refresh the drop-down list, the control must have a list of display data. According to the analysis in the previous article WindowsPhone Custom Control (1, the ListBox list control is inherited from ItemsControl, so our control must also inherit from ItemsControl or ListBox, but it is not appropriate to inherit from ListBox and customize its Template, because the effect of refreshing the display area cannot be guaranteed, I chose to inherit ItemsControl.

The structure is as follows:

PullRefreshListBox. cs:

1.publicclass PullRefreshListBox:ItemsControl{  2.  3.    public PullRefreshListBox()  4.        {  5.            this.DefaultStyleKey = typeof(PullRefreshListBox);  6.        }  7.  8.    DependencyProperty SelectedItem{};  9.    DependencyProperty SelectedIndex{};  10.    DependencyProperty RefreshText{};  11.  12.    publicoverridevoid OnApplyTemplate()  13.        {  14.        ...  15.    }  16.}  

　　

Public class PullRefreshListBox: ItemsControl {</p> <p> public PullRefreshListBox () <br/>{< br/> this. defaultStyleKey = typeof (PullRefreshListBox); <br/>}</p> <p> DependencyProperty SelectedItem {}; <br/> DependencyProperty SelectedIndex {}; <br/> DependencyProperty RefreshText {}; </p> <p> public override void OnApplyTemplate () <br/>{< br/>... <br/>}< br/>}

Three dependency attributes are added: SelectedItem, SelectedIndex, and RefreshText, indicating the items, index values, and text selected in the current list.

In OnApplyTemplate, obtain the element reference in the corresponding Style File.

Address: http://blog.csdn.net/mr_raptor/article/details/7259652

Style template:

The style template is mainly used to define the layout in the drop-down refresh control. According to the previous article, the basics of the WindowsPhone custom control (2) are as follows, to modify the layout of a widget, you must customize its Template attribute.

In the upper part of the drop-down list, there must be a drop-down refresh effect area for loading animated images and displaying text such as "refreshing". I will display my layout.

In the drop-down list, containers and lists are displayed in a Grid. The drop-down containers are divided into two parts: left and right. I use StackPanel for horizontal layout. In addition, because the drop-down display container is not displayed by default, set its hidden attribute. When it is displayed, it should be on the list container, so pay attention to their order.

PullDownPanel: StackPanel

RefreshImage: Animated Image

RefreshTextBlock: prompt text TextBlock

List container: ScrollViewer

List item: ItemsPresenter

The structure of the corresponding style file is as follows:

Generic. xaml

1.<StyleTargetType="local:PullRefreshListBox">  2.    <SetterProperty="Template">  3.    <Setter.Value>  4.            <ControlTemplateTargetType="local:PullRefreshListBox">  5.                <Grid>  6.                    <ScrollViewerx:Name="ScrollViewer"  7.                        <ItemsPresenterx:Name="ItemsPresenter"/>  8.                    </ScrollViewer>  9.                    <StackPanelx:Name="PullDownPanel"Visibility="Collapsed"   10.                        <Imagex:Name="RefreshImage"Width="32"Height="32"   11.                               Source="/PullRefreshListBox;component/Images/sync.png">  12.                        </Image>  13.                        <TextBlockx:Name="RefreshTextBlock"Text="{TemplateBinding RefreshText}"></TextBlock>  14.                    </StackPanel>  15.                </Grid>  16.            </ControlTemplate>  17.    </Setter.Value>  18.    </Setter>  19.</Style>  

　　

<Style TargetType = "local: PullRefreshListBox"> <br/> <Setter Property = "Template"> <br/> <Setter. value> <br/> <ControlTemplate TargetType = "local: PullRefreshListBox"> <br/> <Grid> <br/> <ScrollViewer x: name = "ScrollViewer" <br/> <ItemsPresenter x: Name = "ItemsPresenter"/> <br/> </ScrollViewer> <br/> <StackPanel x: name = "PullDownPanel" Visibility = "Collapsed" <br/> <Image x: name = "RefreshImage" Width = "32" Height = "32" <br/> Source = "/PullRefreshListBox; component/Images/sync.png "> <br/> </Image> <br/> <TextBlock x: name = "RefreshTextBlock" Text = "{TemplateBinding RefreshText}"> </TextBlock> <br/> </StackPanel> <br/> </Grid> <br/> </ controlTemplate> <br/> </Setter. value> <br/> </Setter> <br/> </Style>

 

The style file defines elements, so Add the following code to the OnApplyTemplate method in the code file PullRefreshListBox. cs to get reference to these elements:

1.// PullDown Panel Container  2.PullDownPanel = this.GetTemplateChild("PullDownPanel") as StackPanel;  3.RefreshTextBlock = this.GetTemplateChild("RefreshTextBlock") as TextBlock;  4.  5.// The List ScrollViewer  6.ScrollViewer = this.GetTemplateChild("ScrollViewer") as ScrollViewer;  7.  8.// The List Data items display Presenter  9._ItemsContainer = this.GetTemplateChild(ItemsPresenterName) as ItemsPresenter;  

　　// PullDown Panel Container <br/> PullDownPanel = this. getTemplateChild ("PullDownPanel") as StackPanel; <br/> RefreshTextBlock = this. getTemplateChild ("RefreshTextBlock") as TextBlock; </p> <p> // The List ScrollViewer <br/> ScrollViewer = this. getTemplateChild ("ScrollViewer") as ScrollViewer; </p> <p> // The List Data items display Presenter <br/> _ ItemsContainer = this. getTemplateChild (ItemsPresenterName) as ItemsPresenter; <br/>

Address: http://blog.csdn.net/mr_raptor/article/details/7259652

At this point, the basic structure has been completed, and there is no plot. The specific plot will be broken down in the next article.

++ ++

This article is original on this site. You are welcome to repost it! Reprinted please indicate the source:

Http://blog.csdn.net/mr_raptor/article/details/7259652

++ ++