TabView Compact TabViewWidthMode and new CloseButtonOverlayMode property

MUXControls.sln

@@ -630,6 +630,8 @@ Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "RadialGradientBrush_TestUI"
 EndProject
 Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "RadialGradientBrush_InteractionTests", "dev\RadialGradientBrush\InteractionTests\RadialGradientBrush_InteractionTests.shproj", "{74D18B1B-5F6B-4534-945B-131E8E3206FB}"
 EndProject
+Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "TabView_APITests", "dev\TabView\APITests\TabView_APITests.shproj", "{2F4E95E9-F729-481C-B9AA-C9BEC91AE395}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
@@ -666,6 +668,7 @@ Global
 		dev\SplitButton\TestUI\SplitButton_TestUI.projitems*{280c91f4-96b5-4bde-9e02-e573e1def583}*SharedItemsImports = 13
 		dev\Repeater\TestUI\Repeater_TestUI.projitems*{2ed883f5-20db-4445-8c96-517a21e5e657}*SharedItemsImports = 13
 		dev\MenuFlyout\TestUI\MenuFlyout_TestUI.projitems*{2ef860e2-8766-41fc-bde2-e6b18bb8c206}*SharedItemsImports = 13
+		dev\TabView\APITests\TabView_APITests.projitems*{2f4e95e9-f729-481c-b9aa-c9bec91ae395}*SharedItemsImports = 13
 		dev\ParallaxView\ParallaxView.vcxitems*{3095445a-afcd-5154-ac36-9770e6ec1aa5}*SharedItemsImports = 9
 		dev\RadioMenuFlyoutItem\RadioMenuFlyoutItem.vcxitems*{3353a4a7-87b3-4e43-8f8d-43c7380d1d56}*SharedItemsImports = 9
 		dev\Lights\Lights.vcxitems*{3479a3ae-2854-4bec-80ab-eab0772cb90a}*SharedItemsImports = 9
@@ -927,6 +930,7 @@ Global
 		dev\SwipeControl\SwipeControl_APITests\SwipeControl_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\SwipeControl\SwipeControl_TestUI\SwipeControl_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\TabView\TestUI\TabView_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
+		dev\TabView\APITests\TabView_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\TeachingTip\APITests\TeachingTip_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\TeachingTip\TestUI\TeachingTip_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\TimePicker\TestUI\TimePicker_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
@@ -1015,6 +1019,7 @@ Global
 		dev\SwipeControl\SwipeControl_APITests\SwipeControl_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\SwipeControl\SwipeControl_TestUI\SwipeControl_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\TabView\TestUI\TabView_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
+		dev\TabView\APITests\TabView_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\TeachingTip\APITests\TeachingTip_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\TeachingTip\TestUI\TeachingTip_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\TimePicker\TestUI\TimePicker_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
@@ -1667,6 +1672,7 @@ Global
 		{8B056B8F-C1AB-4A80-BD17-DEACE9897E6A} = {0115F80C-AB97-412D-85D9-33A5188F8907}
 		{AE308818-AF18-48BA-BF33-89779083D297} = {0115F80C-AB97-412D-85D9-33A5188F8907}
 		{74D18B1B-5F6B-4534-945B-131E8E3206FB} = {0115F80C-AB97-412D-85D9-33A5188F8907}
+		{2F4E95E9-F729-481C-B9AA-C9BEC91AE395} = {B3E64837-A5E4-49CB-97FF-A365307B9191}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}

dev/Generated/TabView.properties.cpp

@@ -18,6 +18,7 @@ GlobalDependencyProperty TabViewProperties::s_AddTabButtonCommandParameterProper
 GlobalDependencyProperty TabViewProperties::s_AllowDropTabsProperty{ nullptr };
 GlobalDependencyProperty TabViewProperties::s_CanDragTabsProperty{ nullptr };
 GlobalDependencyProperty TabViewProperties::s_CanReorderTabsProperty{ nullptr };
+GlobalDependencyProperty TabViewProperties::s_CloseButtonOverlayModeProperty{ nullptr };
 GlobalDependencyProperty TabViewProperties::s_IsAddTabButtonVisibleProperty{ nullptr };
 GlobalDependencyProperty TabViewProperties::s_SelectedIndexProperty{ nullptr };
 GlobalDependencyProperty TabViewProperties::s_SelectedItemProperty{ nullptr };
