使用长列表选择器下拉刷新 Windows Phone 8 [英] Pull To Refresh with Long List Selector Windows Phone 8

问题描述

我目前正在使用 Windows Phone 8 应用程序，但在使用长列表选择器 (LLS) 时遇到了一些问题.列表框通过使用 TranslateY 值来实现:

I'm currently working with Windows Phone 8 application and get some problems with Long List Selector(LLS). Listbox do it by using TranslateY value:

 UIElement scrollContent = (UIElement)this.targetScrollViewer.Content;
 CompositeTransform ct = scrollContent.RenderTransform as CompositeTransform;
 //ct.TranslateY: I need this value in Viewport's LLS to detect exactly the distance moving from the TOP

我尝试使用 LLS 检测下拉刷新，但它有一些缺陷(使用鼠标输入、移动和离开):

I'm try to detect pull-to-refresh with LLS but it has some flaws(using Mouse Enter, MOve, and Leave) as:

    double manipulationStart = 0;
    double manipulationEnd = 0;

    void targetLLS_MouseEnter(object sender, MouseEventArgs e)
    {
        if (!this.IsRefreshing)
        {
            var pos = e.GetPosition(null);
            manipulationStart = pos.Y;
            IsMoving = false;
        }
    }

    private void targetLLS_MouseMove(object sender, MouseEventArgs e)
    {
        if (!this.IsRefreshing)
        {
            var pos = e.GetPosition(null);

            manipulationEnd = pos.Y;
            IsMoving = true;

            double TranslateY = manipulationEnd - manipulationStart;

            if (TranslateY > this.PullThreshold)
            {
                this.PullDistance = 100;
                this.PullFraction = 1.0;
                activityState = PullDownToRefreshPanel.ReadyToReleaseVisualState;
            }
            else if (TranslateY > 0)
            {
                this.PullDistance = 100;
                double threshold = this.PullThreshold;
                this.PullFraction = 1;// threshold == 0.0 ? 1.0 : Math.Min(1.0, TranslateY / threshold);
                activityState = PullDownToRefreshPanel.PullingDownVisualState;
            }
            else
            {
                this.PullDistance = 0;
                this.PullFraction = 0;
                activityState = PullDownToRefreshPanel.InactiveVisualState;
            }

            VisualStateManager.GoToState(this, activityState, false);
        }
    }

    bool IsMoving = false;
    void targetLLS_MouseLeave(object sender, MouseEventArgs e)
    {
        if (!this.IsRefreshing && IsMoving)
        {
            double TranslateY = manipulationEnd - manipulationStart;
            EventHandler handler = this.RefreshRequested;

            if (this.targetLLS.IsAtTop()
                && (activityState == PullDownToRefreshPanel.ReadyToReleaseVisualState))// TranslateY >= this.PullThreshold
            {
                if (handler != null)
                {
                    IsRefreshing = true;
                    handler(this, EventArgs.Empty);
                }
            }

            IsMoving = false;
        }

        PullDistance = 0;
        PullFraction = 0;
        manipulationStart = 0;
        manipulationEnd = 0;
        activityState = PullDownToRefreshPanel.InactiveVisualState;
        //VisualStateManager.GoToState(this, activityState, false);
    }

我如何使用以下模板:

 <Style x:Key="ViewportControlStyle" TargetType="ViewportControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ViewportControl">
                <ContentPresenter x:Name="ContentElement" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="LongListSelectorNormalStyle" TargetType="phone:LongListSelector">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="phone:LongListSelector">
                <Grid Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ScrollStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Scrolling">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NotScrolling"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" Style="{StaticResource ViewportControlStyle}"/>
                        <ScrollBar x:Name="VerticalScrollBar" Grid.Column="0" Margin="4,0,4,0" Opacity="0" Orientation="Vertical" HorizontalAlignment="Right"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我的项目需要实现pull功能所以请帮帮我.感谢阅读！

My project need to implement pull function so please help me. Thanks for reading!

推荐答案

您可以使用 ItemRealized 事件并使用 ListHeader(或 ListFooter 从底部拉).在 ItemRealized 事件中，您检查该项目是否是您的标题对象.如果是，则加载更多项目.

You can accomplish this with the ItemRealized event and using a ListHeader (or ListFooter to pull from bottom). Within the ItemRealized event you check if the item is your header object. If it is then load more items.

来自 Windows Phone 开发博客

每次 LongListSelector 项获取要显示在屏幕上的 UI 容器时，都会引发 ItemRealized 事件.换句话说，每次项目进入当前视口上方或下方的 UI 缓冲区时，都会引发 ItemRealized 事件.事件参数属性 ItemKind 指示 UI 容器是 Item、ListHeader、GroupHeader 还是 列表页脚.使用属性 Container.Content，您可以获得与实现的 UI 容器关联的实际对象.这样你就可以监控 UI 容器缓冲区内的对象.

The ItemRealized event is raised every time a LongListSelector item acquires a UI container to be displayed on the screen. In other words, every time an item enters the UI buffers above or below the current viewport, the ItemRealized event is raised. The event argument property ItemKind indicates whether the UI container is an Item, ListHeader, GroupHeader, or ListFooter. Using the property Container.Content you can get the actual object associated with the UI container that was realized. This way you can monitor the objects within the UI container buffer.

请注意此示例中的应用代码如何包含私有变量 _offsetKnob.这有助于微调 LongListSelector 滚动体验，有助于根据项目模板的重量或发送数据的服务的响应速度确定何时加载更多项目.

Note how the app code in this example contains a private variable _offsetKnob. This helps fine-tune the LongListSelector scrolling experience by helping to determine when to load more items depending on how heavy your item template is, or on how slow the response is from the service sending the data.

来自他们提供的 Twitter 示例

void resultList_ItemRealized(object sender, ItemRealizationEventArgs e)
{
    if (!_viewModel.IsLoading && resultList.ItemsSource != null && resultList.ItemsSource.Count >= _offsetKnob)
    {
        if (e.ItemKind == LongListSelectorItemKind.Item)
        {
            if ((e.Container.Content as TwitterSearchResult).Equals(resultList.ItemsSource[resultList.ItemsSource.Count - _offsetKnob]))
            {
                _viewModel.LoadPage(_searchTerm, _pageNumber++);
            }
        }
    }
}

下载完整的 Twitter 搜索示例

这篇关于使用长列表选择器下拉刷新 Windows Phone 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！