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);
}
}
}
}
這樣就實現了點擊回到列表頂部的功能,其實代碼很少,很簡單。