PipsPager: apply different pip sizes for different orientations

dev/PipsPager/InteractionTests/PipsPagerElements.cs

@@ -19,6 +19,7 @@ public class PipsPagerElements
         private UIObject PipsPager;
         private UIObject NextPageButton;
         private UIObject PreviousPageButton;
+        private Button RetrievePipsPagerButtonSizesButton;
         private ComboBox PreviousPageButtonVisibilityComboBox;
         private ComboBox NextPageButtonVisibilityComboBox;
         private ComboBox NumberOfPagesComboBox;
@@ -33,7 +34,10 @@ public class PipsPagerElements
         private TextBlock CurrentNumberOfPagesTextBlock;
         private TextBlock CurrentMaxVisualIndicatorsTextBlock;
         private TextBlock CurrentOrientationTextBlock;
-
+        private TextBlock HorizontalOrientationPipsPagerButtonWidthTextBlock;
+        private TextBlock HorizontalOrientationPipsPagerButtonHeightTextBlock;
+        private TextBlock VerticalOrientationPipsPagerButtonWidthTextBlock;
+        private TextBlock VerticalOrientationPipsPagerButtonHeightTextBlock;
         public UIObject GetPipsPager()
         {
             return GetElement(ref PipsPager, "TestPipsPager");
@@ -113,6 +117,28 @@ public TextBlock GetCurrentOrientationTextBlock()
             return GetElement(ref CurrentOrientationTextBlock, "CurrentOrientationTextBlock");
         }
 
+        public TextBlock GetHorizontalOrientationPipsPagerButtonWidthTextBlock()
+        {
+            return GetElement(ref HorizontalOrientationPipsPagerButtonWidthTextBlock, "HorizontalOrientationPipsPagerButtonWidthTextBlock");
+        }
+        public TextBlock GetHorizontalOrientationPipsPagerButtonHeightTextBlock()
+        {
+            return GetElement(ref HorizontalOrientationPipsPagerButtonHeightTextBlock, "HorizontalOrientationPipsPagerButtonHeightTextBlock");
+        }
+        public TextBlock GetVerticalOrientationPipsPagerButtonWidthTextBlock()
+        {
+            return GetElement(ref VerticalOrientationPipsPagerButtonWidthTextBlock, "VerticalOrientationPipsPagerButtonWidthTextBlock");
+        }
+        public TextBlock GetVerticalOrientationPipsPagerButtonHeightTextBlock()
+        {
+            return GetElement(ref VerticalOrientationPipsPagerButtonHeightTextBlock, "VerticalOrientationPipsPagerButtonHeightTextBlock");
+        }
+
+        public Button GetPipsPagerButtonSizesButton()
+        {
+            return GetElement(ref RetrievePipsPagerButtonSizesButton, "GetPipsPagersButtonSizesButton");
+        }
+
         public UIObject GetPipWithPageNumber(string elementName)
         {
             foreach (var element in GetPipsPager().Children)

dev/PipsPager/InteractionTests/PipsPagerTests.cs

@@ -4,6 +4,7 @@
 using Windows.UI.Xaml.Tests.MUXControls.InteractionTests.Infra;
 using Windows.UI.Xaml.Tests.MUXControls.InteractionTests.Common;
 using Common;
+using Microsoft.Windows.Apps.Test.Foundation.Controls;
 #if USING_TAEF
 using WEX.TestExecution;
 using WEX.TestExecution.Markup;
@@ -315,5 +316,52 @@ public void KeyboardPageSelectTest()
                 VerifySelectedPageIndex(2);
             }
         }