@@ -102,6 +103,17 @@ void TabViewProperties::EnsureProperties()
                 ValueHelper<bool>::BoxValueIfNecessary(true),
                 nullptr);
     }
+    if (!s_CloseButtonOverlayModeProperty)
+    {
+        s_CloseButtonOverlayModeProperty =
+            InitializeDependencyProperty(
+                L"CloseButtonOverlayMode",
+                winrt::name_of<winrt::TabViewCloseButtonOverlayMode>(),
+                winrt::name_of<winrt::TabView>(),
+                false /* isAttached */,
+                ValueHelper<winrt::TabViewCloseButtonOverlayMode>::BoxValueIfNecessary(winrt::TabViewCloseButtonOverlayMode::Persistent),
+                winrt::PropertyChangedCallback(&OnCloseButtonOverlayModePropertyChanged));
+    }
     if (!s_IsAddTabButtonVisibleProperty)
     {
         s_IsAddTabButtonVisibleProperty =
@@ -243,6 +255,7 @@ void TabViewProperties::ClearProperties()
     s_AllowDropTabsProperty = nullptr;
     s_CanDragTabsProperty = nullptr;
     s_CanReorderTabsProperty = nullptr;
+    s_CloseButtonOverlayModeProperty = nullptr;
     s_IsAddTabButtonVisibleProperty = nullptr;
     s_SelectedIndexProperty = nullptr;
     s_SelectedItemProperty = nullptr;
@@ -257,6 +270,14 @@ void TabViewProperties::ClearProperties()
     s_TabWidthModeProperty = nullptr;
 }
 
+void TabViewProperties::OnCloseButtonOverlayModePropertyChanged(
+    winrt::DependencyObject const& sender,
+    winrt::DependencyPropertyChangedEventArgs const& args)
+{
+    auto owner = sender.as<winrt::TabView>();
+    winrt::get_self<TabView>(owner)->OnCloseButtonOverlayModePropertyChanged(args);
+}
+
 void TabViewProperties::OnSelectedIndexPropertyChanged(
     winrt::DependencyObject const& sender,
     winrt::DependencyPropertyChangedEventArgs const& args)
@@ -331,6 +352,16 @@ bool TabViewProperties::CanReorderTabs()
     return ValueHelper<bool>::CastOrUnbox(static_cast<TabView*>(this)->GetValue(s_CanReorderTabsProperty));
 }
 
