CODEWITHSUNDEEP
windowsuwpwin-universal-appwindows-10-universaluwp-xaml
Abhishek
Abhishek

Reputation: 1399

FlipView doesn't show the arrows to navigate in desktop, when more items are added in runtime

I'm using FlipView to show some items in a page. The webservice I'm getting the data from support paging, so I'm adding the next page of items to the FlipView when the user has scrolled to the current last item e.g. if the page size is 5, I'm adding 5 more items whenever the SelectedIndex of FlipView is 4,9,14,19 etc. (index starts at 0).

FlipView has two tiny arrows that we can use in desktop environment (using Mouse) to navigate through the FlipView. When we are at the last item, the right arrow would disappear, because we cannot go any further. Now, if I add more items to the list at this point, the right arrow doesn't reappear, so it doesn't give the impression that there are more items in FlipView. The right arrow would only reappear if

  1. We hover mouse on the left arrow
  2. We click at the location where the right arrow should be

Which isn't a good solution and it requires further user education. Is there any way to address this issue?

Here is a git repo that shows the issue: https://github.com/4bh1sh3k/FlipViewDemo. To repro the issue, scroll till the last item, and then use the button below to add more items to the FlipView.

Upvotes: 0

Views: 262

Answers (1)

Sunteen Wu
Sunteen Wu

Reputation: 10627

This should be determined by the control itself. If you do want the button displayed automatically, you may force the next button (which named NextButtonHorizontal in FlipView style and template) to visible after more items added. For how to get the NextButtonHorizontal button you could use VisualTreeHelper class. For example:

private void OnButtonClick(object sender, RoutedEventArgs e)
{
    AddImageUris();  
    IEnumerable<Button> items = FindVisualChildren<Button>(myFlipView);
    foreach (Button item in items)
    {
        if (item.Name == "NextButtonHorizontal")
        {
            item.Visibility = Visibility;
        }
    }
}
private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
{
    if (depObj != null)
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
        {
            DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
            if (child != null && child is T)
            {
                yield return (T)child;
            }

            foreach (T childOfChild in FindVisualChildren<T>(child))
            {
                yield return childOfChild;
            }
        }
    }
}

By the way, this can resolve your issue but I'm not very recommend that. Avoid using a flip view control for larger collections, for large collections, consider a ListView or GridView. More details please reference FlipView guidelines.

Upvotes: 1

Related Questions