From 2c6f1994bbae555a459902a5cd083f9e1a97c45f Mon Sep 17 00:00:00 2001 From: Vsevolod Date: Fri, 8 Jan 2021 13:17:38 -0800 Subject: [PATCH] Add listview and repeater examples to PipsPager (#3789) * Add listview and repeater examples for PipsPager --- dev/PipsPager/TestUI/PipsPagerExamples.xaml | 206 ++++++++++++++++++ .../TestUI/PipsPagerExamples.xaml.cs | 150 +++++++++++++ dev/PipsPager/TestUI/PipsPagerPage.xaml | 36 +-- dev/PipsPager/TestUI/PipsPagerPage.xaml.cs | 5 + .../TestUI/PipsPager_TestUI.projitems | 9 +- 5 files changed, 378 insertions(+), 28 deletions(-) create mode 100755 dev/PipsPager/TestUI/PipsPagerExamples.xaml create mode 100755 dev/PipsPager/TestUI/PipsPagerExamples.xaml.cs mode change 100644 => 100755 dev/PipsPager/TestUI/PipsPager_TestUI.projitems diff --git a/dev/PipsPager/TestUI/PipsPagerExamples.xaml b/dev/PipsPager/TestUI/PipsPagerExamples.xaml new file mode 100755 index 0000000000..131903e918 --- /dev/null +++ b/dev/PipsPager/TestUI/PipsPagerExamples.xaml @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dev/PipsPager/TestUI/PipsPagerExamples.xaml.cs b/dev/PipsPager/TestUI/PipsPagerExamples.xaml.cs new file mode 100755 index 0000000000..633dfadece --- /dev/null +++ b/dev/PipsPager/TestUI/PipsPagerExamples.xaml.cs @@ -0,0 +1,150 @@ +using System; +using Windows.UI.Xaml.Controls; +using System.Collections.Generic; +using System.Linq; +using PipsPagerSelectedIndexChangedEventArgs = Microsoft.UI.Xaml.Controls.PipsPagerSelectedIndexChangedEventArgs; +using PipsPager = Microsoft.UI.Xaml.Controls.PipsPager; +using Windows.UI.Xaml; +using Windows.UI.Xaml.Media; +using System.Collections.ObjectModel; +using Windows.UI.Xaml.Media.Imaging; +using Windows.Foundation; + +namespace MUXControlsTestApp +{ + public sealed partial class PipsPagerExamples : Page + { + private int MinRowSpacing = 8; + private int TotalNumberOfDisplayedObjects = 50; + private double ButtonListPreviousOffset = 0.0; + private double PersonInfoListPreviousOffset = 0.0; + private ScrollViewer PersonInfoListScrollViewer; + public List Pictures = new List() + { + + "Assets/ingredient1.png", + "Assets/ingredient2.png", + "Assets/ingredient3.png", + "Assets/ingredient4.png", + "Assets/ingredient5.png", + "Assets/ingredient6.png", + "Assets/ingredient7.png", + "Assets/ingredient8.png", + }; + + public PipsPagerExamples() + { + this.InitializeComponent(); + PersonInfoList.ItemsSource = CreatePersonInfoList(); + ButtonListRepeater.ItemsSource = CreateButtonListItems(); + this.Loaded += OnLoaded; + } + + private void OnLoaded(object sender, RoutedEventArgs e) + { + ButtonListPager.NumberOfPages = (int)Math.Ceiling(ButtonListScrollViewer.ExtentHeight / ButtonListScrollViewer.ViewportHeight); + SetButtonListRepeaterSize(); + PersonInfoListScrollViewer = FindInnerScrollViewer(PersonInfoList); + PersonInfoListScrollViewer.ViewChanged += PersonInfoList_ViewChanged; + PersonInfoListPager.NumberOfPages = (int)Math.Ceiling(PersonInfoListScrollViewer.ExtentHeight / PersonInfoListScrollViewer.ViewportHeight); + } + + private void SetButtonListRepeaterSize() + { + DataTemplate dt = ButtonListRepeater.ItemTemplate as DataTemplate; + Image img = VisualTreeHelper.GetChild(dt.LoadContent() as StackPanel, 0) as Image; + img.Source = new BitmapImage(new Uri("ms-appx:/Assets/ingredient1.png")); + img.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); + var numberOfPages = (int)Math.Ceiling(ButtonListScrollViewer.ExtentHeight / ButtonListScrollViewer.ViewportHeight); + ButtonListRepeater.Height = ButtonListScrollViewer.ViewportHeight * numberOfPages + MinRowSpacing * (numberOfPages - 1); ; + } + + private void PersonInfoListPager_SelectedIndexChanged(PipsPager sender, PipsPagerSelectedIndexChangedEventArgs args) + { + if (PersonInfoListScrollViewer != null) + { + PersonInfoListScrollViewer.ChangeView(null, args.NewPageIndex * PersonInfoListScrollViewer.ViewportHeight, null); + } + } + + private void PersonInfoList_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) + { + if (!e.IsIntermediate) + { + OnViewChanged(PersonInfoListScrollViewer, PersonInfoListPager, ref PersonInfoListPreviousOffset); + } + } + + private void ButtonListScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) + { + if (!e.IsIntermediate) + { + OnViewChanged(ButtonListScrollViewer, ButtonListPager, ref ButtonListPreviousOffset, MinRowSpacing); + } + } + + private void ButtonListPager_SelectedIndexChanged(PipsPager sender, PipsPagerSelectedIndexChangedEventArgs args) + { + ButtonListScrollViewer.ChangeView(null, args.NewPageIndex * (ButtonListScrollViewer.ViewportHeight + MinRowSpacing), null); + } + + private ObservableCollection CreatePersonInfoList() + { + ObservableCollection items = new ObservableCollection(); + for (int i = 0; i < 15; i++) + { + items.Add(new PersonInfo($"RandomName{i}", $"RandomSurname{i}")); + } + return items; + } + + private string[] CreateButtonListItems() + { + var rnd = new Random(); + var items = new string[TotalNumberOfDisplayedObjects]; + for (int i = 0; i < TotalNumberOfDisplayedObjects; i++) + { + items[i] = $"Assets/ingredient{rnd.Next(1, 100) % 4 + 1}.png"; + } + return items; + } + + private ScrollViewer FindInnerScrollViewer(ListView lv) + { + Panel p = lv.ItemsPanelRoot; + UIElement parent = VisualTreeHelper.GetParent(p) as UIElement; + while (parent != null && !(parent is ScrollViewer)) + parent = VisualTreeHelper.GetParent(parent) as UIElement; + + return parent as ScrollViewer; + } + + private void OnViewChanged(ScrollViewer sv, PipsPager pager, ref double previousVerticalOffset, double rowSpacing = 0.0) + { + var newVerticalOffset = sv.VerticalOffset; + + if (newVerticalOffset <= previousVerticalOffset) + { + pager.SelectedPageIndex = (int)Math.Floor(sv.VerticalOffset / (sv.ViewportHeight + rowSpacing)); + } + else + { + pager.SelectedPageIndex = (int)Math.Ceiling(sv.VerticalOffset / (sv.ViewportHeight + rowSpacing)); + } + + previousVerticalOffset = newVerticalOffset; + } + } + + public class PersonInfo + { + public PersonInfo(string name, string surname) + { + FullName = $"{name} {surname}"; + Initials = $"{Char.ToUpper(name.ElementAtOrDefault(0))}{Char.ToUpper(surname.ElementAtOrDefault(0))}"; + } + + public string FullName { get; set; } + public string Initials { get; set; } + } +} \ No newline at end of file diff --git a/dev/PipsPager/TestUI/PipsPagerPage.xaml b/dev/PipsPager/TestUI/PipsPagerPage.xaml index 0cddd77e68..9656f96ae1 100755 --- a/dev/PipsPager/TestUI/PipsPagerPage.xaml +++ b/dev/PipsPager/TestUI/PipsPagerPage.xaml @@ -9,49 +9,26 @@ xmlns:local="using:MUXControlsTestApp" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" mc:Ignorable="d"> - + - - - - - - - - - - - - - - - + Margin="0,0,100,0"/> - + Visible VisibleOnHover @@ -80,7 +57,7 @@ Horizontal - + @@ -104,5 +81,10 @@ +