+void TabViewProperties::CloseButtonOverlayMode(winrt::TabViewCloseButtonOverlayMode const& value)
+{
+    static_cast<TabView*>(this)->SetValue(s_CloseButtonOverlayModeProperty, ValueHelper<winrt::TabViewCloseButtonOverlayMode>::BoxValueIfNecessary(value));
+}
+
+winrt::TabViewCloseButtonOverlayMode TabViewProperties::CloseButtonOverlayMode()
+{
+    return ValueHelper<winrt::TabViewCloseButtonOverlayMode>::CastOrUnbox(static_cast<TabView*>(this)->GetValue(s_CloseButtonOverlayModeProperty));
+}
+
 void TabViewProperties::IsAddTabButtonVisible(bool value)
 {
     static_cast<TabView*>(this)->SetValue(s_IsAddTabButtonVisibleProperty, ValueHelper<bool>::BoxValueIfNecessary(value));

dev/Generated/TabView.properties.h

@@ -24,6 +24,9 @@ class TabViewProperties
     void CanReorderTabs(bool value);
     bool CanReorderTabs();
 
+    void CloseButtonOverlayMode(winrt::TabViewCloseButtonOverlayMode const& value);
+    winrt::TabViewCloseButtonOverlayMode CloseButtonOverlayMode();
+
     void IsAddTabButtonVisible(bool value);
     bool IsAddTabButtonVisible();
 
@@ -65,6 +68,7 @@ class TabViewProperties
     static winrt::DependencyProperty AllowDropTabsProperty() { return s_AllowDropTabsProperty; }
     static winrt::DependencyProperty CanDragTabsProperty() { return s_CanDragTabsProperty; }
     static winrt::DependencyProperty CanReorderTabsProperty() { return s_CanReorderTabsProperty; }
+    static winrt::DependencyProperty CloseButtonOverlayModeProperty() { return s_CloseButtonOverlayModeProperty; }
     static winrt::DependencyProperty IsAddTabButtonVisibleProperty() { return s_IsAddTabButtonVisibleProperty; }
     static winrt::DependencyProperty SelectedIndexProperty() { return s_SelectedIndexProperty; }
     static winrt::DependencyProperty SelectedItemProperty() { return s_SelectedItemProperty; }
@@ -83,6 +87,7 @@ class TabViewProperties
     static GlobalDependencyProperty s_AllowDropTabsProperty;
     static GlobalDependencyProperty s_CanDragTabsProperty;
     static GlobalDependencyProperty s_CanReorderTabsProperty;
+    static GlobalDependencyProperty s_CloseButtonOverlayModeProperty;
     static GlobalDependencyProperty s_IsAddTabButtonVisibleProperty;
     static GlobalDependencyProperty s_SelectedIndexProperty;
     static GlobalDependencyProperty s_SelectedItemProperty;
@@ -128,6 +133,10 @@ class TabViewProperties
     static void EnsureProperties();
     static void ClearProperties();
 
+    static void OnCloseButtonOverlayModePropertyChanged(
+        winrt::DependencyObject const& sender,
+        winrt::DependencyPropertyChangedEventArgs const& args);
+
     static void OnSelectedIndexPropertyChanged(
         winrt::DependencyObject const& sender,
         winrt::DependencyPropertyChangedEventArgs const& args);

dev/TabView/APITests/TabViewTests.cs

@@ -0,0 +1,119 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+using MUXControlsTestApp.Utilities;
+using System;
+using System.Threading;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media;
+using Common;
+using Microsoft.UI.Xaml.Controls;
+using System.Collections.Generic;
+
+#if USING_TAEF
+using WEX.TestExecution;
+using WEX.TestExecution.Markup;
+using WEX.Logging.Interop;
+#else
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Microsoft.VisualStudio.TestTools.UnitTesting.Logging;
+#endif
+
+using Symbol = Windows.UI.Xaml.Controls.Symbol;
+
+namespace Windows.UI.Xaml.Tests.MUXControls.ApiTests
+{
+
+    [TestClass]
+    public class TabViewTests : ApiTestBase
+    {
+
+        [TestMethod]
+        public void VerifyCompactTabWidthVisualStates()
+        {
+            TabView tabView = null;
+            RunOnUIThread.Execute(() =>
+            {
+                tabView = new TabView();
+                Content = tabView;
+
+                tabView.TabItems.Add(CreateTabViewItem("Item 0", Symbol.Add));
+                tabView.TabItems.Add(CreateTabViewItem("Item 1", Symbol.AddFriend));
+                tabView.TabItems.Add(CreateTabViewItem("Item 2"));
+
+                tabView.SelectedIndex = 0;
+                tabView.SelectedItem = tabView.TabItems[0];
+                (tabView.SelectedItem as TabViewItem).IsSelected = true;
+                Verify.AreEqual("Item 0", (tabView.SelectedItem as TabViewItem).Header);
+                tabView.TabWidthMode = TabViewWidthMode.Compact;
+                Content.UpdateLayout();
+            });
+
+            IdleSynchronizer.Wait();
+
+            // Check if switching to compact updates all items correctly
+            RunOnUIThread.Execute(() =>
+            {
+                VerifyTabWidthVisualStates(tabView.TabItems, true);
+                tabView.TabItems.Add(CreateTabViewItem("Item 3"));
+            });
+
+            IdleSynchronizer.Wait();
+
+            // Check if a newly added item has correct visual states
+            RunOnUIThread.Execute(() =>
+            {
+                VerifyTabWidthVisualStates(tabView.TabItems, true);
+                tabView.TabWidthMode = TabViewWidthMode.Equal;
+            });
+
+            IdleSynchronizer.Wait();
+
+            // Switch back to non compact and check if every item has the correct visual state
+            RunOnUIThread.Execute(() =>
+            {
+                VerifyTabWidthVisualStates(tabView.TabItems, false);
+            });
+        }
+
+        private static void VerifyTabWidthVisualStates(IList<object> items, bool isCompact)
+        {
+            foreach (var item in items)
+            {
+                var tabItem = item as TabViewItem;
+                if (tabItem.IsSelected || !isCompact)
+                {
+                    VisualStateHelper.ContainsVisualState(tabItem, "StandardWidth");
+                }
+                else
+                {
+                    VisualStateHelper.ContainsVisualState(tabItem, "Compact");
+                }
+            }
+        }
+
+        private static TabViewItem CreateTabViewItem(string name, Symbol icon, bool closable = true, bool enabled = true)
+        {
+            var tabViewItem = new TabViewItem();
+
+            tabViewItem.Header = name;
+            tabViewItem.IconSource = new Microsoft.UI.Xaml.Controls.SymbolIconSource() { Symbol = icon };
+            tabViewItem.IsClosable = closable;
+            tabViewItem.IsEnabled = enabled;
+
+            return tabViewItem;
+        }
+
+        private static TabViewItem CreateTabViewItem(string name, bool closable = true, bool enabled = true)
+        {
+            var tabViewItem = new TabViewItem();
+
+            tabViewItem.Header = name;
+            tabViewItem.IsClosable = closable;
+            tabViewItem.IsEnabled = enabled;
+
+            return tabViewItem;
+        }
+    }
+}

dev/TabView/APITests/TabView_APITests.projitems

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <MSBuildAllProjects>$(MSBuildAllProjects);$(MSBuildThisFileFullPath)</MSBuildAllProjects>
+    <HasSharedItems>true</HasSharedItems>
+    <SharedGUID>2f4e95e9-f729-481c-b9aa-c9bec91ae395</SharedGUID>
+  </PropertyGroup>
+  <PropertyGroup Label="Configuration">
+    <Import_RootNamespace>TabView_APITests</Import_RootNamespace>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="$(MSBuildThisFileDirectory)TabViewTests.cs" />
+  </ItemGroup>
+</Project>

dev/TabView/APITests/TabView_APITests.shproj

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>2f4e95e9-f729-481c-b9aa-c9bec91ae395</ProjectGuid>
+    <MinimumVisualStudioVersion>14.0</MinimumVisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.Common.props" />
+  <PropertyGroup />
+  <Import Project="TabView_APITests.projitems" Label="Shared" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\CodeSharing\Microsoft.CodeSharing.CSharp.targets" />
+</Project>

dev/TabView/InteractionTests/TabViewTests.cs

@@ -408,6 +408,49 @@ public void KeyboardTest()
             }
         }
 
