Disable TabView scroll buttons based on scroll position (#2162)

0x7c13 · web-flow · commit 68abde4f8026 · 2020-04-03T14:20:11.000-07:00
* Disable TabView scroll buttons based on scroll position

Disable TabView scroll buttons based on scroll position

* Store the return value of scrollViewer.ViewChanged in a revoker

Store the return value of scrollViewer.ViewChanged in a revoker

* Setup UI for testing scroll viewer's increase/decrease button

Setup UI for testing scroll viewer's increase/decrease button

* Save decrease/increase button ref for future use and address few comments

Save decrease/increase button ref for future use and address few comments

* Added UI tests

Added UI tests

* Adding a sleep after each scrolling to make sure view state get updated

Adding a sleep after each scrolling to make sure view state get updated

* Use Wait.ForMilliseconds instead of Thread.Sleep

Use Wait.ForMilliseconds instead of Thread.Sleep

* Use Wait.ForIdle() instead

Use Wait.ForIdle() instead

* Disable scrolling animation

Disable scrolling animation

* Remove unused namespace

Remove unused namespace

* Resolve comments

Resolve comments
diff --git a/dev/TabView/InteractionTests/TabViewTests.cs b/dev/TabView/InteractionTests/TabViewTests.cs
@@ -140,6 +140,24 @@ public void TabSizeAndScrollButtonsTest()
                 // With largerTab now rendering wider, the scroll buttons should appear:
                 Verify.IsTrue(AreScrollButtonsVisible(), "Scroll buttons should appear");
 
+                // Scroll all the way to the left and verify decrease/increase button visual state
+                FindElement.ByName<Button>("ScrollTabViewToTheLeft").InvokeAndWait();
+                Wait.ForIdle();
+                Verify.IsFalse(IsScrollDecreaseButtonEnabled(), "Scroll decrease button should be disabled");
+                Verify.IsTrue(IsScrollIncreaseButtonEnabled(), "Scroll increase button should be enabled");
+
+                // Scroll to the middle position and verify decrease/increase button visual state
+                FindElement.ByName<Button>("ScrollTabViewToTheMiddle").InvokeAndWait();
+                Wait.ForIdle();
+                Verify.IsTrue(IsScrollDecreaseButtonEnabled(), "Scroll decrease button should be enabled");
+                Verify.IsTrue(IsScrollIncreaseButtonEnabled(), "Scroll increase button should be enabled");
+
+                // Scroll all the way to the right and verify decrease/increase button visual state
+                FindElement.ByName<Button>("ScrollTabViewToTheRight").InvokeAndWait();
+                Wait.ForIdle();
+                Verify.IsTrue(IsScrollDecreaseButtonEnabled(), "Scroll decrease button should be enabled");
+                Verify.IsFalse(IsScrollIncreaseButtonEnabled(), "Scroll increase button should be disabled");
+
                 // Close a tab to make room. The scroll buttons should disappear:
                 Log.Comment("Closing a tab:");
                 Button closeButton = FindCloseButton(FindElement.ByName("LongHeaderTab"));
@@ -186,6 +204,20 @@ private bool AreScrollButtonsVisible()
             }
         }
 