+        [TestMethod]
+        [TestProperty("TestSuite", "F")]
+        public void PipSizeWithDifferentOrientationsTest()
+        {
+            using (var setup = new TestSetupHelper("PipsPager Tests"))
+            {
+                elements = new PipsPagerElements();
+                Button getButtonSizesButton = elements.GetPipsPagerButtonSizesButton();
+                getButtonSizesButton.InvokeAndWait();
+
+                TextBlock horizontalOrientationPipsPagerButtonWidth = elements.GetHorizontalOrientationPipsPagerButtonWidthTextBlock();
+                TextBlock horizontalOrientationPipsPagerButtonHeight = elements.GetHorizontalOrientationPipsPagerButtonHeightTextBlock();
+
+                TextBlock verticalOrientationPipsPagerButtonWidth = elements.GetVerticalOrientationPipsPagerButtonWidthTextBlock();
+                TextBlock verticalOrientationPipsPagerButtonHeight = elements.GetVerticalOrientationPipsPagerButtonHeightTextBlock();
+
+                Verify.AreEqual("12", horizontalOrientationPipsPagerButtonWidth.DocumentText);
+                Verify.AreEqual("20", horizontalOrientationPipsPagerButtonHeight.DocumentText);
+                Verify.AreEqual("20", verticalOrientationPipsPagerButtonWidth.DocumentText);
+                Verify.AreEqual("12", verticalOrientationPipsPagerButtonHeight.DocumentText);
+            }
+        }
+
+        [TestMethod]
+        [TestProperty("TestSuite", "F")]
+        public void PipSizeAfterOrientationChangeTest()
+        {
+            using (var setup = new TestSetupHelper("PipsPager Tests"))
+            {
+                elements = new PipsPagerElements();
+                Button getButtonSizesButton = elements.GetPipsPagerButtonSizesButton();
+                getButtonSizesButton.InvokeAndWait();
+
+                TextBlock horizontalOrientationPipsPagerButtonWidth = elements.GetHorizontalOrientationPipsPagerButtonWidthTextBlock();
+                TextBlock horizontalOrientationPipsPagerButtonHeight = elements.GetHorizontalOrientationPipsPagerButtonHeightTextBlock();
+                Verify.AreEqual("12", horizontalOrientationPipsPagerButtonWidth.DocumentText);
+                Verify.AreEqual("20", horizontalOrientationPipsPagerButtonHeight.DocumentText);
+
+                SetOrientation(Microsoft.Windows.Apps.Test.Automation.OrientationType.Vertical);
+                VerifyOrientationChanged(Microsoft.Windows.Apps.Test.Automation.OrientationType.Vertical);
+
+                getButtonSizesButton.InvokeAndWait();
+
+                Verify.AreEqual("20", horizontalOrientationPipsPagerButtonWidth.DocumentText);
+                Verify.AreEqual("12", horizontalOrientationPipsPagerButtonHeight.DocumentText);
+            }
+        }
     }
 }

dev/PipsPager/PipsPager.cpp

@@ -35,12 +35,19 @@ constexpr auto c_nextPageButtonName = L"NextPageButton"sv;
 constexpr auto c_pipsPagerRepeaterName = L"PipsPagerItemsRepeater"sv;
 constexpr auto c_pipsPagerScrollViewerName = L"PipsPagerScrollViewer"sv;
 
-constexpr auto c_pipsPagerButtonWidthPropertyName = L"PipsPagerButtonWidth"sv;
-constexpr auto c_pipsPagerButtonHeightPropertyName = L"PipsPagerButtonHeight"sv;
+constexpr auto c_pipsPagerVerticalOrientationButtonWidthPropertyName = L"PipsPagerVerticalOrientationButtonWidth"sv;
+constexpr auto c_pipsPagerVerticalOrientationButtonHeightPropertyName = L"PipsPagerVerticalOrientationButtonHeight"sv;
+
+constexpr auto c_pipsPagerHorizontalOrientationButtonWidthPropertyName = L"PipsPagerHorizontalOrientationButtonWidth"sv;
+constexpr auto c_pipsPagerHorizontalOrientationButtonHeightPropertyName = L"PipsPagerHorizontalOrientationButtonHeight"sv;
 
 constexpr auto c_pipsPagerHorizontalOrientationVisualState = L"HorizontalOrientationView"sv;
 constexpr auto c_pipsPagerVerticalOrientationVisualState = L"VerticalOrientationView"sv;
 