+        [TestMethod]
+        public void CloseButtonOverlayModeTests()
+        {
+            using(var setup = new TestSetupHelper("TabView Tests"))
+            {
+                ComboBox closeButtonOverlayModeComboBox = FindElement.ByName<ComboBox>("CloseButtonOverlayModeCombobox");
+                closeButtonOverlayModeComboBox.SelectItemByName("OnHover");
+                Wait.ForIdle();
+
+                Button closeUnselectedButton = FindCloseButton(FindElement.ByName("LongHeaderTab"));
+                Button closeSelectedButton = FindCloseButton(FindElement.ByName("FirstTab"));
+                Verify.IsNull(closeUnselectedButton);
+                Verify.IsNotNull(closeSelectedButton);
+
+                closeButtonOverlayModeComboBox.SelectItemByName("Persistent");
+                Wait.ForIdle();
+
+                // Verifiying "Persistent" works correctly
+                closeSelectedButton = FindCloseButton(FindElement.ByName("FirstTab"));
+                closeUnselectedButton = FindCloseButton(FindElement.ByName("LongHeaderTab"));
+                Verify.IsNotNull(closeUnselectedButton);
+                Verify.IsNotNull(closeSelectedButton);
+
+                // Verifiying "OnHover" works correctly
+                closeButtonOverlayModeComboBox.SelectItemByName("OnHover");
+                Wait.ForIdle();
+
+                closeSelectedButton = FindCloseButton(FindElement.ByName("FirstTab"));
+                closeUnselectedButton = FindCloseButton(FindElement.ByName("LongHeaderTab"));
+                Verify.IsNull(closeUnselectedButton);
+                Verify.IsNotNull(closeSelectedButton);
+
+                // Verifiying "Auto" works correctly
+                closeButtonOverlayModeComboBox.SelectItemByName("Auto");
+                Wait.ForIdle();
+
+                closeSelectedButton = FindCloseButton(FindElement.ByName("FirstTab"));
+                closeUnselectedButton = FindCloseButton(FindElement.ByName("LongHeaderTab"));
+                Verify.IsNotNull(closeUnselectedButton);
+                Verify.IsNotNull(closeSelectedButton);
+
+            }
+        } 
 
         [TestMethod]
         public void GamePadTest()