+        private bool IsScrollIncreaseButtonEnabled()
+        {
+            FindElement.ByName<Button>("GetScrollIncreaseButtonEnabled").InvokeAndWait();
+            var scrollIncreaseButtonEnabled = FindElement.ByName<TextBlock>("ScrollIncreaseButtonEnabled").DocumentText;
+            return scrollIncreaseButtonEnabled == "True";
+        }
+
+        private bool IsScrollDecreaseButtonEnabled()
+        {
+            FindElement.ByName<Button>("GetScrollDecreaseButtonEnabled").InvokeAndWait();
+            var scrollDecreaseButtonEnabled = FindElement.ByName<TextBlock>("ScrollDecreaseButtonEnabled").DocumentText;
+            return scrollDecreaseButtonEnabled == "True";
+        }
+
         [TestMethod]
         public void CloseSelectionTest()
         {
diff --git a/dev/TabView/TabView.cpp b/dev/TabView/TabView.cpp
@@ -346,18 +346,57 @@ void TabView::OnScrollViewerLoaded(const winrt::IInspectable&, const winrt::Rout
     if (auto&& scrollViewer = m_scrollViewer.get())
     {
         auto decreaseButton = SharedHelpers::FindInVisualTreeByName(scrollViewer, L"ScrollDecreaseButton").as<winrt::RepeatButton>();
+        m_scrollDecreaseButton.set(decreaseButton);
         m_scrollDecreaseClickRevoker = decreaseButton.Click(winrt::auto_revoke, { this, &TabView::OnScrollDecreaseClick });
 
         auto increaseButton = SharedHelpers::FindInVisualTreeByName(scrollViewer, L"ScrollIncreaseButton").as<winrt::RepeatButton>();
+        m_scrollIncreaseButton.set(increaseButton);
         m_scrollIncreaseClickRevoker = increaseButton.Click(winrt::auto_revoke, { this, &TabView::OnScrollIncreaseClick });
+
+        m_scrollViewerViewChangedRevoker = scrollViewer.ViewChanged(winrt::auto_revoke, { this, &TabView::OnScrollViewerViewChanged });
     }
 
     UpdateTabWidths();
 }
 
+void TabView::OnScrollViewerViewChanged(winrt::IInspectable const& sender, winrt::ScrollViewerViewChangedEventArgs const& args)
+{
+    UpdateScrollViewerDecreaseAndIncreaseButtonsViewState();
+}
+
+void TabView::UpdateScrollViewerDecreaseAndIncreaseButtonsViewState()
+{
+    if (auto&& scrollViewer = m_scrollViewer.get())
+    {
+        auto&& decreaseButton = m_scrollDecreaseButton.get();
+        auto&& increaseButton = m_scrollIncreaseButton.get();
+
+        constexpr auto minThreshold = 0.1;
+        auto horizontalOffset = scrollViewer.HorizontalOffset();
+        auto scrollableWidth = scrollViewer.ScrollableWidth();
+
+        if (abs(horizontalOffset - scrollableWidth) < minThreshold)
+        {
+            decreaseButton.IsEnabled(true);
+            increaseButton.IsEnabled(false);
+        }
+        else if (abs(horizontalOffset) < minThreshold)
+        {
+            decreaseButton.IsEnabled(false);
+            increaseButton.IsEnabled(true);
+        }
+        else
+        {
+            decreaseButton.IsEnabled(true);
+            increaseButton.IsEnabled(true);
+        }
+    }
+}
+
 void TabView::OnItemsPresenterSizeChanged(const winrt::IInspectable& sender, const winrt::SizeChangedEventArgs& args)
 {
     UpdateTabWidths();
+    UpdateScrollViewerDecreaseAndIncreaseButtonsViewState();
 }
 
 void TabView::OnItemsChanged(winrt::IInspectable const& item)
@@ -636,6 +675,7 @@ void TabView::UpdateTabWidths()
                         if (auto listview = m_listView.get())
                         {
                             winrt::FxScrollViewer::SetHorizontalScrollBarVisibility(listview, winrt::Windows::UI::Xaml::Controls::ScrollBarVisibility::Visible);
+                            UpdateScrollViewerDecreaseAndIncreaseButtonsViewState();
                         }
                     }
                     else
@@ -659,9 +699,14 @@ void TabView::UpdateTabWidths()
                         // Calculate if the scroll buttons should be visible.
                         if (auto itemsPresenter = m_itemsPresenter.get())
                         {
-                            winrt::FxScrollViewer::SetHorizontalScrollBarVisibility(listview, itemsPresenter.ActualWidth() > availableWidth
+                            auto visible = itemsPresenter.ActualWidth() > availableWidth;
+                            winrt::FxScrollViewer::SetHorizontalScrollBarVisibility(listview, visible
                                 ? winrt::Windows::UI::Xaml::Controls::ScrollBarVisibility::Visible
                                 : winrt::Windows::UI::Xaml::Controls::ScrollBarVisibility::Hidden);
+                            if (visible)
+                            {
+                                UpdateScrollViewerDecreaseAndIncreaseButtonsViewState();
+                            }
                         }
                     }
                 }
