User/savoyschuler/pagercontrol #88

MarissaMatt · 2020-06-30T22:04:22Z

Initial PR for adding PagerControl spec to master.

edited API Surface example.

to be near top as it will be a required property.

Updated with changes discussed in pager control sync.

updated with new changes for commands and change to display mode ENUM

Added more accessibility information and added D&I section.

fixed headers

Added keyboarding, narrator, and D&I section.

added selected index property

marcelwgn

While generally, the numbers are shown at the bottom of the control, should we also allow to render them at the the top? Or does the PagerControl not actually render but rather provides the small "bar" at the bottom of the screenshots?

active/PagerControl/PagerControl.md

Co-authored-by: MikeHillberg <[email protected]>

…icrosoft/microsoft-ui-xaml-specs into user/savoyschuler/pagercontrol

active/PagerControl/PagerControl.md

Co-authored-by: MikeHillberg <[email protected]>

active/PagerControl/PagerControl.md

MikeHillberg · 2020-09-12T05:37:53Z

active/PagerControl/PagerControl.md

+
+        private async void OnPageLoaded(object sender, RoutedEventArgs e)
+        {
+                imageList = await GetImageList();


Per an earlier comment, I think the primary scenario for this control is data virtualization. Towards that end, to make this sample more realistic, it shouldn't show the images all being pre-fetched; it should show a call to fetch images when the page changes. And then to continue the realism, it needs to show an indeterminate progress bar during the async call to fetch the images from a server?

@MikeHillberg in the Pager_PageChanged method we do call GetPageImages to update the images being shown when the page number changes. OnPageLoaded is only called on the initial load. Am I understanding your comment correctly? Are you saying that the imageList = await GetImageList(); should not be included and the images should be retrieved adhoc?

Agree. We could just set the source to a set of images fetched from somewhere based on the page number. That could be a web call for example.

@MarissaMatt - Right, in PageChanged its extracting some images. But in PageLoaded it's getting all of the images ready, probably downloading them all from a server. Pre-downloading all the images like that defeat the purpose of the pager, you might as well put them in a ScrollViewer.

I updated the sample in the previous comment to do an async call with just the images fetched for each page. We should add this full sample to XamlControlsGallery and link it in the docs.

active/PagerControl/PagerControl.md

marcelwgn · 2020-09-16T20:05:19Z

active/PagerControl/PagerControl.md

+
+# API Details
+
+```c++ 


This looks more like IDL than C++.

@MikeHillberg I was following the template for this section. Is there something I should update this to?

This is technically only for GitHub (and other MarkDown render engines) to know what syntax highlighting to use, but it also helps when reading the raw md file to know what language this is written in. If the API details are in (M)IDL format, this should be IDL. I'm a bit surprised that C++ is in the template, usually APIs are done in IDL as we can simply copy paste that into the actual WinUI source code.

It's following the template, except that it needs to be IDL. Changing this to Int32 might be the only issue

marcelwgn · 2020-09-16T20:05:31Z

active/PagerControl/PagerControl.md

+    Integer NewPageIndex{get; };
+    Integer PreviousPageIndex{get; };


If this is IDL, this would be Int32.

active/PagerControl/PagerControl.md

Co-authored-by: Marcel Wagner <[email protected]>

…icrosoft/microsoft-ui-xaml-specs into user/savoyschuler/pagercontrol

marcelwgn · 2020-09-18T18:39:14Z

active/PagerControl/PagerControl.md

+    ButtonPanel,
+};
+
+enum PagerButtonVisibility


If the control is named PagerControl, would it be better to name this PagerControlButtonVisibility?

active/PagerControl/PagerControl.md

marcelwgn · 2020-09-20T08:52:02Z

active/PagerControl/PagerControl.md

+
+}
+
+runtimeclass PagerControl


Not sure how that snuck in, but now we have two lines defining the PagerControl class.

marcelwgn · 2020-09-20T17:42:02Z

active/PagerControl/PagerControl.md

+| Name | Description| Default | 
+|:---:|:---|:---|
+| PagerDisplayMode | Enum that contains 4 values (Auto, ComboBox, NumberBox, ButtonPanel) to represent the look of the pager control. When Auto is selected, the display mode will be ComboBox if the NumberOfPages property is less than 11 otherwise it will be NumberBox. | Auto |
+| PagerButtonVisibilityBehavior | Enum that contains 4 values (Visible, HiddenOnEdge, Hidden) that allows the app developer to hide or show the four edge buttons. HiddenOnEdge will remove the appropriate buttons if the selected page is the last or first page. When the last page is selected, the next and last buttons will be disabled and same when the first page is selected for the first and previous page. When Auto is selected, the visibility mode will be AlwaysVisible. | Visible |


There are only 3 values now, we removed Auto.

marcelwgn · 2020-09-21T09:23:37Z

active/PagerControl/PagerControl.md

+| First, Previous, Next, and Last ButtonCommand | Specially handle the button pressed event for when the end user selects the buttons. | N/A |
+| First, Previous, Next, and Last Style | Give the developer the option to customize the style by changing the text or glyph for the edge buttons.| N/A |
+| ButtonPanelAlwaysShowFirstAndLastPage | Note: This property only applies to the button panel display mode.Boolean to display the ellipses and the first and last index of the numerical button panel display mode. | True |
+| SelectedIndex | The 0 based index that is currently selected. It will default to the first index. | 0 |


The IDL code says that this is SelectedPageIndex, is that correct, and this entry wasn't updated? Or should we stick with SelectedIndex?

Also, just to clarify, when using this control in ComboBox, when the user clicks on entry "2", the PagerControl will report it's SelectedPageIndex as 1 right?

Yes that is correct! I also updated the name so it will say SelectedPageIndex.

marcelwgn · 2020-09-22T18:21:50Z

Would it make sense to expose a property to modify when the NumberPanel starts working with ellipsis? In some cases, developers might have place for 20 numbers and in other cases, developers might only want to have 4 buttons and most and otherwise use ellipsis. Currently, we would need to hardcode that magic number without letting users modify that.

marcelwgn · 2020-09-23T12:13:40Z

Also, currently the indicator color is hardcoded into the template. Would it be better to use the users accent color or expose a theme resource for that?

Felix-Dev · 2020-09-23T12:37:30Z

Also, currently the indicator color is hardcoded into the template. Would it be better to use the users accent color or expose a theme resource for that?

Just like with the NavigationView's selection indicator, a theme resource should be introduced and the default color value should be the user accent color. The theme resource could be named PagerControlSelectionIndicatorForeground to be similar to the NavigationView's selection indicator resource which is named NavigationViewSelectionIndicatorForeground.

jdrage · 2020-09-24T22:00:00Z

active/PagerControl/PagerControl.md

+# API Notes
+| Name | Description| Default | 
+|:---:|:---|:---|
+| PagerControlDisplayMode | Enum that contains 4 values (Auto, ComboBox, NumberBox, ButtonPanel) to represent the look of the pager control. When Auto is selected, the display mode will be ComboBox if the NumberOfPages property is less than 11 otherwise it will be NumberBox. | Auto |


ButtonPanel --> NumericalButtonPanel to match above.

Would love to add BreadbrumbButtonPanel here in the future for the "row of dots" style.

marcelwgn · 2021-04-19T21:00:34Z

@MarissaMatt @SavoySchuler @MikeHillberg What is the status of this PR? Is this ready for "review review"?

SavoySchuler · 2021-04-20T06:41:47Z

@gabbybilka are you the current owner of this while @MarissaMatt is on leave? Asking per @chingucoding's question.

SavoySchuler and others added 19 commits April 22, 2019 11:43

Create PagerControl.md

9526410

Added template and carried API notes over from proposal.

06eb0d1

Creating images folder with placeholder file.

7a2c5ef

[PM] Adding example pager control images.

f374490

[PM] Added basic examples, description, and...

8a700a6

edited API Surface example.

Deleting placeholder file used to add images folder.

bcbd98a

[DEV] [PM] Added API Details.

37cfe57

[PM] Updated Example APIs.

c59b0d5

[DEV] Removed API Surface example, rearranged NumberOfPages...

e7cac61

to be near top as it will be a required property.

[DEV] [PM] Added command APIs to IDL and Examples.

eb8d93b

[PM] Corrected Example uses of suffix to add hard coded page number.

6ca1d2a

[PM] Updated Description section definition for the control

7bea33c

Update PagerControl.md

daacb33

Updated with changes discussed in pager control sync.

Update PagerControl.md

2bd81a6

updated with new changes for commands and change to display mode ENUM

Update PagerControl.md

7d1b6ba

Added more accessibility information and added D&I section.

Update PagerControl.md

f3382f4

fixed headers

Update PagerControl.md

3193a6c

Added keyboarding, narrator, and D&I section.

Update PagerControl.md

ab66a9d

Added selected index property

60cb6a1

added selected index property

marcelwgn reviewed Jun 30, 2020

View reviewed changes

MarissaMatt requested a review from SavoySchuler June 30, 2020 22:38

MikeHillberg reviewed Jul 1, 2020

View reviewed changes

MarissaMatt and others added 5 commits July 2, 2020 11:36

Update active/PagerControl/PagerControl.md

9a2fa2a

Co-authored-by: MikeHillberg <[email protected]>

Update active/PagerControl/PagerControl.md

737f5a1

Co-authored-by: MikeHillberg <[email protected]>

Accessibility and API description updates

e198965

Merge branch 'user/savoyschuler/pagercontrol' of https://github.com/m…

131e96e

…icrosoft/microsoft-ui-xaml-specs into user/savoyschuler/pagercontrol

Updated formatting

4c1b015

MikeHillberg reviewed Jul 7, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

Update active/PagerControl/PagerControl.md

9b7df8d

Co-authored-by: MikeHillberg <[email protected]>

MarissaMatt added 2 commits September 11, 2020 15:51

Updated code sample to a simpler example.

2434231

Removed open questions.

12af7ee

MikeHillberg reviewed Sep 12, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

MikeHillberg reviewed Sep 12, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

MikeHillberg reviewed Sep 12, 2020

View reviewed changes

MarissaMatt added 3 commits September 16, 2020 09:54

Updated formatting and sample.

eafc9a8

Added remaining comps and updated API names.

057b93d

Fixed formatting.

cf22121

marcelwgn reviewed Sep 16, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

marcelwgn reviewed Sep 16, 2020

View reviewed changes

active/PagerControl/PagerControl.md Show resolved Hide resolved

marcelwgn reviewed Sep 16, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

MarissaMatt and others added 3 commits September 16, 2020 13:22

Update active/PagerControl/PagerControl.md

79ecc16

Co-authored-by: Marcel Wagner <[email protected]>

Added template settings and updated API.

99848d2

Merge branch 'user/savoyschuler/pagercontrol' of https://github.com/m…

ba0cea8

…icrosoft/microsoft-ui-xaml-specs into user/savoyschuler/pagercontrol

marcelwgn reviewed Sep 18, 2020

View reviewed changes

active/PagerControl/PagerControl.md Outdated Show resolved Hide resolved

marcelwgn reviewed Sep 20, 2020

View reviewed changes

marcelwgn reviewed Sep 21, 2020

View reviewed changes

Updated API names to match everywhere in document.

124615c

jdrage reviewed Sep 24, 2020

View reviewed changes

updated spec to match implementation

6615ca5

gabbybilka mentioned this pull request Nov 12, 2020

Proposal: PipsPager - UI to support glyph-based pagination microsoft/microsoft-ui-xaml#3464

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

User/savoyschuler/pagercontrol #88

User/savoyschuler/pagercontrol #88

MarissaMatt commented Jun 30, 2020

marcelwgn left a comment

MikeHillberg Sep 12, 2020

MarissaMatt Sep 14, 2020

ranjeshj Sep 15, 2020

MikeHillberg Sep 16, 2020

ranjeshj Sep 16, 2020 •

edited

Loading

marcelwgn Sep 16, 2020

MarissaMatt Sep 16, 2020

marcelwgn Sep 16, 2020

MikeHillberg Sep 20, 2020

marcelwgn Sep 16, 2020

marcelwgn Sep 18, 2020

marcelwgn Sep 20, 2020

MarissaMatt Sep 21, 2020

marcelwgn Sep 20, 2020

MarissaMatt Sep 21, 2020

marcelwgn Sep 21, 2020

MarissaMatt Sep 21, 2020

marcelwgn commented Sep 22, 2020

marcelwgn commented Sep 23, 2020

Felix-Dev commented Sep 23, 2020 •

edited

Loading

jdrage Sep 24, 2020

marcelwgn commented Apr 19, 2021

SavoySchuler commented Apr 20, 2021

		Integer NewPageIndex{get; };
		Integer PreviousPageIndex{get; };


		}

		runtimeclass PagerControl

User/savoyschuler/pagercontrol #88

Are you sure you want to change the base?

User/savoyschuler/pagercontrol #88

Conversation

MarissaMatt commented Jun 30, 2020

marcelwgn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ranjeshj Sep 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcelwgn commented Sep 22, 2020

marcelwgn commented Sep 23, 2020

Felix-Dev commented Sep 23, 2020 • edited Loading

Choose a reason for hiding this comment

marcelwgn commented Apr 19, 2021

SavoySchuler commented Apr 20, 2021

ranjeshj Sep 16, 2020 •

edited

Loading

Felix-Dev commented Sep 23, 2020 •

edited

Loading