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

桃扇骨 2022-08-02 01:25 211阅读 0赞

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);
                }
            }
        }
    }

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

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 IOS UITableView列表滚回顶部功能

项目中做一个动态列表，需要做一个滚回顶部功能，总结了几个方法方法一： [CATransaction begin]; [CATransaction

朴灿烈づ我的快乐病毒、/ 2022年12月13日 04:48/ 0 赞/ 227 阅读

相关利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能，现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。废话不多

怼烎@/ 2022年09月26日 02:27/ 0 赞/ 223 阅读

相关 jquery实现回到顶部效果

css: <style> div { width: 100%; height:

朱雀/ 2022年09月14日 09:09/ 0 赞/ 215 阅读

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

WinRT中常用的数据列表显示控件大略就是ListBox，ListView，GridView。在应用中，有的时候用户在长时间浏览列表内容之后想回到列表顶部，那么针对于这种需

桃扇骨/ 2022年08月02日 01:25/ 0 赞/ 212 阅读

相关回到顶部

[html元素固定定位fixed][html_fixed] 元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixe

╰半夏微凉°/ 2022年06月02日 04:56/ 0 赞/ 322 阅读

相关回到顶部JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

青旅半醒/ 2022年05月27日 12:29/ 0 赞/ 306 阅读

相关回到顶部

<template> <div class=""> <div class="flexd"> <d

港控/mmm°/ 2021年12月19日 16:51/ 0 赞/ 427 阅读

相关回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定

Bertha 。/ 2021年10月19日 11:36/ 0 赞/ 461 阅读

相关回到顶部组件

回到顶部--组件 1.html 一个button足矣 <button class="back-to-top">返回顶部</button> 2.css 注

Myth丶恋晨/ 2021年10月09日 03:52/ 0 赞/ 451 阅读

相关 Element-UI组件实现全局回到顶部功能

目录一项目创建步骤二删除不必要的文件三删除不必要的代码四安装 element-ui 五启动项目六测试七正式编写的代码八测试效果

古城微笑少年丶/ 2021年07月24日 17:09/ 0 赞/ 615 阅读