diff --git a/dev/TabView/TabView.h b/dev/TabView/TabView.h
@@ -123,6 +123,7 @@ class TabView :
     void OnAddButtonClick(const winrt::IInspectable& sender, const winrt::RoutedEventArgs& args);
     void OnScrollDecreaseClick(const winrt::IInspectable& sender, const winrt::RoutedEventArgs& args);
     void OnScrollIncreaseClick(const winrt::IInspectable& sender, const winrt::RoutedEventArgs& args);
+    void OnScrollViewerViewChanged(winrt::IInspectable const& sender, winrt::ScrollViewerViewChangedEventArgs const& args);
     void OnItemsPresenterSizeChanged(const winrt::IInspectable& sender, const winrt::SizeChangedEventArgs& args);
 
     void OnListViewLoaded(const winrt::IInspectable& sender, const winrt::RoutedEventArgs& args);
@@ -145,6 +146,8 @@ class TabView :
 
     void UpdateTabWidths();
 
+    void UpdateScrollViewerDecreaseAndIncreaseButtonsViewState();
+
     void OnListViewGettingFocus(const winrt::IInspectable& sender, const winrt::GettingFocusEventArgs& args);
 
     int GetItemCount();
@@ -161,6 +164,8 @@ class TabView :
     tracker_ref<winrt::ContentPresenter> m_rightContentPresenter{ this };
     tracker_ref<winrt::Grid> m_tabContainerGrid{ this };
     tracker_ref<winrt::FxScrollViewer> m_scrollViewer{ this };
+    tracker_ref<winrt::RepeatButton> m_scrollDecreaseButton{ this };
+    tracker_ref<winrt::RepeatButton> m_scrollIncreaseButton{ this };
     tracker_ref<winrt::Button> m_addButton{ this };
     tracker_ref<winrt::ItemsPresenter> m_itemsPresenter{ this };
 
@@ -176,6 +181,7 @@ class TabView :
     winrt::UIElement::Drop_revoker m_listViewDropRevoker{};
 
     winrt::FxScrollViewer::Loaded_revoker m_scrollViewerLoadedRevoker{};
+    winrt::FxScrollViewer::ViewChanged_revoker m_scrollViewerViewChangedRevoker{};
 
     winrt::Button::Click_revoker m_addButtonClickRevoker{};
 
diff --git a/dev/TabView/TestUI/TabViewPage.xaml b/dev/TabView/TestUI/TabViewPage.xaml
@@ -48,6 +48,9 @@
                 <Button x:Name="ChangeShopTextButton" AutomationProperties.Name="ChangeShopTextButton" Content="Change Shop text" Margin="0,0,0,8" Click="ChangeShopTextButton_Click"/>
                 <Button x:Name="CustomTooltipButton" AutomationProperties.Name="CustomTooltipButton" Content="Custom Tooltip" Margin="0,0,0,8" Click="CustomTooltipButton_Click"/>
                 <Button x:Name="SetTabViewWidth" AutomationProperties.Name="SetTabViewWidth" Content="Set Width" Margin="0,0,0,8" Click="SetTabViewWidth_Click" />
+                <Button x:Name="ScrollTabViewToTheLeft" AutomationProperties.Name="ScrollTabViewToTheLeft" Content="Scroll TabView To the Left" Margin="0,0,0,8" Click="TabViewScrollToTheLeftButton_Click" />
+                <Button x:Name="ScrollTabViewToTheMiddle" AutomationProperties.Name="ScrollTabViewToTheMiddle" Content="Scroll TabView To the Middle" Margin="0,0,0,8" Click="TabViewScrollToTheMiddleButton_Click" />
+                <Button x:Name="ScrollTabViewToTheRight" AutomationProperties.Name="ScrollTabViewToTheRight" Content="Scroll TabView To the Right" Margin="0,0,0,8" Click="TabViewScrollToTheRightButton_Click" />
 
                 <Button x:Name="ShortLongTextButton" AutomationProperties.Name="ShortLongTextButton" Content="Short/Long Text" Margin="0,0,0,8" Click="ShortLongTextButton_Click" />
 