+constexpr auto c_pipsPagerButtonVerticalOrientationVisualState = L"VerticalOrientation"sv;
+constexpr auto c_pipsPagerButtonHorizontalOrientationVisualState = L"HorizontalOrientation"sv;
+
+
 PipsPager::PipsPager()
 {
     __RP_Marker_ClassById(RuntimeProfiler::ProfId_PipsPager);
@@ -116,7 +123,7 @@ void PipsPager::OnApplyTemplate()
 
 void PipsPager::RaiseSelectedIndexChanged()
 {
-    const auto args = winrt::make_self<PipsPagerSelectedIndexChangedEventArgs>(m_lastSelectedPageIndex, SelectedPageIndex());
+    const auto args = winrt::make_self<PipsPagerSelectedIndexChangedEventArgs>();
     m_selectedIndexChangedEventSource(*this, *args);
 }
 
@@ -127,15 +134,24 @@ winrt::Size PipsPager::GetDesiredPipSize(const winrt::Style& style) {
         {
             if (auto const element = itemTemplate.LoadContent().try_as<winrt::FrameworkElement>())
             {
-                element.Style(style);
+                ApplyStyleToPipAndUpdateOrientation(element, style);
                 element.Measure({ std::numeric_limits<float>::infinity(), std::numeric_limits<float>::infinity() });
                 return element.DesiredSize();
             }
         }
     }
-    /* Extract default sizes and return in case the code above fails */
-    auto pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerButtonHeightPropertyName)));
-    auto pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerButtonWidthPropertyName)));
+    double pipHeight;
+    double pipWidth;
+    if (Orientation() == winrt::Orientation::Horizontal)
+    {
+        pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerVerticalOrientationButtonHeightPropertyName)));
+        pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerVerticalOrientationButtonWidthPropertyName)));
+    }
+    else
+    {
+        pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerHorizontalOrientationButtonHeightPropertyName)));
+        pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerHorizontalOrientationButtonWidthPropertyName)));
+    }
     return { static_cast<float>(pipWidth), static_cast<float>(pipHeight) };
 }
 
@@ -259,14 +275,14 @@ void PipsPager::UpdateSelectedPip(const int index) {
         if (const auto repeater = m_pipsPagerRepeater.get())
         {
             repeater.UpdateLayout();
-            if (const auto element = repeater.TryGetElement(m_lastSelectedPageIndex).try_as<winrt::Button>())
+            if (const auto pip = repeater.TryGetElement(m_lastSelectedPageIndex).try_as<winrt::Button>())
             {
-                element.Style(NormalPipStyle());
+                ApplyStyleToPipAndUpdateOrientation(pip, NormalPipStyle());
             }
-            if (const auto element = repeater.GetOrCreateElement(index).try_as<winrt::Button>())
+            if (const auto pip = repeater.GetOrCreateElement(index).try_as<winrt::Button>())
             {
-                element.Style(SelectedPipStyle());
-                ScrollToCenterOfViewport(element, index);
+                ApplyStyleToPipAndUpdateOrientation(pip, SelectedPipStyle());
+                ScrollToCenterOfViewport(pip, index);
             }
         }
     }
