From d8b4f3e8beddec2e04493f77d88e6f0d203822cf Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Tue, 9 Jun 2020 10:31:46 -0700 Subject: [PATCH 1/8] Create ItemsRepeater-FirstVisibleIndex --- active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex | 1 + 1 file changed, 1 insertion(+) create mode 100644 active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex @@ -0,0 +1 @@ + From 3639050f4e8ac48d56d472e2e7bf60b88eb4f07c Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Tue, 9 Jun 2020 10:32:05 -0700 Subject: [PATCH 2/8] Rename ItemsRepeater-FirstVisibleIndex to ItemsRepeater-FirstVisibleIndex.md --- ...eater-FirstVisibleIndex => ItemsRepeater-FirstVisibleIndex.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename active/ItemsRepeater/{ItemsRepeater-FirstVisibleIndex => ItemsRepeater-FirstVisibleIndex.md} (100%) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md similarity index 100% rename from active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex rename to active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md From a822dea89fdebc7fa5c83b880827628d566e0fb5 Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Tue, 9 Jun 2020 14:36:21 -0700 Subject: [PATCH 3/8] Adding first draft of spec --- .../ItemsRepeater-FirstVisibleIndex.md | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index 8b1378917..802bfb6b9 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -1 +1,124 @@ + + + +# Background + + + + + + + + + + +[ItemsRepeater](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater?view=winui-2.4) is a flexible layout control that allows you to easily display collections of items complete with custom layouts, animations, styling, and more. Currently, there is no built-in way to access which items are visible or realized in the viewport of the ItemsRepeater. This inhibits lots of interaction-based UIs and puts lots of extra work on the developer to manually determine which items are visible. + +In uniform layouts, all visible items inside of the ItemsRepeater's viewport will appear between the first and last visible index. Since ItemsRepeater allows for custom layouts, it's common to have non-uniform layouts, where each item has a different height or width, as well as nested layouts. In these cases, the visible items are often non-contiguous in terms of their indices. For these cases, knowing the first visible index and last visible index won't be helpful, and the best way to determine what's visible is to have a list of all currently realized/visible items. + +The [ListView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listview?view=winrt-19041) and [GridView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.gridview?view=winrt-19041) controls already have properties to access the indices of their first and last visible items in the form of the [FirstVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.firstvisibleindex?view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex) and [LastVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.lastvisibleindex?view=winrt-19041) properties on their respective base panels, [ItemsStackPanel](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel?view=winrt-19041) and [ItemsWrapGrid](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsWrapGrid?redirectedfrom=MSDN&view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex). + +# Description + + +FirstVisibleIndex, LastVisibleIndex,and RealizedItems are properties of ItemsRepeater that give you access to which indices of items within an ItemsRepeater are currently visible on the screen. + +The `FirstVisibleIndex` property returns the lowest index of the currently visible indices, which is the first visible index. The `LastVisibleIndex` property returns the highest index of the currently visible indices, which is the last visible index. For contiguous scenarios/layouts (uniform layouts), all items with indices between the first and last visible index are currently visible on the screen. For non-contiguous/non-uniform/nested layouts, the first and last visible index may not correlate to the first and last visible items on the screen. + + +The `RealizedItems` property returns all items within the ItemsRepeater that are currently realized and visible on the screen, including items that may be cut off or not 100% visible. This property is helpful for determining which items are visible in non-contiguous and non-uniform layout scenarios. + +# Examples + + + + + + +```csharp +// Check if an item is currently visible in a uniform layout. +int item_index = repeater.GetIndexFromElement(item); +if (item_index > repeater.FirstVisibleIndex && item_index < repeater.LastVisibleIndex){ + //item is visible, perform necessary actions +} + +// In a non-contiguous layout, find the index of the first visible item. +UIElement last_item = repeater.RealizedItems[0] as UIElement; +int first_visible_idx = repeater.GetIndexFromElement(last_item); +// first_visible_idx represents the first visible index, perform necessary actions on it. +``` + +# Remarks + + + + +# API Notes + + + +```csharp +public int FirstVisibleIndex { get; } + +public int LastVisibleIndex { get; } + +public object RealizedItems { get; } +// **The ItemsRepeater ItemsSource property accepts arguments of type object, so this property follows suit. See open questions below.** +``` + +# API Details + +```csharp +unsealed runtimeclass ItemsRepeater : Windows.UI.Xaml.FrameworkElement +{ + ItemsRepeater(); + + // ... + + Int32 FirstVisibleIndex { get; set; } + Int32 LastVisibleIndex { get; set; } + Object RealizedItems { get; set; } + + // ... +} +``` + + + +# Open Questions +- Should the RealizedItems property return an IEnumerable or List? Or should it simply return an object to match the ItemsSource property? \ No newline at end of file From b9a9985f846f26e7b17e6a84361f03d42eb3d12a Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Tue, 9 Jun 2020 15:41:16 -0700 Subject: [PATCH 4/8] Changing RealizedItems type --- active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index 802bfb6b9..918d62893 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -94,8 +94,8 @@ public int FirstVisibleIndex { get; } public int LastVisibleIndex { get; } -public object RealizedItems { get; } -// **The ItemsRepeater ItemsSource property accepts arguments of type object, so this property follows suit. See open questions below.** +public IEnumerable RealizedItems { get; } +// RealizedItems is an *unsorted* IEnumerable object. ``` # API Details @@ -109,7 +109,7 @@ unsealed runtimeclass ItemsRepeater : Windows.UI.Xaml.FrameworkElement Int32 FirstVisibleIndex { get; set; } Int32 LastVisibleIndex { get; set; } - Object RealizedItems { get; set; } + Windows.Foundation.Collections.IEnumerable RealizedItems { get; set; } // ... } From 527325eb54fc57d652c0801f2dfe67628dfe53d6 Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Fri, 12 Jun 2020 15:03:31 -0700 Subject: [PATCH 5/8] Fixing example code, clarifying a few things from review comments --- .../ItemsRepeater-FirstVisibleIndex.md | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index 918d62893..c14f6f370 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -29,7 +29,7 @@ the reader "go read 100 pages of background information posted at ...". --> [ItemsRepeater](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater?view=winui-2.4) is a flexible layout control that allows you to easily display collections of items complete with custom layouts, animations, styling, and more. Currently, there is no built-in way to access which items are visible or realized in the viewport of the ItemsRepeater. This inhibits lots of interaction-based UIs and puts lots of extra work on the developer to manually determine which items are visible. -In uniform layouts, all visible items inside of the ItemsRepeater's viewport will appear between the first and last visible index. Since ItemsRepeater allows for custom layouts, it's common to have non-uniform layouts, where each item has a different height or width, as well as nested layouts. In these cases, the visible items are often non-contiguous in terms of their indices. For these cases, knowing the first visible index and last visible index won't be helpful, and the best way to determine what's visible is to have a list of all currently realized/visible items. +In contiguous layouts, all visible items inside of the ItemsRepeater's viewport will appear between the first and last visible index. Since ItemsRepeater allows for custom layouts, it's common to have non-contiguous layouts, such as layouts where each item has an unpredictably different height or width. In these cases, the visible items are often non-contiguous in terms of their indices. For these cases, knowing the first visible index and last visible index won't be helpful, and the best way to determine what's visible is to have a list of all currently realized/visible items. The [ListView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listview?view=winrt-19041) and [GridView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.gridview?view=winrt-19041) controls already have properties to access the indices of their first and last visible items in the form of the [FirstVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.firstvisibleindex?view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex) and [LastVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.lastvisibleindex?view=winrt-19041) properties on their respective base panels, [ItemsStackPanel](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel?view=winrt-19041) and [ItemsWrapGrid](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsWrapGrid?redirectedfrom=MSDN&view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex). @@ -40,10 +40,10 @@ For an example, see the introduction to the PasswordBox control FirstVisibleIndex, LastVisibleIndex,and RealizedItems are properties of ItemsRepeater that give you access to which indices of items within an ItemsRepeater are currently visible on the screen. -The `FirstVisibleIndex` property returns the lowest index of the currently visible indices, which is the first visible index. The `LastVisibleIndex` property returns the highest index of the currently visible indices, which is the last visible index. For contiguous scenarios/layouts (uniform layouts), all items with indices between the first and last visible index are currently visible on the screen. For non-contiguous/non-uniform/nested layouts, the first and last visible index may not correlate to the first and last visible items on the screen. +The `FirstVisibleIndex` property returns the lowest index of the currently visible indices, which is the first visible index. The `LastVisibleIndex` property returns the highest index of the currently visible indices, which is the last visible index. For contiguous scenarios/layouts, all items with indices between the first and last visible index are currently visible on the screen. For non-contiguous layouts, the items with indices between the first and last visible indices are not guaranteed to be visible on the screen. -The `RealizedItems` property returns all items within the ItemsRepeater that are currently realized and visible on the screen, including items that may be cut off or not 100% visible. This property is helpful for determining which items are visible in non-contiguous and non-uniform layout scenarios. +The `RealizedItems` property returns all items within the ItemsRepeater that are currently realized. ItemsRepeater has a buffer area outside of the visible area to ensure smooth scrolling, which is configurable through the [HorizontalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.horizontalcachelength?view=winui-2.4#Microsoft_UI_Xaml_Controls_ItemsRepeater_HorizontalCacheLength) and [VerticalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.verticalcachelength?view=winui-2.4#Microsoft_UI_Xaml_Controls_ItemsRepeater_VerticalCacheLength) properties. Realized items include all items visible on the screen and any items currently inside this buffer area. # Examples ```csharp -// Check if an item is currently visible in a uniform layout. +// Check if an item is currently visible in a contiguous layout. + int item_index = repeater.GetIndexFromElement(item); if (item_index > repeater.FirstVisibleIndex && item_index < repeater.LastVisibleIndex){ //item is visible, perform necessary actions } -// In a non-contiguous layout, find the index of the first visible item. -UIElement last_item = repeater.RealizedItems[0] as UIElement; -int first_visible_idx = repeater.GetIndexFromElement(last_item); -// first_visible_idx represents the first visible index, perform necessary actions on it. +// In a non-contiguous layout, change the background color of any items that have been seen by the user (i.e. they're visible on the screen). This example applies well to messaging scenarios where the styling is changed for messages that have been read/seen. + +foreach(StackPanel message in repeater.RealizedItems){ + // each item has a DataTemplate with a StackPanel root element + message.Background = "Red"; +} ``` # Remarks @@ -107,9 +110,9 @@ unsealed runtimeclass ItemsRepeater : Windows.UI.Xaml.FrameworkElement // ... - Int32 FirstVisibleIndex { get; set; } - Int32 LastVisibleIndex { get; set; } - Windows.Foundation.Collections.IEnumerable RealizedItems { get; set; } + Int32 FirstVisibleIndex { get; } + Int32 LastVisibleIndex { get; } + Windows.Foundation.Collections.IEnumerable RealizedItems { get; } // ... } From 6c740ec96bd6d34306da2d97cce49200206cfeef Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Mon, 15 Jun 2020 16:26:19 -0700 Subject: [PATCH 6/8] Changing spec - new properties include only VisibleItems and RealizedItems --- .../ItemsRepeater-FirstVisibleIndex.md | 49 ++++++++----------- 1 file changed, 20 insertions(+), 29 deletions(-) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index c14f6f370..d7519e0a6 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -29,21 +29,20 @@ the reader "go read 100 pages of background information posted at ...". --> [ItemsRepeater](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater?view=winui-2.4) is a flexible layout control that allows you to easily display collections of items complete with custom layouts, animations, styling, and more. Currently, there is no built-in way to access which items are visible or realized in the viewport of the ItemsRepeater. This inhibits lots of interaction-based UIs and puts lots of extra work on the developer to manually determine which items are visible. -In contiguous layouts, all visible items inside of the ItemsRepeater's viewport will appear between the first and last visible index. Since ItemsRepeater allows for custom layouts, it's common to have non-contiguous layouts, such as layouts where each item has an unpredictably different height or width. In these cases, the visible items are often non-contiguous in terms of their indices. For these cases, knowing the first visible index and last visible index won't be helpful, and the best way to determine what's visible is to have a list of all currently realized/visible items. +ItemsRepeater does independent scrolling, and requires a buffer area that holds non-visible items and runs layout processes on them before they become visible/scrolled onto. This buffer area size is configurable via the [HorizontalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.horizontalcachelength?view=winui-2.4) and [VerticalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.verticalcachelength?view=winui-2.4) properties. -The [ListView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listview?view=winrt-19041) and [GridView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.gridview?view=winrt-19041) controls already have properties to access the indices of their first and last visible items in the form of the [FirstVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.firstvisibleindex?view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex) and [LastVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.lastvisibleindex?view=winrt-19041) properties on their respective base panels, [ItemsStackPanel](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel?view=winrt-19041) and [ItemsWrapGrid](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsWrapGrid?redirectedfrom=MSDN&view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex). +The [ListView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listview?view=winrt-19041) and [GridView](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.gridview?view=winrt-19041) controls have properties to access the indices of their first and last visible items in the form of the [FirstVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.firstvisibleindex?view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex) and [LastVisibleIndex](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid.lastvisibleindex?view=winrt-19041) properties on their respective base panels, [ItemsStackPanel](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel?view=winrt-19041) and [ItemsWrapGrid](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ItemsWrapGrid?redirectedfrom=MSDN&view=winrt-19041#Windows_UI_Xaml_Controls_ItemsWrapGrid_FirstVisibleIndex). These properties allow you to access all currently visible items. # Description -FirstVisibleIndex, LastVisibleIndex,and RealizedItems are properties of ItemsRepeater that give you access to which indices of items within an ItemsRepeater are currently visible on the screen. +`RealizedItems` and `VisibleItems` are properties that give you access to all realized or visible items within an ItemsRepeater. These two properties both return lists of [UIElement](https://docs.microsoft.com/uwp/api/windows.ui.xaml.uielement?view=winrt-19041) objects that make up the ItemsRepeater. -The `FirstVisibleIndex` property returns the lowest index of the currently visible indices, which is the first visible index. The `LastVisibleIndex` property returns the highest index of the currently visible indices, which is the last visible index. For contiguous scenarios/layouts, all items with indices between the first and last visible index are currently visible on the screen. For non-contiguous layouts, the items with indices between the first and last visible indices are not guaranteed to be visible on the screen. +Realized items includes all items that are currently visible and all items that are in the cache/buffer area. The size of these buffer areas are configurable via the [HorizontalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.horizontalcachelength?view=winui-2.4) and [VerticalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.verticalcachelength?view=winui-2.4) properties - -The `RealizedItems` property returns all items within the ItemsRepeater that are currently realized. ItemsRepeater has a buffer area outside of the visible area to ensure smooth scrolling, which is configurable through the [HorizontalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.horizontalcachelength?view=winui-2.4#Microsoft_UI_Xaml_Controls_ItemsRepeater_HorizontalCacheLength) and [VerticalCacheLength](https://docs.microsoft.com/uwp/api/microsoft.ui.xaml.controls.itemsrepeater.verticalcachelength?view=winui-2.4#Microsoft_UI_Xaml_Controls_ItemsRepeater_VerticalCacheLength) properties. Realized items include all items visible on the screen and any items currently inside this buffer area. +Visible items refers to all items that are visible in the ItemsRepeater, whether they are fully or partially visible. # Examples ```csharp -// Check if an item is currently visible in a contiguous layout. +/* Example 1: Check if a specific item is visible by the user. If visible, inform the user that they've scrolled to the bottom of the list. */ +int repeater_length = repeater.ItemsSource.Count; -int item_index = repeater.GetIndexFromElement(item); -if (item_index > repeater.FirstVisibleIndex && item_index < repeater.LastVisibleIndex){ - //item is visible, perform necessary actions +foreach (Grid item in repeater.VisibleItems){ + if (repeater.GetElementIndex(item) == repeater_length - 1){ + myTextBlock.Text = "No more elements to display."; + } } -// In a non-contiguous layout, change the background color of any items that have been seen by the user (i.e. they're visible on the screen). This example applies well to messaging scenarios where the styling is changed for messages that have been read/seen. +/* Example 2: Change the background color of any items that have been seen by the user (i.e. they're visible on the screen). This example applies well to messaging scenarios where the styling is changed for messages that have been read/seen. + +By using the RealizedItems property, any item that becomes visible while scrolling will have this changed background color. */ foreach(StackPanel message in repeater.RealizedItems){ // each item has a DataTemplate with a StackPanel root element @@ -75,14 +78,6 @@ foreach(StackPanel message in repeater.RealizedItems){ } ``` -# Remarks - - - - # API Notes ```csharp -public int FirstVisibleIndex { get; } - -public int LastVisibleIndex { get; } public IEnumerable RealizedItems { get; } -// RealizedItems is an *unsorted* IEnumerable object. +public IEnumerable VisibleItems { get; } + +// RealizedItems and VisibleItems are *unsorted* IEnumerable objects. + ``` # API Details @@ -109,11 +104,10 @@ unsealed runtimeclass ItemsRepeater : Windows.UI.Xaml.FrameworkElement ItemsRepeater(); // ... - - Int32 FirstVisibleIndex { get; } - Int32 LastVisibleIndex { get; } Windows.Foundation.Collections.IEnumerable RealizedItems { get; } + Windows.Foundation.Collections.IEnumerable VisibleItems { get; } + // ... } ``` @@ -122,6 +116,3 @@ unsealed runtimeclass ItemsRepeater : Windows.UI.Xaml.FrameworkElement - -# Open Questions -- Should the RealizedItems property return an IEnumerable or List? Or should it simply return an object to match the ItemsSource property? \ No newline at end of file From 42a90a6348d8a3bf94b116cac3c3214451c0786a Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Thu, 18 Jun 2020 15:23:09 -0700 Subject: [PATCH 7/8] Updating code sample --- .../ItemsRepeater-FirstVisibleIndex.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index d7519e0a6..ed4db8b84 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -60,22 +60,25 @@ example code with each description. The general format is: ```csharp /* Example 1: Check if a specific item is visible by the user. If visible, inform the user that they've scrolled to the bottom of the list. */ -int repeater_length = repeater.ItemsSource.Count; + +int repeater_length = repeater.ItemsSourceView.Count; foreach (Grid item in repeater.VisibleItems){ + // Check to see if the last item of the list is visible. if (repeater.GetElementIndex(item) == repeater_length - 1){ + // If so, we've reached the end of the list. myTextBlock.Text = "No more elements to display."; } } -/* Example 2: Change the background color of any items that have been seen by the user (i.e. they're visible on the screen). This example applies well to messaging scenarios where the styling is changed for messages that have been read/seen. - -By using the RealizedItems property, any item that becomes visible while scrolling will have this changed background color. */ - -foreach(StackPanel message in repeater.RealizedItems){ - // each item has a DataTemplate with a StackPanel root element - message.Background = "Red"; +/* Example 2: Get the list of realized items and mark in the source collection that the item has been realized. */ +int item_idx = 0; +foreach (Grid item in repeater.RealizedItems){ + item_idx = repeater.GetElementIndex(item); + // IsRealized is a custom attribute created for objects that are a part of the repeater's ItemsSource. + repeater.ItemsSourceView[item_idx].IsRealized = true; } + ``` # API Notes From 9928dc81284c89ce5ed2c9420b9116babf973103 Mon Sep 17 00:00:00 2001 From: Ana Wishnoff Date: Mon, 10 Aug 2020 14:06:13 -0700 Subject: [PATCH 8/8] Update ItemsRepeater-FirstVisibleIndex.md --- .../ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md index ed4db8b84..4b9b9e9e7 100644 --- a/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md +++ b/active/ItemsRepeater/ItemsRepeater-FirstVisibleIndex.md @@ -79,6 +79,17 @@ foreach (Grid item in repeater.RealizedItems){ repeater.ItemsSourceView[item_idx].IsRealized = true; } +/* Example 3: Find the item with the first visible index and change its color */ + +int firstVisibleIndex = int.MaxValue; + +foreach (Grid item in repeater.VisbleItems){ + int index = repeater.GetElementIndex(item); + firstVisibleIndex = Math.Min(index, firstVisibleIndex); +} + +Grid firstVisibleItem = repeater.TryGetElement(firstVisibleIndex) as Grid; +firstVisibleItem.Background = "Light Green"; ``` # API Notes