@@ -60,7 +63,17 @@
                     <Button x:Name="GetScrollButtonsVisible" AutomationProperties.Name="GetScrollButtonsVisible" Content="Get" Margin="4,0,0,0" Click="GetScrollButtonsVisible_Click" />
                 </StackPanel>
 
+                <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
+                    <TextBlock Text="DecreaseButton enabled:" VerticalAlignment="Center" Margin="0,0,4,0"/>
+                    <TextBlock x:Name="ScrollDecreaseButtonEnabled" AutomationProperties.Name="ScrollDecreaseButtonEnabled" Text="False" VerticalAlignment="Center"/>
+                    <Button x:Name="GetScrollDecreaseButtonEnabled" AutomationProperties.Name="GetScrollDecreaseButtonEnabled" Content="Get" Margin="4,0,0,0" Click="GetScrollDecreaseButtonEnabled_Click" />
+                </StackPanel>
 
+                <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
+                    <TextBlock Text="IncreaseButton enabled:" VerticalAlignment="Center" Margin="0,0,4,0"/>
+                    <TextBlock x:Name="ScrollIncreaseButtonEnabled" AutomationProperties.Name="ScrollIncreaseButtonEnabled" Text="False" VerticalAlignment="Center"/>
+                    <Button x:Name="GetScrollIncreaseButtonEnabled" AutomationProperties.Name="GetScrollIncreaseButtonEnabled" Content="Get" Margin="4,0,0,0" Click="GetScrollIncreaseButtonEnabled_Click" />
+                </StackPanel>
 
                 <StackPanel Orientation="Horizontal" Margin="0,0,0,8">
                     <TextBlock>Selected Index:</TextBlock>
diff --git a/dev/TabView/TestUI/TabViewPage.xaml.cs b/dev/TabView/TestUI/TabViewPage.xaml.cs
@@ -359,6 +359,36 @@ public void GetScrollButtonsVisible_Click(object sender, RoutedEventArgs e)
             }
         }
 
+        public void TabViewScrollToTheLeftButton_Click(object sender, RoutedEventArgs e)
+        {
+            var scrollViewer = VisualTreeUtils.FindVisualChildByName(Tabs, "ScrollViewer") as ScrollViewer;
+            scrollViewer.ChangeView(0, null, null, true);
+        }
+
+        public void TabViewScrollToTheMiddleButton_Click(object sender, RoutedEventArgs e)
+        {
+            var scrollViewer = VisualTreeUtils.FindVisualChildByName(Tabs, "ScrollViewer") as ScrollViewer;
+            scrollViewer.ChangeView(scrollViewer.ScrollableWidth / 2.0f, null, null, true);
+        }
+
+        public void TabViewScrollToTheRightButton_Click(object sender, RoutedEventArgs e)
+        {
+            var scrollViewer = VisualTreeUtils.FindVisualChildByName(Tabs, "ScrollViewer") as ScrollViewer;
+            scrollViewer.ChangeView(double.MaxValue, null, null, true);
+        }
+
+        public void GetScrollDecreaseButtonEnabled_Click(object sender, RoutedEventArgs e)
+        {
+            var scrollDecreaseButton = VisualTreeUtils.FindVisualChildByName(Tabs, "ScrollDecreaseButton") as RepeatButton;
+            ScrollDecreaseButtonEnabled.Text = scrollDecreaseButton.IsEnabled ? "True" : "False";
+        }
+
+        public void GetScrollIncreaseButtonEnabled_Click(object sender, RoutedEventArgs e)
+        {
+            var scrollIncreaseButton = VisualTreeUtils.FindVisualChildByName(Tabs, "ScrollIncreaseButton") as RepeatButton;
+            ScrollIncreaseButtonEnabled.Text = scrollIncreaseButton.IsEnabled ? "True" : "False";
+        }
+
         private void TabViewSizingPageButton_Click(object sender, RoutedEventArgs e)
         {
             this.Frame.Navigate(typeof(TabViewSizingPage));