@@ -348,21 +364,18 @@ void PipsPager::UpdatePipsItems(const int numberOfPages, int maxVisualIndicators
 
 void PipsPager::OnElementPrepared(winrt::ItemsRepeater sender, winrt::ItemsRepeaterElementPreparedEventArgs args)
 {
-    if (auto const element = args.Element())
+    if (auto const element = args.Element().try_as<winrt::FrameworkElement>())
     {
-        if (const auto pip = element.try_as<winrt::Button>())
-        {
-            auto const index = args.Index();
-            if (index != SelectedPageIndex())
-            {
-                pip.Style(NormalPipStyle());
-            }
+        auto const index = args.Index();
+        auto const style = index == SelectedPageIndex() ? SelectedPipStyle() : NormalPipStyle();
+        ApplyStyleToPipAndUpdateOrientation(element, style);
 
-            // Narrator says: Page 5, Button 5 of 30. Is it expected behavior?
-            winrt::AutomationProperties::SetName(pip, ResourceAccessor::GetLocalizedStringResource(SR_PipsPagerPageText) + L" " + winrt::to_hstring(index + 1));
-            winrt::AutomationProperties::SetPositionInSet(pip, index + 1);
-            winrt::AutomationProperties::SetSizeOfSet(pip, NumberOfPages());
+        winrt::AutomationProperties::SetName(element, ResourceAccessor::GetLocalizedStringResource(SR_PipsPagerPageText) + L" " + winrt::to_hstring(index + 1));
+        winrt::AutomationProperties::SetPositionInSet(element, index + 1);
+        winrt::AutomationProperties::SetSizeOfSet(element, NumberOfPages());
 
+        if (const auto pip = element.try_as<winrt::Button>())
+        {
             auto pciRevokers = winrt::make_self<PipsPagerViewItemRevokers>();
             pciRevokers->clickRevoker = pip.Click(winrt::auto_revoke,
                 [this, index](auto const& sender, auto const& args)
@@ -460,9 +473,49 @@ void PipsPager::OnOrientationChanged()
     {
         winrt::VisualStateManager::GoToState(*this, c_pipsPagerVerticalOrientationVisualState, false);
     }
+    if (const auto repeater = m_pipsPagerRepeater.get())
+    {
+        if (const auto itemsSourceView = repeater.ItemsSourceView())
+        {
+            const auto itemCount = itemsSourceView.Count();
+            for (int i = 0; i < itemCount; i++)
+            {
+                if (const auto pip = repeater.TryGetElement(i).try_as<winrt::Control>())
+                {
+                    UpdatePipOrientation(pip);
+                }
+            }
+        }
+    }
+    m_defaultPipSize = GetDesiredPipSize(NormalPipStyle());
+    m_selectedPipSize = GetDesiredPipSize(SelectedPipStyle());
     SetScrollViewerMaxSize();
-    UpdateSelectedPip(SelectedPageIndex());
+    if (const auto selectedPip = GetSelectedItem())
+    {
+        ScrollToCenterOfViewport(selectedPip, SelectedPageIndex());
+    }
+}
 
+void PipsPager::ApplyStyleToPipAndUpdateOrientation(const winrt::FrameworkElement& pip, const winrt::Style& style)
+{
+    pip.Style(style);
+    if (const auto control = pip.try_as<winrt::Control>())
+    {
+        control.ApplyTemplate();
+        UpdatePipOrientation(control);
+    }
+}
+
+void PipsPager::UpdatePipOrientation(const winrt::Control& pip)
+{
+    if (Orientation() == winrt::Orientation::Horizontal)
+    {
+        winrt::VisualStateManager::GoToState(pip, c_pipsPagerButtonHorizontalOrientationVisualState, false);
+    }
+    else
+    {
+        winrt::VisualStateManager::GoToState(pip, c_pipsPagerButtonVerticalOrientationVisualState, false);
+    }
 }
 
 void PipsPager::OnNavigationButtonVisibilityChanged(const ButtonVisibility visibility, const wstring_view& collapsedStateName, const wstring_view& disabledStateName) {
@@ -670,6 +723,14 @@ void PipsPager::OnPropertyChanged(const winrt::DependencyPropertyChangedEventArg
     }
 }
 
+winrt::UIElement PipsPager::GetSelectedItem() {
+    if (auto const repeater = m_pipsPagerRepeater.get())
+    {
+        return repeater.TryGetElement(SelectedPageIndex());
+    }
+    return nullptr;
+}
+
 winrt::AutomationPeer PipsPager::OnCreateAutomationPeer()
 {
     return winrt::make<PipsPagerAutomationPeer>(*this);

dev/PipsPager/PipsPager.h

@@ -47,6 +47,8 @@ class PipsPager :
         const wstring_view& disabledStateName);
     void OnOrientationChanged();
 
+    winrt::UIElement GetSelectedItem();
+
     /* Dependency property for pip buttons revokers */
     GlobalDependencyProperty s_pipButtonHandlersProperty;
 
@@ -66,7 +68,8 @@ class PipsPager :
     void ScrollToCenterOfViewport(const winrt::UIElement sender, const int index);
     double CalculateScrollViewerSize(const double defaultPipSize, const double selectedPipSize, const int numberOfPages, int maxVisualIndicators);
     void UpdateSelectedPip(const int index);
-
+    void UpdatePipOrientation(const winrt::Control& pip);
+    void ApplyStyleToPipAndUpdateOrientation(const winrt::FrameworkElement& pip, const winrt::Style& style);
     /* Eventing */
     void RaiseSelectedIndexChanged();
 

dev/PipsPager/PipsPager.xaml

@@ -88,13 +88,20 @@
 
                         <Button x:Name="PreviousPageButton"
                                 ToolTipService.ToolTip="{Binding ElementName=PreviousPageButton, Path=(AutomationProperties.Name)}"
-                                Style="{TemplateBinding PreviousButtonStyle}"/>
+                                Style="{TemplateBinding PreviousButtonStyle}"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center" />
 
                         <ScrollViewer x:Name="PipsPagerScrollViewer"
                                       VerticalScrollBarVisibility="Hidden"
                                       VerticalScrollMode="Disabled"
                                       HorizontalScrollBarVisibility="Hidden"
-                                      HorizontalScrollMode="Disabled">
+                                      HorizontalScrollMode="Disabled"
+                                      IsHorizontalScrollChainingEnabled="False"
+                                      IsVerticalScrollChainingEnabled="False"
+                                      HorizontalAlignment="Center"
+                                      VerticalAlignment="Center"
+                                      >
                             <muxc:ItemsRepeater x:Name="PipsPagerItemsRepeater"
                                 ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PipsPagerItems}">
                                 <muxc:ItemsRepeater.Layout>
@@ -110,7 +117,9 @@
 
                         <Button x:Name="NextPageButton"
                                 ToolTipService.ToolTip="{Binding ElementName=NextPageButton, Path=(AutomationProperties.Name)}"
-                                Style="{TemplateBinding NextButtonStyle}"/>
+                                Style="{TemplateBinding NextButtonStyle}"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"/>
                     </StackPanel>
                 </ControlTemplate>
             </Setter.Value>

dev/PipsPager/PipsPagerAutomationPeer.cpp

@@ -63,11 +63,17 @@ com_ptr<PipsPager> PipsPagerAutomationPeer::GetImpl()
     return impl;
 }
 
-winrt::com_array<winrt::IInspectable> PipsPagerAutomationPeer::GetSelection()
+winrt::com_array<winrt::Windows::UI::Xaml::Automation::Provider::IRawElementProviderSimple> PipsPagerAutomationPeer::GetSelection()
 {
     if (const auto pager = GetImpl())
     {
-        return { winrt::box_value(pager->SelectedPageIndex()) };
+        if (auto pip = pager->GetSelectedItem())
+        {
+            if (auto peer = winrt::FrameworkElementAutomationPeer::CreatePeerForElement(pip))
+            {
+                return { ProviderFromPeer(peer) };
+            }
+        }
     }
     return {};
 }

dev/PipsPager/PipsPagerAutomationPeer.h

@@ -22,7 +22,7 @@ class PipsPagerAutomationPeer :
     // ISelectionProvider
     bool CanSelectMultiple() { return false; };
     bool IsSelectionRequired() { return true; };
-    winrt::com_array<winrt::IInspectable> GetSelection();
+    winrt::com_array<winrt::Windows::UI::Xaml::Automation::Provider::IRawElementProviderSimple> GetSelection();
 
     void RaiseSelectionChanged(double oldIndex, double newIndex);
 

dev/PipsPager/PipsPagerSelectedIndexChangedEventArgs.h

@@ -7,15 +7,4 @@
 
 class PipsPagerSelectedIndexChangedEventArgs :
     public winrt::implementation::PipsPagerSelectedIndexChangedEventArgsT<PipsPagerSelectedIndexChangedEventArgs>
-{
-public:
-    PipsPagerSelectedIndexChangedEventArgs(const int previousIndex, const int newIndex) :
-        m_previousPageIndex(previousIndex), m_newPageIndex(newIndex) {};
-
-    int NewPageIndex() { return m_newPageIndex; };
-    int PreviousPageIndex() { return m_previousPageIndex; };
-
-private:
-    int m_newPageIndex = -1;
-    int m_previousPageIndex = -1;
-};
+{};