Merge pull request #6789 from AvaloniaUI/bugfix/transparent-popup-issue

Fix Default theme popup backgrounds

src/Avalonia.Themes.Default/AutoCompleteBox.xaml

@@ -21,7 +21,8 @@
                  MaxHeight="{TemplateBinding MaxDropDownHeight}"
                  PlacementTarget="{TemplateBinding}"
                  IsLightDismissEnabled="True">
-            <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+            <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                     BorderThickness="1">
               <ListBox Name="PART_SelectingItemsControl"
                        BorderThickness="0"

src/Avalonia.Themes.Default/ComboBox.xaml

@@ -69,7 +69,8 @@
                    MaxHeight="{TemplateBinding MaxDropDownHeight}"
                    PlacementTarget="{TemplateBinding}"
                    IsLightDismissEnabled="True">
-              <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                      BorderBrush="{DynamicResource ThemeBorderMidBrush}"                      
                       BorderThickness="1">
                 <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                               VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">

src/Avalonia.Themes.Default/ContextMenu.xaml

@@ -1,4 +1,5 @@
 <Style xmlns="https://github.com/avaloniaui" Selector="ContextMenu">
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
     <Setter Property="BorderThickness" Value="1"/>
     <Setter Property="Padding" Value="4,2"/>

src/Avalonia.Themes.Default/FlyoutPresenter.xaml

@@ -2,7 +2,7 @@
   <Style Selector="FlyoutPresenter">
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Stretch" />
-    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="Padding" Value="4" />

src/Avalonia.Themes.Default/MenuFlyoutPresenter.xaml

@@ -1,6 +1,6 @@
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="MenuFlyoutPresenter">
-    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />

src/Avalonia.Themes.Default/MenuItem.xaml

@@ -62,7 +62,7 @@
                    PlacementMode="Right"
                    IsLightDismissEnabled="False"
                    IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}">
-              <Border Background="{TemplateBinding Background}"
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
                       BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                 <ScrollViewer Classes="menuscroller">                  
@@ -113,7 +113,7 @@
                    IsLightDismissEnabled="True"
                    OverlayInputPassThroughElement="{Binding $parent[Menu]}"
                    IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}">
-              <Border Background="{TemplateBinding Background}"
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
                       BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                 <ScrollViewer Classes="menuscroller">

src/Avalonia.Themes.Default/OverlayPopupHost.xaml

@@ -1,23 +1,21 @@
 <Style xmlns="https://github.com/avaloniaui" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Selector="OverlayPopupHost">
-  <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
+  <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
-  <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>
+  <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
   <Setter Property="FontFamily" Value="{x:Static FontFamily.Default}" />
   <Setter Property="FontWeight" Value="400" />
   <Setter Property="FontStyle" Value="Normal" />
   <Setter Property="Template">
     <ControlTemplate>
-      <Panel>
+      <!--  Do not forget to update Templated_Control_With_Popup_In_Template_Should_Set_TemplatedParent test  -->
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+      <VisualLayerManager IsPopup="True">
-        <VisualLayerManager IsPopup="True">
+        <ContentPresenter Name="PART_ContentPresenter"
-          <ContentPresenter Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
-                            Background="{TemplateBinding Background}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding Content}"
-                            Content="{TemplateBinding Content}"
+                          Padding="{TemplateBinding Padding}"/>
-                            Padding="{TemplateBinding Padding}"/>
+      </VisualLayerManager>
-        </VisualLayerManager>
-      </Panel>
     </ControlTemplate>
   </Setter>
 </Style>

src/Avalonia.Themes.Default/PopupRoot.xaml

@@ -1,6 +1,8 @@
 <Style xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Selector="PopupRoot">
+  <Setter Property="Background" Value="{x:Null}"/>
+  <Setter Property="TransparencyLevelHint" Value="Transparent" />
   <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
   <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>
   <Setter Property="FontFamily" Value="{x:Static FontFamily.Default}" />

src/Avalonia.Themes.Fluent/Controls/OverlayPopupHost.xaml

@@ -6,16 +6,13 @@
   <Setter Property="FontStyle" Value="Normal" />
   <Setter Property="Template">
     <ControlTemplate>
-      <Panel>
+      <VisualLayerManager IsPopup="True">
-        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+        <ContentPresenter Name="PART_ContentPresenter"
-        <VisualLayerManager IsPopup="True">
+                          Background="{TemplateBinding Background}"
-          <ContentPresenter Name="PART_ContentPresenter"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Background="{TemplateBinding Background}"
+                          Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Padding="{TemplateBinding Padding}"/>
-                            Content="{TemplateBinding Content}"
+      </VisualLayerManager>
-                            Padding="{TemplateBinding Padding}"/>
-        </VisualLayerManager>
-      </Panel>
     </ControlTemplate>
   </Setter>
 </Style>

src/Avalonia.Themes.Fluent/Controls/PopupRoot.xaml

@@ -1,6 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Style Selector="PopupRoot">
+    <Setter Property="Background" Value="{x:Null}"/>
     <Setter Property="TransparencyLevelHint" Value="Transparent" />
     <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}"/>

tests/Avalonia.Controls.UnitTests/Primitives/PopupTests.cs

@@ -294,6 +294,7 @@ namespace Avalonia.Controls.UnitTests.Primitives
         [Fact]
         public void Templated_Control_With_Popup_In_Template_Should_Set_TemplatedParent()
         {
+            // Test uses OverlayPopupHost default template
             using (CreateServices())
             {
                 PopupContentControl target;
@@ -316,33 +317,63 @@ namespace Avalonia.Controls.UnitTests.Primitives
                 var children = popupRoot.GetVisualDescendants().ToList();
                 var types = children.Select(x => x.GetType().Name).ToList();
 
-                Assert.Equal(
+                if (UsePopupHost)
-                    new[]
+                {
-                    {
+                    Assert.Equal(
-                        "Panel",
+                        new[]
-                        "Border",
+                        {
-                        "VisualLayerManager",
+                            "VisualLayerManager",
-                        "ContentPresenter",
+                            "ContentPresenter",
-                        "ContentPresenter",
+                            "ContentPresenter",
-                        "Border",
+                            "Border",
-                    },
+                        },
-                    types);
+                        types);
+                }
+                else
+                {
+                    Assert.Equal(
+                        new[]
+                        {
+                            "Panel",
+                            "Border",
+                            "VisualLayerManager",
+                            "ContentPresenter",
+                            "ContentPresenter",
+                            "Border",
+                        },
+                        types);
+                }
 
                 var templatedParents = children
                     .OfType<IControl>()
                     .Select(x => x.TemplatedParent).ToList();
 
-                Assert.Equal(
+                if (UsePopupHost)
-                    new object[]
+                {
-                    {
+                    Assert.Equal(
-                        popupRoot,
+                        new object[]
-                        popupRoot,
+                        {
-                        popupRoot,
+                            popupRoot,
-                        popupRoot,
+                            popupRoot,
-                        target,
+                            target,
-                        null,
+                            null,
-                    },
+                        },
-                    templatedParents);
+                        templatedParents);
+                }
+                else
+                {
+                    Assert.Equal(
+                        new object[]
+                        {
+                            popupRoot,
+                            popupRoot,
+                            popupRoot,
+                            popupRoot,
+                            target,
+                            null,
+                        },
+                        templatedParents);
+                }
             }
         }