Attempts to address feedback from Chigusa (#1487)

* attempts to address feedback

* review feedback incorporated

Author: Karl-Bridge-Microsoft

windows-apps-src/design/controls-and-patterns/flipview.md

@@ -151,10 +151,6 @@ In this example, the ItemTemplate of a FlipView is defined inline. An overlay is
 </FlipView>
 ```
 
-Here's what the layout defined by the data template looks like.
-
-Flip view data template.
-
 ### Set the orientation of the flip view
 
 By default, the flip view flips horizontally. To make the it flip vertically, use a stack panel with a vertical orientation as the flip view's [**ItemsPanel**](/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel).
@@ -194,25 +190,43 @@ Here's what the flip view looks like with a vertical orientation.
 
 ## Adding a context indicator
 
-A context indicator in a flip view provides a useful point of reference. The dots in a standard context indicator aren't interactive. As seen in this example, the best placement is usually centered and below the gallery:
+Use a context indicator (such as a [PipsPager](pipspager.md) or film strip) with a flip view to help provide users with a point of reference within the content.
+
+The following image shows a PipsPager used with a small photo gallery (we recommend centering the PipsPager below the gallery).
+
+:::image type="content" source="images/pipspager-flipview-example.png" alt-text="A PipsPager with five horizontal dots underneath a FlipView photo album. The third dot is selected, which indicates the third page of content.":::
 
-![Example of a page indicator](images/controls_pageindicator.png)
+This code snippet shows how to bind a PipsPager with a [FlipView](/windows/winui/api/microsoft.ui.xaml.controls.flipview).
+
+```xaml
+<StackPanel>
+  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
+      <FlipView.ItemTemplate>
+          <DataTemplate x:DataType="x:String">
+              <Image Source="{x:Bind Mode=OneWay}"/>
+          </DataTemplate>
+      </FlipView.ItemTemplate>
+  </FlipView>
+
+  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
+  <muxc:PipsPager x:Name="FlipViewPipsPager"
+      HorizontalAlignment="Center"
+      Margin="0, 10, 0, 0"
+      NumberOfPages="{x:Bind Pictures.Count}"
+      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
+</StackPanel>
+```
 
-For larger collections (10-25 items), consider using an indicator that provides more context, such as a film strip of thumbnails. Unlike a context indicator that uses simple dots, each thumbnail in the film strip shows a small version of the corresponding image and should be selectable:
+For larger collections (10 or more items), we highly recommend using a contextual indicator such as a film strip of thumbnails. Unlike a PipsPager that uses simple dots or glyphs, each thumbnail in the film strip shows a smaller, selectable version of the corresponding image.
 
-![Example of context indicator](images/controls_contextindicator.jpg)
+:::image type="content" source="images/controls_contextindicator.jpg" alt-text="A film strip of thumbnails underneath a FlipView photo album.":::
 
-For example code that shows how to add a context indicator to a FlipView, see [XAML FlipView sample](https://github.com/microsoftarchive/msdn-code-gallery-microsoft/tree/411c271e537727d737a53fa2cbe99eaecac00cc0/Official%20Windows%20Platform%20Sample/Windows%208%20app%20samples/%5BC%23%5D-Windows%208%20app%20samples/C%23/Windows%208%20app%20samples/XAML%20FlipView%20control%20sample%20(Windows%208)).
+For a full example showing how to add a context indicator to a FlipView, see [XAML FlipView sample](https://github.com/microsoftarchive/msdn-code-gallery-microsoft/tree/411c271e537727d737a53fa2cbe99eaecac00cc0/Official%20Windows%20Platform%20Sample/Windows%208%20app%20samples/%5BC%23%5D-Windows%208%20app%20samples/C%23/Windows%208%20app%20samples/XAML%20FlipView%20control%20sample%20(Windows%208)).
 
 ## Do's and don'ts
 
--   Flip views work best for collections of up to 25 or so items.
--   Avoid using a flip view control for larger collections, as the repetitive motion of flipping through each item can be tedious. An exception would be for photo albums, which often have hundreds or thousands of images. Photo albums almost always switch to a flip view once a photo has been selected in the grid view layout. For other large collections, consider a [List view or grid view](lists.md).
--   For context indicators:
-    -   The order of dots (or whichever visual marker you choose) works best when centered and below a horizontally-panning gallery.
-    -   If you want a context indicator in a vertically-panning gallery, it works best centered and to the right of the images.
-    -   The highlighted dot indicates the current item. Usually the highlighted dot is white and the other dots are gray.
-    -   The number of dots can vary, but don't have so many that the user might struggle to find his or her place - 10 dots is usually the maximum number to show.
+- Flip views work best for collections of up to 25 or so items.
+- Avoid using a flip view control for larger collections, as the repetitive motion of flipping through each item can be tedious. An exception would be for photo albums, which often have hundreds or thousands of images. Photo albums almost always switch to a flip view once a photo has been selected in the grid view layout. For other large collections, consider a [List view or grid view](lists.md).
 
 ## Globalization and localization checklist
 
@@ -230,4 +244,5 @@ For example code that shows how to add a context indicator to a FlipView, see [X
 ## Related articles
 
 - [Guidelines for lists](lists.md)
+- [PipsPager](pipspager.md)
 - [**FlipView class**](/uwp/api/Windows.UI.Xaml.Controls.FlipView)

windows-apps-src/design/controls-and-patterns/pipspager.md

@@ -14,7 +14,7 @@ ms.localizationpriority: medium
 
 # PipsPager
 
-The PipsPager control enables navigation within paginated content beyond the bounds of the viewport (visible area). The PipsPager is independent of the content shown and is intended for experiences where content is paginated but is not explicitly numbered. For example, pages indicated with 'dot' glyphs instead of numbers to encourage discovery of content and reduce unnecessary UI elements on the page.
+The PipsPager control helps users navigate within linearly paginated content using a configurable collection of glyphs, each of which represents a single "page" within a limitless range. The glyphs highlight the current page, and indicate the availability of both preceding and succeeding pages. The control relies on current context and does not support explicit page numbering or a non-linear organization.
 
 **Get the Windows UI Library**
 
@@ -39,7 +39,7 @@ The PipsPager control enables navigation within paginated content beyond the bou
 
 ## Is this the right control?
 
-Use a PipsPager for content that is not explicitly numbered in a layout, or a glyph-based representation of numbered pages is desired.
+Use a PipsPager for content organized in a linear structure, is not explicitly numbered, or where a glyph-based representation of numbered pages is desired.
 
 This UI is commonly used in apps such as photo viewers and app lists, where display space is limited and the number of potential pages is infinite.
 
@@ -125,15 +125,15 @@ By default, a maximum of five pips are visible.
 
 ### Integrate PipsPager with a Collection control
 
+:::image type="content" source="images/pipspager-flipview-example.png" alt-text="A PipsPager with five horizontal dots underneath a FlipView photo album. The third dot is selected, which indicates the third page of content.":::
+
 A PipsPager is often used in conjunction with collection controls.
 
 The following example shows how to bind a PipsPager with a [FlipView](/windows/winui/api/microsoft.ui.xaml.controls.flipview) and provide another way to navigate through content and indicate the current page.
 
 > [!NOTE]
 > To use the PipsPager as a page indicator **only** and disable user interactions, set the control's [IsEnabled](/windows/winui/api/microsoft.ui.xaml.controls.control.isenabled) property to false in the control.
 
-:::image type="content" source="images/pipspager-flipview-example.png" alt-text="A PipsPager with five horizontal dots underneath a FlipView photo album. The third dot is selected, which indicates the third page of content.":::
-
 ```xaml
 <StackPanel>
   <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">