TabView gap between active tab and active content fix (#6644)

* fixed gap * fix + test app update
microsoft · Feb 28, 2022 · 9db5d4b · 9db5d4b
1 parent 8faca19
commit 9db5d4b
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 3 deletions.
diff --git a/dev/TabView/TabViewItem.cpp b/dev/TabView/TabViewItem.cpp
@@ -115,11 +115,11 @@ void TabViewItem::UpdateTabGeometry()
 
     WCHAR strOut[1024];
     StringCchPrintf(strOut, ARRAYSIZE(strOut), data,
-        height - 1,
+        height,
         leftCorner, leftCorner, leftCorner, leftCorner, leftCorner,
         ActualWidth() - (leftCorner + rightCorner),
         rightCorner, rightCorner, rightCorner, rightCorner,
-        height - (4 + rightCorner + 1));
+        height - (4 + rightCorner));
 
     const auto geometry = winrt::XamlReader::Load(strOut).try_as<winrt::Geometry>();
 

diff --git a/dev/TabView/TestUI/TabViewPage.xaml b/dev/TabView/TestUI/TabViewPage.xaml
@@ -10,7 +10,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
@@ -53,6 +53,11 @@
                 <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" />
+                <Button x:Name="HomeTabOverlapCheck" AutomationProperties.Name="HomeTabOverlapCheck" Content="Set HomeTabOverlapCheck" Margin="0,0,0,8" Click="HomeTabOverlapCheck_Click" />
+                <Button x:Name="SetActiveTabTransparent" AutomationProperties.Name="SetActiveTabTransparent" Content="Set ActiveTab Transparent" Margin="0,0,0,8" Click="SetActiveTabTransparent_Click" />
+                <Button x:Name="SetActiveContentTransparent" AutomationProperties.Name="SetActiveContentTransparent" Content="Set ActiveContent Transparent" Margin="0,0,0,8" Click="SetActiveContentTransparent_Click" />
+                <Button x:Name="ClearOverlapCheck" AutomationProperties.Name="ClearOverlapCheck" Content="Clear OverlapCheck" Margin="0,0,0,8" Click="ClearOverlapCheck_Click" />
+
                 <StackPanel Orientation="Horizontal">
                     <Button Click="SetColorsButton_Click" Content="Set Colors"/>
                     <Button Click="ClearColorsButton_Click" Content="Clear Colors"/>

diff --git a/dev/TabView/TestUI/TabViewPage.xaml.cs b/dev/TabView/TestUI/TabViewPage.xaml.cs
@@ -10,6 +10,8 @@
 using Windows.UI;
 using System.Windows.Input;
 using Windows.UI.Xaml.Automation;
+using Windows.UI.Xaml.Shapes;
+using System.Reflection;
 
 using TabView = Microsoft.UI.Xaml.Controls.TabView;
 using TabViewItem = Microsoft.UI.Xaml.Controls.TabViewItem;
@@ -55,8 +57,16 @@ public TabViewPage()
                 itemSource.Add(item);
             }
             DataBindingTabView.TabItemsSource = itemSource;
+
+            backgroundColorCache = BackgroundGrid.Background;
+            activeTabContentBackgroundBrushCache = FirstTabContent.Background;
+            CacheFirstTabSelectedBackgroundPathFill();
         }
 
+        private Brush backgroundColorCache;
+        private Brush activeTabSelectedBackgroundPathBrushCache;
+        private Brush activeTabContentBackgroundBrushCache;
+
         protected async override void OnNavigatedTo(Windows.UI.Xaml.Navigation.NavigationEventArgs args) 
         {
             NotCloseableTab.Visibility = Visibility.Collapsed;
@@ -409,6 +419,96 @@ private void ShortLongTextButton_Click(object sender, RoutedEventArgs e)
             FirstTab.Header = "s";
             LongHeaderTab.Header = "long long long long long long long long";
         }
+
+        private void HomeTabOverlapCheck_Click(object sender, RoutedEventArgs e)
+        {
+            var redBrush = new SolidColorBrush();
+            redBrush.Color = Colors.Red;
+            BackgroundGrid.Background = redBrush;
+
+            var tabBrush = new SolidColorBrush();
+            tabBrush.Color = Colors.Blue;
+            SetFirstTabSelectedBackgroundPathFill(tabBrush);
+
+            var contentBrush = new SolidColorBrush();
+            contentBrush.Color = Colors.Green;
+            FirstTabContent.Background = contentBrush;
+        }
+
+        private void SetActiveTabTransparent_Click(object sender, RoutedEventArgs e)
+        {
+            var tabBrush = new SolidColorBrush();
+            tabBrush.Color = Colors.Transparent;
+            SetFirstTabSelectedBackgroundPathFill(tabBrush);
+        }
+
+        private void SetActiveContentTransparent_Click(object sender, RoutedEventArgs e)
+        {
+            var contentBrush = new SolidColorBrush();
+            contentBrush.Color = Colors.Transparent;
+            FirstTabContent.Background = contentBrush;
+        }
+
+        private void ClearOverlapCheck_Click(object sender, RoutedEventArgs e)
+        {
+            BackgroundGrid.Background = backgroundColorCache;
+
+            if(activeTabSelectedBackgroundPathBrushCache != null)
+            {
+                FrameworkElement selectedBackgroundPath = FindFrameworkElementWithName("SelectedBackgroundPath", FirstTab);
+                if(selectedBackgroundPath != null)
+                {
+                    (selectedBackgroundPath as Path).Fill = activeTabSelectedBackgroundPathBrushCache;
+                }
+            }
+
+            if(activeTabContentBackgroundBrushCache != null)
+            {
+                FirstTabContent.Background = activeTabContentBackgroundBrushCache;
+            }
+        }
+
+        private void CacheFirstTabSelectedBackgroundPathFill()
+        {
+            FrameworkElement selectedBackgroundPath = FindFrameworkElementWithName("SelectedBackgroundPath", FirstTab);
+            if(selectedBackgroundPath != null)
+            {
+                activeTabSelectedBackgroundPathBrushCache = (selectedBackgroundPath as Path).Fill;
+            }
+        }
+
+        private void SetFirstTabSelectedBackgroundPathFill(Brush newBrush)
+        {
+            FrameworkElement selectedBackgroundPath = FindFrameworkElementWithName("SelectedBackgroundPath", FirstTab);
+            if(selectedBackgroundPath != null)
+            {
+                (selectedBackgroundPath as Path).Fill = newBrush;
+            }
+        }
+
+        private FrameworkElement FindFrameworkElementWithName(string name, DependencyObject startNode)
+        {
+            int count = VisualTreeHelper.GetChildrenCount(startNode);
+            for (int i = 0; i < count; i++)
+            {
+                DependencyObject current = VisualTreeHelper.GetChild(startNode, i);
+                if ((current.GetType()).Equals(typeof(FrameworkElement)) || (current.GetType().GetTypeInfo().IsSubclassOf(typeof(FrameworkElement))))
+                {
+                    FrameworkElement fe = (FrameworkElement)current;
+                    if(fe.Name == name)
+                    {
+                        return fe;
+                    }
+                }
+                var result = FindFrameworkElementWithName(name, current);
+                if(result != null)
+                {
+                    return result;
+                }
+            }
+            return null;
+        }
+
         private void SetColorsButton_Click(object sender, RoutedEventArgs e)
         {
             var foregroundBrush = new SolidColorBrush();