Answered by:
ScrollView ViewChanged not raised

Question
-
Hi,
I am trying to implement incremental loading on a grouped GridView by handling ViewChanged event on the internal ScrollViewer.
Followed thread http://social.msdn.microsoft.com/Forums/windowsapps/en-US/d7988d29-0b6e-4f63-a9f5-7006c49e5072/how-to-write-listview-scrollpostion-changed-event making a copy of the GridView style, but OnViewChanged were never called when scrolling to the edge of the GridView.
Did I miss anything?
Thanks.
Monday, August 12, 2013 7:16 PM
Answers
-
It seems you're placing the style in a Resource Dictionary, Please place the style in the page resources like this:
<Page.Resources> <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> <!-- Collection of items displayed by this page --> <CollectionViewSource x:Name="itemsViewSource" IsSourceGrouped="True" ItemsPath="Items"/> </Page.Resources>
- Ram
If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".- Edited by Ramprasath R Tuesday, August 13, 2013 10:44 AM typo
- Marked as answer by Chunmiao Tuesday, August 13, 2013 3:58 PM
Tuesday, August 13, 2013 10:43 AM
All replies
-
Can you share a code snippet of what you are trying to do? The GridView's control template has a scrollviewer which will get ViewChanged events when you are panning/zooming the gridview.
Harini Kannan | Program Manager, XAML
Monday, August 12, 2013 7:55 PM -
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.- Edited by Chunmiao Monday, August 12, 2013 8:40 PM removed non-needed code
Monday, August 12, 2013 8:02 PM -
It seems you're placing the style in a Resource Dictionary, Please place the style in the page resources like this:
<Page.Resources> <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> <!-- Collection of items displayed by this page --> <CollectionViewSource x:Name="itemsViewSource" IsSourceGrouped="True" ItemsPath="Items"/> </Page.Resources>
- Ram
If a post answers your question, please click "Mark As Answer" on that post and "Mark as Helpful".- Edited by Ramprasath R Tuesday, August 13, 2013 10:44 AM typo
- Marked as answer by Chunmiao Tuesday, August 13, 2013 3:58 PM
Tuesday, August 13, 2013 10:43 AM -
Thank you so much! This is the trick.Tuesday, August 13, 2013 3:58 PM