Here is the code:
Style:
<Style x:Key="GridViewStyle1" TargetType="GridView">
<Setter Property="Padding" Value="0,0,0,10"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="IsSwipeEnabled" Value="True"/>
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridView">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer" ViewChanged="OnViewChanged" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" DragEnter="Dragged">
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="test" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource" IsSourceGrouped="True" ItemsPath="Items"/>
</Page.Resources>
<Grid x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top">
<GridView x:Name="itemsView" Style="{StaticResource GridViewStyle1}"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None"
IsEnabled="True"
IsItemClickEnabled="True"
IsSwipeEnabled="True"
BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,0,6">
<TextBlock Text="{Binding GroupTitle}" Foreground="Red"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="500">
<TextBlock Text="{Binding Title}"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Page>
C#:
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading;
using System.Threading.Tasks;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace App1
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
ObservableCollection<GroupItem> initData = new ObservableCollection<GroupItem>();
for (int i = 0; i < 2; i++)
{
initData.Add(new GroupItem());
}
itemsViewSource.Source = new ItemsIncrementalLoader(initData);
}
public void BarValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
var tmp = "View changed";
}
public void OnViewChanged(object sender, ItemClickEventArgs e)
{
var tmp = "View changed";
}
public void Dragged(object sender, DragEventArgs e)
{
var tmp = "";
}
}
public class Item
{
public string Title { get; set; }
public string Description { get; set; }
public Item(string title, string desc)
{
Title = title;
Description = desc;
}
}
public class GroupItem
{
private static int index = 0;
public static int Index { get { return index++; } }
public string GroupTitle { get; set; }
public ObservableCollection<Item> Items{ get; set; }
public GroupItem()
{
int idx = Index;
GroupTitle = "Group Title: " + idx;
Items = new ObservableCollection<Item>();
for (int i = 0; i < 50; i++)
{
Items.Add(new Item("Title " + i + " in group " + idx, "Description " + i + " in group " + idx));
}
}
}
public class ItemsIncrementalLoader : ObservableCollection<GroupItem>, ISupportIncrementalLoading
{
public ItemsIncrementalLoader(ObservableCollection<GroupItem> loadedItems)
{
if (loadedItems != null && loadedItems.Count > 0)
{
foreach (GroupItem item in loadedItems)
{
this.Add(item);
}
}
}
public bool HasMoreItems
{
get
{
return true;
}
}
public Windows.Foundation.IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
{
return AsyncInfo.Run((c) => LoadMoreItemsAsync(c, count));
}
private async Task<LoadMoreItemsResult> LoadMoreItemsAsync(CancellationToken c, uint count)
{
try
{
Task task = Task.Delay(1);
await task;
for (int i = 0; i < 3; i++)
{
this.Add(new GroupItem());
}
return new LoadMoreItemsResult { Count = 3 };
}
finally { }
}
}
}
Thanks.
