{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/60","repository_url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml","labels_url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/60/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/60/comments","events_url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/60/events","html_url":"https://github.com/Microsoft/microsoft-ui-xaml/issues/60","id":389480542,"node_id":"MDU6SXNzdWUzODk0ODA1NDI=","number":60,"title":"Feature Proposal: PagerControl ","user":{"login":"SavoySchuler","id":16964652,"node_id":"MDQ6VXNlcjE2OTY0NjUy","avatar_url":"https://avatars3.githubusercontent.com/u/16964652?v=4","gravatar_id":"","url":"https://api.github.com/users/SavoySchuler","html_url":"https://github.com/SavoySchuler","followers_url":"https://api.github.com/users/SavoySchuler/followers","following_url":"https://api.github.com/users/SavoySchuler/following{/other_user}","gists_url":"https://api.github.com/users/SavoySchuler/gists{/gist_id}","starred_url":"https://api.github.com/users/SavoySchuler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SavoySchuler/subscriptions","organizations_url":"https://api.github.com/users/SavoySchuler/orgs","repos_url":"https://api.github.com/users/SavoySchuler/repos","events_url":"https://api.github.com/users/SavoySchuler/events{/privacy}","received_events_url":"https://api.github.com/users/SavoySchuler/received_events","type":"User","site_admin":false},"labels":[{"id":1005998263,"node_id":"MDU6TGFiZWwxMDA1OTk4MjYz","url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/labels/feature%20request","name":"feature request","color":"a2eeef","default":false}],"state":"open","locked":false,"assignee":{"login":"SavoySchuler","id":16964652,"node_id":"MDQ6VXNlcjE2OTY0NjUy","avatar_url":"https://avatars3.githubusercontent.com/u/16964652?v=4","gravatar_id":"","url":"https://api.github.com/users/SavoySchuler","html_url":"https://github.com/SavoySchuler","followers_url":"https://api.github.com/users/SavoySchuler/followers","following_url":"https://api.github.com/users/SavoySchuler/following{/other_user}","gists_url":"https://api.github.com/users/SavoySchuler/gists{/gist_id}","starred_url":"https://api.github.com/users/SavoySchuler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SavoySchuler/subscriptions","organizations_url":"https://api.github.com/users/SavoySchuler/orgs","repos_url":"https://api.github.com/users/SavoySchuler/repos","events_url":"https://api.github.com/users/SavoySchuler/events{/privacy}","received_events_url":"https://api.github.com/users/SavoySchuler/received_events","type":"User","site_admin":false},"assignees":[{"login":"SavoySchuler","id":16964652,"node_id":"MDQ6VXNlcjE2OTY0NjUy","avatar_url":"https://avatars3.githubusercontent.com/u/16964652?v=4","gravatar_id":"","url":"https://api.github.com/users/SavoySchuler","html_url":"https://github.com/SavoySchuler","followers_url":"https://api.github.com/users/SavoySchuler/followers","following_url":"https://api.github.com/users/SavoySchuler/following{/other_user}","gists_url":"https://api.github.com/users/SavoySchuler/gists{/gist_id}","starred_url":"https://api.github.com/users/SavoySchuler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SavoySchuler/subscriptions","organizations_url":"https://api.github.com/users/SavoySchuler/orgs","repos_url":"https://api.github.com/users/SavoySchuler/repos","events_url":"https://api.github.com/users/SavoySchuler/events{/privacy}","received_events_url":"https://api.github.com/users/SavoySchuler/received_events","type":"User","site_admin":false}],"milestone":null,"comments":5,"created_at":"2018-12-10T20:49:45Z","updated_at":"2018-12-12T04:53:33Z","closed_at":null,"author_association":"MEMBER","body":"<!-- This is a template for new feature or API proposals.\r\nFor example you can use this to propose a new API on an existing type, or an idea for a new UI control.\r\nIt's fine if you don't have all the details: you can start with the Summary and Rationale.\r\n\r\nThis link describes the WinUI feature/API proposal process:\r\nhttps://github.com/Microsoft/microsoft-ui-xaml-specs/blob/master/docs/feature_proposal_process.md\r\n-->\r\n\r\n<!-- Add a title for your feature or API proposal. Please be short and descriptive -->\r\n# Proposal: New UI Pagination Control\r\n\r\n## Summary\r\n<!-- Please include a couple sentences summarizing your feature or API proposal -->\r\n\r\nThis UI pager control provides a user interface for navigating pages of a GridView, ListView, DataGrid and FlipView. \r\n\r\n## Rationale\r\n<!-- Please describe WHY the feature should be added to WinUI for all developers and users.\r\nIf applicable you can also describe how it aligns to the current WinUI roadmap and priorities:\r\nhttps://github.com/Microsoft/microsoft-ui-xaml-specs/blob/master/docs/roadmap.md\r\n-->\r\n\r\nThe absence of a standard UI pager control, last seen as DataPager in Silverlight, has been a pain point in both WPF and UWP that has forced a variety of unfavorable workarounds for developers. Inclusion of this control in UWP would resolve an ecosystem gap and enable developers to efficiently deliver UI paging experiences in their applications. Through XAML Islands, it may also provide an opportunity to benefit WPF developers working with DataGrid or ListView. The scope of this proposal is not provide a data paging solution at this time but to start with UI paging as a foundation on top of which data paging may be integrated.   \r\n\r\n<!----------------------\r\nThe below sections are optional when submitting an idea or proposal.\r\nAll sections are required before we'll accept a PR to master, but aren't necessary to start the discussion.\r\n------------------------>\r\n\r\n## Functional Requirements\r\n<!-- Please include a prioritized list of what the feature should and shouldn't do -->\r\n\r\n| # | Feature | Priority |\r\n|:-:|:--|:-:|\r\n| 1 | Can be used to page GridView, ListView, [DataGrid](https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid) and FlipView.  | Must |\r\n| 2 | Base indexing component display mode can be a button panel or an editable ComboBox.  | Must |\r\n| 3 | Custom text can be added before and after the indexing component. | Must |\r\n| 4 | Able to add text and/or glyph navigation buttons for indexing to the first, last, next, and previous page.  | Must |\r\n| 5 | Able to toggle the state and visibility of navigation buttons when at the end of the indexable range. | Must |\r\n| 6 | Ellipsis can be added to the numerical button panel indexing component to show an omitted range of indices.  | Must |\r\n| 7 | Designed so that a data paging component may be added. | Must |\r\n| 8 | Numerals in the button panel display mode can be replaced by glyphs. | Should |\r\n| 9 | Can be used to page DataGrid and ListView in WPF through XAML Islands. | Should |\r\n\r\n## Usage Examples\r\n<!-- Please include one or more examples showing how you would use the feature.\r\nYou can include code examples or screenshots if that helps -->\r\n\r\n### 1. Using a button panel as the display mode.\r\n\r\n![image](https://user-images.githubusercontent.com/16964652/49760313-0fbbac00-fc79-11e8-902a-96a0dd9adab4.png)\r\n\r\n```XAML\r\n<UserControl x:Class=\"DataPagerSample.MainPage\">\r\n    <Grid x:Name=\"LayoutRoot\" Width=\"Auto\">\r\n        <StackPanel>\r\n            <GridView x:Name=\"gridView1\" ... />\r\n\t    <muxc:UIPager x:Name=\"uiPager1\"\r\n                Source=\"{Binding}\"\r\n\t\tLastButton=\"AlwaysVisible\"\r\n                FirstButton=\"AlwaysVisible\"\r\n                NumberOfIndicesShowing=\"7\"\r\n\t\tEllipsisMaxBefore=\"5\"\r\n\t\tEllipsisMaxAfter=\"1\"\r\n                EllipsisShowBounds=\"True\" />\r\n        </StackPanel>\r\n    </Grid>\r\n</UserControl>\r\n```\r\n \r\n### 2. Using an editable ComboBox as the display mode.\r\n\r\n![image](https://user-images.githubusercontent.com/16964652/49761042-cec49700-fc7a-11e8-8550-08a8ea19c627.png)\r\n\r\n```XAML\r\n<UserControl x:Class=\"DataPagerSample.MainPage\">\r\n    <Grid x:Name=\"LayoutRoot\" Width=\"Auto\">\r\n        <StackPanel>\r\n            <GridView x:Name=\"gridView1\" ... />\r\n\t    <muxc:UIPager x:Name=\"uiPager1\"\r\n\t\tSource=\"{Binding}\"\r\n\t\tDisplayMode=\"EditableComboBox\"\r\n\t\tNextButtonText=\"Prev\"\r\n\t\tPreviousButtonText=\"Next\"\r\n\t        PrefixText=\"Page\"  \r\n\t\tTotalNumberOfPages=\"10\" />\r\n       </StackPanel>\r\n    </Grid>\r\n</UserControl>\r\n```\r\n\r\n## Detailed Feature Design\r\n<!-- Please include any important design details.\r\n\r\nThis could include one or more of:\r\n- an API proposal (any supported language or pseudocode is fine)\r\n- design mockups for a new user experience\r\n- details on accessibility compliance for new UI\r\n- other implementation notes\r\n-->\r\n\r\n**Visual Components**\r\n\r\n | Component |  Notes |\r\n|:---:|:---|\r\n| DisplayMode | * Used to set either a button panel (default) or an editable ComboBox as the indexing component. <br> * When set to be a button panel, the number of visible indices can be specified. <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760354-23671280-fc79-11e8-804b-71b5b84a80f5.png) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ![image](https://user-images.githubusercontent.com/16964652/49760373-2eba3e00-fc79-11e8-8304-12d7b6ee2c89.png) |\r\n| LastButton | * Button displaying text and/or glyph indicating that the user may navigate to the last index. <br> * Automatically disabled when at last index. <br> * Can be set to not be visible when at the last index.  <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760392-3a0d6980-fc79-11e8-8d96-a811cee1c759.png) |\r\n| FirstButton | * Button displaying text and/or glyph indicating that the user may navigate to the first index. <br> * Automatically disabled when at first index. <br> * Can be set to not be visible when at the first index.  <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760409-485b8580-fc79-11e8-9545-a580f6016f6c.png) |\r\n| NextButton | * Button displaying text and/or glyph indicating that the user may navigate to the next index. <br> * Automatically disabled when at last index. <br> * Can be set to not be visible when at the last index. <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760426-54474780-fc79-11e8-9446-ee2886941a24.png) |\r\n| PreviousButton | * Button displaying text and/or glyph indicating that the user may navigate to the previous index. <br> * Automatically disabled when at first index. <br> * Can be set to not be visible when at the first index.  <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760443-62956380-fc79-11e8-8f93-562a92fde666.png) |\r\n| Ellipsis | * Button, often reading \"...\", used between indexes and before or after the first/last index to indicate an accessible but omitted range of indexes. <br> * MaxBefore and MaxAfter properties can be used to set  how many indices appear between the current page and the ellipsis before/after it. <br> * Visibility of the first/last index can be disabled. <br> * Only visible when using button panel as the display mode.  <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760513-85277c80-fc79-11e8-926e-3453ea29b0a3.png) |\r\n| PrefixText | * Text displayed before the editable ComboBox indexing component. <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760540-93759880-fc79-11e8-9c4f-3c3222b95a13.png) |\r\n| NumberOfPages | * When a total number of indices (N) is given, this suffix string will appear after the editable ComboBox indexing component and read \"of N\". Localization will put \"N\" where it should be in a given language. <br><br> ![image](https://user-images.githubusercontent.com/16964652/49760557-9a9ca680-fc79-11e8-943f-3425d993fdeb.png) |\r\n\r\n**Accessibility**\r\n\r\n| State | Action | Narrator |\r\n|:---|:---|:---|\r\n| UI pager is first focused on by tabbing | Focus defaults to the next page button if available (current page otherwise) after announcing accessible name of UI pager. | “Page selector. Next page is N.\" |\r\n| UI pager is tabbed through | Tab Button: <br> Will go through all actionable items in order without regard to groups. <br> <br> Arrow keys: <br> Will be able to explore groups in the specified directions. Pressing the down arrow key at the bottom of the ComboBox will wrap the user to the top. Pressing the up arrow key at the top of the ComboBox will wrap the user to the bottom. <br> <br> Escape: <br> Will escape UI pager. <br> <br> Enter and Spacebar: <br> Will select the component focused on. <br> <br> Home: <br> Will move focus to \"go back\" elements. In the ComboBox, it will jump the user to the first index. <br> <br> End: <br> Will move focus to \"go forward\" elements. In the ComboBox, it will jump the user to the last index. | Narrator will announce an accessible name of the visual component. Ex:<br><br> “first page button” <br><br> “previous page button” <br><br> “1st page” <br><br> “current page” <br><br> \"page selection drop down menu: current page is 1” | \r\n\r\n### API Surface Example\r\n\r\n```XAML\r\n<PagerControl\r\n    DisplayMode = { Auto | ButtonPanel | EditableComboBox }\r\n    DisplayModeStyle  { string }\r\n    NumberOfIndicesShowing = { int }\r\n    LastButton = { Auto | AlwaysVisible | HiddenOnLast | None } \r\n    LastButtonGlyph = { string }\r\n    LastButtonText = { string }\r\n    LastButtonStyle = { string }\r\n    FirstButton = { Auto | AlwaysVisible | HiddenOnFirst | None }\r\n    FirstButtonGlyph = { string }\r\n    FirstButtonText = { string }\r\n    FirstButtonStyle = { string }\r\n    NextButton = { Auto | AlwaysVisible | HiddenOnLast | None } \r\n    NextButtonGlyph = { string }\r\n    NextButtonText = { string }\r\n    NextButtonStyle = { string }\r\n    PreviousButton = { Auto | AlwaysVisible | HiddenOnFirst | None }  \r\n    PreviousButtonGlyph = { string }\r\n    PreviousButtonText = { string }\r\n    PreviousButtonStyle = { string }\r\n    EllipsisEnabled = { True | False }\r\n    EllipsisMaxBefore = { int }\r\n    EllipsisMaxAfter = { int }\r\n    EllipsisShowBounds = { True | False }\r\n    PrefixText = { string }  \r\n    NumberOfPages = { int } >\r\n</PagerControl>\r\n```\r\n\r\n## Open Questions\r\n<!-- Please list any open issues that you think still need to be addressed.\r\nThese could include areas you think would benefit from community or WinUI team input -->\r\n* Should numerals in the button panel be replaceable with glyphs? Will some scenarios require the glyphs to not be clickable (buttons not needed and spacing may be narrowed)? Should a timer and wrap-around feature be added?\r\n![image](https://user-images.githubusercontent.com/16964652/49760882-67a6e280-fc7a-11e8-886b-bfd58f7b706f.png)\r\n"},"comment":{"url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/comments/446461810","html_url":"https://github.com/Microsoft/microsoft-ui-xaml/issues/60#issuecomment-446461810","issue_url":"https://api.github.com/repos/Microsoft/microsoft-ui-xaml/issues/60","id":446461810,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NjQ2MTgxMA==","user":{"login":"kmgallahan","id":5379488,"node_id":"MDQ6VXNlcjUzNzk0ODg=","avatar_url":"https://avatars3.githubusercontent.com/u/5379488?v=4","gravatar_id":"","url":"https://api.github.com/users/kmgallahan","html_url":"https://github.com/kmgallahan","followers_url":"https://api.github.com/users/kmgallahan/followers","following_url":"https://api.github.com/users/kmgallahan/following{/other_user}","gists_url":"https://api.github.com/users/kmgallahan/gists{/gist_id}","starred_url":"https://api.github.com/users/kmgallahan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kmgallahan/subscriptions","organizations_url":"https://api.github.com/users/kmgallahan/orgs","repos_url":"https://api.github.com/users/kmgallahan/repos","events_url":"https://api.github.com/users/kmgallahan/events{/privacy}","received_events_url":"https://api.github.com/users/kmgallahan/received_events","type":"User","site_admin":false},"created_at":"2018-12-12T04:53:33Z","updated_at":"2018-12-12T04:53:33Z","author_association":"NONE","body":"@SavoySchuler My initial thought was that a subclass would somewhat defeat the purpose of the `DisplayMode` property. However, looking over the properties & proposed features, it seems many of them would only be applicable to a particular display mode:\r\n"}}
{"actor":{"display_login":"kmgallahan"}}