码迷,mamicode.com
首页 > Windows程序 > 详细

WinRT中实现回到列表顶部功能

时间:2015-07-05 09:39:30      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:windows phone 8.1   回到列表顶部   返回列表顶部   scrollintoview   

WinRT中常用的数据列表显示控件大略就是ListBox,ListView,GridView。在应用中,有的时候用户在长时间浏览

列表内容之后想回到列表顶部,那么针对于这种需求该如何实现呢?

最重要的是利用列表控件的ScrollIntoView方法。


好了,啥都不说了,代码如下。

XAML:

<Page
    x:Class="DragDemo.BlankPage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DragDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <ListView x:Name="listview">
                <ListView.Items>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                    <ListViewItem>
                        <TextBlock Text="aaaa" FontSize="25"/>
                    </ListViewItem>
                </ListView.Items>
            </ListView>
        </Grid>
        <Canvas Grid.Row="1">
            <Border x:Name="border" Width="100" Height="100" CornerRadius="50" Background="Coral" Tapped="border_Tapped">
                <TextBlock Text="回到顶部" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
            </Border>
        </Canvas>
    </Grid>
</Page>

.CS:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

namespace DragDemo
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class BlankPage1 : Page
    {
        public BlankPage1()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。
        /// 此参数通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void border_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var item = listview.Items.FirstOrDefault();
            if(item!=null)
            {
                listview.ScrollIntoView(item);
            }
        }
    }
}

这样就实现了点击回到列表顶部的功能,其实代码很少,很简单。

版权声明:本文为博主原创文章,未经博主允许不得转载。

WinRT中实现回到列表顶部功能

标签:windows phone 8.1   回到列表顶部   返回列表顶部   scrollintoview   

原文地址:http://blog.csdn.net/u010792238/article/details/46758015

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!