win8 metro 无限滚动加载数据，实现“更多”功能
来源：互联网 发布：kruskal算法 java 编辑：程序博客网 时间：2024/05/03 10:09
1、metro前台
<common:LayoutAwarePage x:Name="pageRoot" x:Class="HTFinancial.GroupNewsPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:HTFinancial" xmlns:data="using:HTFinancial.Data" xmlns:common="using:HTFinancial.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:c4fConverters="using:Coding4Fun.Toolkit.Controls.Converters" xmlns:c4fToolkit="using:Coding4Fun.Toolkit.Controls" > <Page.Resources> <!-- 此页所显示的项集合--> <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}" d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/> </Page.Resources> <!-- 此网格用作定义以下两行的页的根面板: * 第 0 行包含后退按钮和页标题 * 第 1 行包含页布局的其余部分 --> <Grid Background="{StaticResource GridImageBrush}" Style="{StaticResource LayoutRootStyle}" DataContext="{Binding Group}" d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ProgressBar x:Name="pb" IsIndeterminate="True" Foreground="Gray" Margin="0,-130,0,0" /> <!-- 在大多数视图状态中使用的水平滚动网格--> <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Items In Group" TabIndex="1" Grid.RowSpan="2" Padding="120,126,120,50" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard300x100ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" Margin="-100,0,0,0" ScrollViewer.HorizontalScrollBarVisibility="Visible" PointerReleased="itemGridView_PointerReleased" ItemClick="ItemView_ItemClick" Loaded="itemGridView_Loaded" > <!--<GridView.Header> <StackPanel Visibility="Collapsed" Width="480" Margin="0,4,14,0"> <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/> <Image Source="{Binding Image}" Height="420" Margin="0,0,18,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> <TextBlock Text="{Binding Description}" Margin="0,0,18,0" Style="{StaticResource BodyTextStyle}"/> </StackPanel> </GridView.Header>--> <GridView.ItemContainerStyle> <Style TargetType="FrameworkElement"> <Setter Property="Margin" Value="52,0,0,10"/> </Style> </GridView.ItemContainerStyle> </GridView> <!-- 垂直滚动列表仅在对齐后使用--> <ListView x:Name="itemListView" AutomationProperties.AutomationId="ItemListView" AutomationProperties.Name="Items In Group" TabIndex="1" Grid.Row="1" Visibility="Collapsed" Padding="10,0,0,60" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ItemTemplate="{StaticResource Standard30ItemTemplate}" SelectionMode="None" IsSwipeEnabled="False" IsItemClickEnabled="True" Foreground="Transparent" ItemClick="ItemView_ItemClick" > <ListView.Header> <StackPanel x:Name="sp" > <TextBlock Text="{Binding Title}" Margin="10,0,18,20" Style="{StaticResource TitleTextStyle}" MaxHeight="60"/> <TextBlock Margin="10,20,18,30" Text="{Binding PubDate}" Style="{StaticResource PubDateStyle}"/> </StackPanel> </ListView.Header> </ListView> <!-- 后退按钮和页标题--> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="186"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> <TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1" IsHitTestVisible="false"/> <StackPanel Grid.Column="2" > <Button x:Name="btnGoLeft" FontSize="20" Content="左端" Width="137" Height="41" Margin="39,22,0,2" Click="btnGoLeft_Click"/> <Button x:Name="btnGoRight" FontSize="20" Content="右端" Width="137" Height="41" Margin="39,8,0,2" Click="btnGoRight_Click"/> </StackPanel> <!-- <c4fToolkit:Tile Click="openCalendarBtn_Click" > <StackPanel Width="auto"> <TextBox HorizontalAlignment="Left" IsReadOnly="True" x:Name="datePicker" TextWrapping="Wrap" Text="{Binding CurrentDateTime, Converter={StaticResource DebugConverter}}" VerticalAlignment="Center" Height="57" Width="448" Margin="0,20,30,0" /> </StackPanel> </c4fToolkit:Tile>--> </Grid> <VisualStateManager.VisualStateGroups> <!-- 视觉状态反映应用程序的视图状态--> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <!-- 整页采用较窄的 100 像素页边距约定(纵向)--> <VisualState x:Name="FullScreenPortrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="100,126,90,0"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- 对齐后，后退按钮和标题的样式将有所不同，并且列表表示形式将被 所有视图状态中显示的网格所替代 --> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid></common:LayoutAwarePage>2、metro后台using System;using System.Collections.Generic;using System.Collections.ObjectModel;using System.ComponentModel;using System.IO;using System.Linq;using System.Net;using System.Threading.Tasks;using System.Xml.Linq;using HTFinancial.Common;using HTFinancial.Data;using Windows.ApplicationModel;using Windows.Data.Xml.Dom;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.Storage;using Windows.UI.Core;using Windows.UI.Popups;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=234237 上有介绍namespace HTFinancial{ /// <summary> /// 显示单个组的概述的页，包括组内各项 /// 的预览。 /// </summary> public sealed partial class GroupNewsPage : HTFinancial.Common.LayoutAwarePage { //Point start = new Point(); public List<NewsItem> olditem = new List<NewsItem>(); //集合总数 public int itemCount = 0; //进入页面时是否为相同参数 bool isSameItem = false; public string navUrl; //更多时加载参数 public int page = 2; //最右端 public double maxNum; public GroupNewsPage() { //启动缓存 NavigationCacheMode = NavigationCacheMode.Enabled; this.InitializeComponent(); } /// <summary> /// 在此页将要在 Frame 中显示时进行调用。 /// </summary> /// <param name="e">描述如何访问此页的事件数据。Parameter /// 属性通常用于配置页。</param> protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); if (e.NavigationMode != NavigationMode.Back) { // TODO: 创建适用于问题域的合适数据模型以替换示例数据 var item = (String)e.Parameter as String; var group = SampleDataSource.GetItem(item); try { if (DefaultViewModel["Group"] != null) { //上一次和本次页面加载的参数是否一致 isSameItem = this.DefaultViewModel["Group"].ToString() == group.ToString(); if (!isSameItem) { pb.Visibility = Visibility.Visible; maxNum = 0; itemGridView.ItemsSource = null; page = 2; olditem = new List<NewsItem>(); } } } catch (Exception e1) { isSameItem = false; string e3 = e.ToString(); } this.DefaultViewModel["Group"] = group; if (item.Split(new char[] { '|' }).Length > 1) { navUrl = item.Split(new char[] { '|' })[1]; //相同参数时不加载数据 if (!isSameItem) { LoadHistoryData(navUrl); } } } } /// <summary> /// 避免itemGridView未加载数据scroollBar.ValueChanged 不触发 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void itemGridView_Loaded(object sender, RoutedEventArgs e) { try { //找到gridview中的 scrollViewer 、 scrollBar 注册值改变事件 //Tip 获取该事件要在绑定数据后才去注册，不然获取不到scrollviewer var scrollViewer = this.FindVisualChildByName<ScrollViewer>(this.itemGridView, "ScrollViewer"); //找到水平的滚轴 var scroollBar = this.FindVisualChildByName<ScrollBar>(scrollViewer, "HorizontalScrollBar"); //同页面不同参数进入时滚动条在最左端 if (itemCount == -1 && !isSameItem) { //新页面 滚动条默认的初始位置是置顶 scrollViewer.ScrollToHorizontalOffset(0); } scroollBar.ValueChanged += scroollBar_ValueChanged; } catch (Exception e2) { string e3 = e2.ToString(); } } /// <summary> /// 根据名称找到控件的内容控件 /// </summary> /// <typeparam name="T"></typeparam> /// <param name="parent"></param> /// <param name="name"></param> /// <returns></returns> public T FindVisualChildByName<T>(DependencyObject parent, string name) where T : DependencyObject { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++) { var child = VisualTreeHelper.GetChild(parent, i); string controlName = child.GetValue(Control.NameProperty) as string; if (controlName == name) { return child as T; } else { T result = FindVisualChildByName<T>(child, name); if (result != null) return result; } } return null; } /// <summary> /// 滚动到最右边实现加载跟多功能，maxNum参数实现滑到底只触发一次 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> public void scroollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { ScrollBar scrollbar = sender as ScrollBar; //当滚轴值为最大时 且 同值第一次加载数据 且 不为重新加载页面 或 第二次进入相同页面相同参数时 if ((e.NewValue != maxNum && e.NewValue == scrollbar.Maximum) && (itemCount != -1 || isSameItem)) { pb.Visibility = Visibility.Visible; //避免多次触发事件 maxNum = e.NewValue; //异步加载数据 if (Utility.IsConnectedToInternet()) { string url = navUrl.Replace("xml", "asp") + "?page=" + page; isSameItem = true; LoadHistoryData(url); page++; } else { MessageDialog dlg = new MessageDialog("当前网络不可用", "提示"); dlg.ShowAsync(); } } if (e.NewValue == scrollbar.Minimum) { } } /// <summary> /// 在单击某个项时进行调用。 /// </summary> /// <param name="sender">显示所单击项的 GridView (在应用程序处于对齐状态时 /// 为 ListView)。</param> /// <param name="e">描述所单击项的事件数据。</param> void ItemView_ItemClick(object sender, ItemClickEventArgs e) { // 导航至相应的目标页，并 // 通过将所需信息作为导航参数传入来配置新页 var itemId = ((NewsItem)e.ClickedItem).Id; this.Frame.Navigate(typeof(NewsDetailPage), itemId); } /// <summary> /// 加载页面数据 /// </summary> /// <param name="url"></param> void LoadHistoryData(string url) { WebRequest request = HttpWebRequest.Create(url); request.BeginGetResponse(ResponseCallBackLoad, request); } /// <summary> /// 异步加载数据 /// </summary> /// <param name="result"></param> private void ResponseCallBackLoad(IAsyncResult result) { try { HttpWebRequest request = (HttpWebRequest)result.AsyncState; WebResponse response = request.EndGetResponse(result); using (Stream stream = response.GetResponseStream()) using (StreamReader reader = new StreamReader(stream)) { XDocument Xdoc = XDocument.Parse(reader.ReadToEnd()); List<NewsItem> nis = null; nis = (from item in Xdoc.Descendants("item") select new NewsItem() { Title = item.Element("title").Value, PubDate = Utility.ConvertRssToDateTime(item.Element("pubDate").Value).ToString("yyyy-MM-dd HH:mm:ss"), Id = item.Element("ID").Value, }).ToList(); //重新加载页面或不同参数时数据归零 if (itemCount == -1 && !isSameItem) { maxNum = 0; olditem = new List<NewsItem>(); page = 2; } //通过操作olditem集合实现加载更多功能 int i = olditem.Count; foreach (NewsItem ni in nis) { olditem.Insert(i, ni); i++; } itemCount = olditem.Count; ObservableCollection<NewsItem> items = new ObservableCollection<NewsItem>(olditem); Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { itemGridView.ItemsSource = items; pb.Visibility = Visibility.Collapsed;//滚动条显示 // this.DefaultViewModel["Items"] = items; }); } } catch (Exception e) { string e1=e.ToString(); } } /// <summary> /// 鼠标松键事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void itemGridView_PointerReleased(object sender, PointerRoutedEventArgs e) { // Point end = e.GetCurrentPoint(itemGridView).Position; // double angle = 0; // //判断拖动鼠标角度 // if (Math.Abs(end.X - start.X) < 1 && Math.Abs(end.Y - start.Y) < 1) // { // angle = 0; // } // else if (end.X > start.X) // { // if (end.Y > start.Y) // { // angle = 360 - Math.Atan((end.Y - start.Y) * 1.0 / (end.X - start.X)) * 180 / Math.PI; // } // else // { // angle = Math.Atan((start.Y - end.Y) * 1.0 / (end.X - start.X)) * 180 / Math.PI; // } // } // else if (end.X < start.X) // { // if (end.Y > start.Y) // { // angle = Math.Atan((end.Y - start.Y) * 1.0 / (start.X - end.X)) * 180 / Math.PI + 180; // } // else // { // angle = 180 - Math.Atan((start.Y - end.Y) * 1.0 / (start.X - end.X)) * 180 / Math.PI; // } // } // if (angle == 0) // { // //this.tbLabel.Text = "点击了一次鼠标或者屏幕"; // } // else if (angle >= 45 && angle < 135) // { // //this.tbLabelFore.Text = "从下往上"; // } // else if (angle <= 45 || angle > 315) // { // if (itemGridView.SelectedIndex == itemCount - 1) // { // if (Utility.IsConnectedToInternet()) // { // string url = navUrl.Replace("xml", "asp") + "?page=" + page; // LoadHistoryData(url); // page++; // } // else // { // MessageDialog dlg = new MessageDialog("当前网络不可用", "提示"); // dlg.ShowAsync(); // } // } // //this.tbLabelFore.Text = "从左向右滑"; // } // else if (angle >= 135 && angle < 225) // { // //this.tbLabelFore.Text = "从右向左滑"; // } // else if (angle >= 225 && angle < 315) // { // //this.tbLabelFore.Text = "从上往下"; // } } /// <summary> /// 离开本页面 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected override void GoBack(object sender, RoutedEventArgs e) { //离开时标记itemCount=-1 itemCount = -1; this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups"); } /// <summary> /// 回到最左端 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void btnGoLeft_Click(object sender, RoutedEventArgs e) { var scrollViewer = this.FindVisualChildByName<ScrollViewer>(this.itemGridView, "ScrollViewer"); //新页面 滚动条默认的初始位置是置顶 scrollViewer.ScrollToHorizontalOffset(0); } /// <summary> /// 来到最右端，可以相当于更多 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void btnGoRight_Click(object sender, RoutedEventArgs e) { var scrollViewer = this.FindVisualChildByName<ScrollViewer>(this.itemGridView, "ScrollViewer"); double toRight = scrollViewer.ScrollableWidth ; //新页面 滚动条默认的初始位置是置顶 scrollViewer.ScrollToHorizontalOffset(toRight); } }}- win8 metro 无限滚动加载数据，实现“更多”功能
- Android无限滚动库mugen实现加载更多效果
- 加载更多功能实现
- 加载更多功能实现
- vue 2 滚动条加载更多数据实现
- Ajax无限滚动加载数据
- AngularJs实现无限滚动加载
- Listview中使用线程实现无限加载更多项目的功能
- Android_Listview中使用线程实现无限加载更多项目的功能
- UITableView实现加载更多功能
- 加载更多功能的实现
- JQuery滚动加载更多数据实例
- AngularJS应用－滚动加载更多数据
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- vue中实现滚动加载更多
- XRecyclerView：实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView
- secureCRT 连接Centos6.4
- 模板应用--UI线程与worker线程同步 模仿c# invoke
- ACM必备（学完一个就加亮一个）
- 给页面添加滚动条
- 删除vs模板
- win8 metro 无限滚动加载数据，实现“更多”功能
- nginx开启gzip
- mysql 学习之 常用SQL技巧
- HDU 1431
- Windows Server 2008安装、配置DHCP
- 【Android】状态栏通知Notification、NotificationManager详解
- 老码农教你学英语：补充一些英语学习素材
- Eclipse上GIT插件EGIT使用手册
- Linux移植过程遇到的问题
