TabView TabGeometry Animation Loop & Under Tab Line Fix (#8430)

* wrap tabGeometry in Canvas * clean up * add comment (cherry picked from commit 5f52761)
microsoft · May 1, 2023 · 4a62e13 · 4a62e13
1 parent 18523c2
commit 4a62e13
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/dev/TabView/TabView.cpp b/dev/TabView/TabView.cpp
@@ -1174,7 +1174,7 @@ void TabView::UpdateTabWidths(bool shouldUpdateWidths, bool fillAllAvailableSpac
                 }
                 else
                 {
-                    // Case: TabWidthMode "Compact" or "FitToContent"
+                    // Case: TabWidthMode "Compact" or "SizeToContent"
                     tabColumn.MaxWidth(availableWidth);
                     tabColumn.Width(winrt::GridLengthHelper::FromValueAndType(1.0, winrt::GridUnitType::Auto));
                     if (auto&& listview = m_listView.get())

diff --git a/dev/TabView/TabView.xaml b/dev/TabView/TabView.xaml
@@ -734,7 +734,7 @@
                         </VisualStateManager.VisualStateGroups>
 
                         <Border x:Name="BottomBorderLine" BorderBrush="{ThemeResource TabViewBorderBrush}" BorderThickness="1" Height="1" Grid.ColumnSpan="3" VerticalAlignment="Bottom"/>
-                        
+
                         <Path x:Name="LeftRadiusRenderArc"
                             x:Load="False"
                             Fill="{ThemeResource TabViewBorderBrush}"
@@ -756,14 +756,17 @@
                             Width="4"
                             Data="M0 0C0 1.19469 0.523755 2.26706 1.35418 3H4C2.34315 3 1 1.65685 1 0H0Z"/>
 
-                        <Path x:Name="SelectedBackgroundPath"
-                            x:Load="False"
-                            Grid.ColumnSpan="3"
-                            Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
-                            VerticalAlignment="Bottom"
-                            Margin="-4,0,-4,0"
-                            Visibility="Collapsed"
-                            Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TabViewTemplateSettings.TabGeometry}" />
+                        <!-- This Path wrapped in a Canvas to prevent an infinite loop in calculating its width. -->
+                        <Canvas>
+                            <Path x:Name="SelectedBackgroundPath"
+                                x:Load="False"
+                                Grid.ColumnSpan="3"
+                                Fill="{ThemeResource TabViewItemHeaderBackgroundSelected}"
+                                VerticalAlignment="Bottom"
+                                Margin="-4,0,-4,0"
+                                Visibility="Collapsed"
+                                Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TabViewTemplateSettings.TabGeometry}" />
+                        </Canvas>
 
                         <Border x:Name="TabSeparator"
                             HorizontalAlignment="Right"

diff --git a/dev/TabView/TabViewItem.cpp b/dev/TabView/TabViewItem.cpp
@@ -127,9 +127,6 @@ void TabViewItem::OnApplyTemplate()
 void TabViewItem::UpdateTabGeometry()
 {
     auto const templateSettings = winrt::get_self<TabViewItemTemplateSettings>(TabViewTemplateSettings());
-    auto const scaleFactor = SharedHelpers::Is19H1OrHigher() ?
-        static_cast<float>(XamlRoot().RasterizationScale()) :
-        static_cast<float>(winrt::DisplayInformation::GetForCurrentView().RawPixelsPerViewPixel());
 
     auto const height = ActualHeight();
     auto const popupRadius = unbox_value<winrt::CornerRadius>(ResourceAccessor::ResourceLookup(*this, box_value(c_overlayCornerRadiusKey)));
@@ -141,11 +138,11 @@ void TabViewItem::UpdateTabGeometry()
 
     WCHAR strOut[1024];
     StringCchPrintf(strOut, ARRAYSIZE(strOut), data,
-        height - 1.0,
+        height,
         leftCorner, leftCorner, leftCorner, leftCorner, leftCorner,
-        ActualWidth() - (leftCorner + rightCorner + 1.0f / scaleFactor),
+        ActualWidth() - (leftCorner + rightCorner),
         rightCorner, rightCorner, rightCorner, rightCorner,
-        height - (5.0 + rightCorner));
+        height - (4.0f + rightCorner));
 
     const auto geometry = winrt::XamlReader::Load(strOut).try_as<winrt::Geometry>();