ControlCatalog: improve transparent appearance (#21441)

* ControlCatalog: improve transparent appearance

* Update AvaloniaUI.DiagnosticsSupport to 2.2.1

* Make TransparentStyles AOT compatible

Directory.Packages.props

@@ -7,7 +7,7 @@
     <PackageVersion Include="Appium.WebDriver" Version="5.2.0" />
     <PackageVersion Include="Avalonia.Angle.Windows.Natives" Version="2.1.27548.20260419" />
     <PackageVersion Include="Avalonia.BuildServices" Version="11.3.2" />
-    <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.0-beta3" />
+    <PackageVersion Include="AvaloniaUI.DiagnosticsSupport" Version="2.2.1" />
     <PackageVersion Include="BenchmarkDotNet" Version="0.15.6" />
     <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.0" />
     <PackageVersion Include="Dotnet.Bundle" Version="0.9.13" />

samples/ControlCatalog/MainView.xaml

@@ -25,6 +25,9 @@
     <ResourceDictionary>
       <x:Double x:Key="TabbedPageTabItemHeaderFontSize">20</x:Double>
       <Thickness x:Key="TabbedPageTabStripPadding">10</Thickness>
+      <ControlTheme x:Key="{x:Type local:MainView}"
+                    TargetType="local:MainView"
+                    BasedOn="{StaticResource {x:Type DrawerPage}}" />
     </ResourceDictionary>
   </DrawerPage.Resources>
   <DrawerPage.Styles>
@@ -90,7 +93,8 @@
                 Header="Settings"
                 Margin="0"
                 BorderThickness="0"
-                ExpandDirection="Up">
+                ExpandDirection="Up"
+                x:Name="SettingsExpander">
         <StackPanel Width="152" Spacing="8">
           <ComboBox x:Name="Decorations"
                     HorizontalAlignment="Stretch"

samples/ControlCatalog/MainView.xaml.cs

@@ -12,7 +12,7 @@ namespace ControlCatalog
 {
     public partial class MainView : DrawerPage
     {
-        private Action? _disposeTransparencySetters;
+        private readonly TransparentStyles _transparentStyles = new();
 
         public MainView()
         {
@@ -25,6 +25,8 @@ namespace ControlCatalog
         private const double WideBreakpoint = 1008;
         private const double NarrowBreakpoint = 640;
 
+        protected override Type StyleKeyOverride => typeof(MainView);
+
         private void MainView_Loaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
         {
             if (DataContext == null)
@@ -120,21 +122,21 @@ namespace ControlCatalog
 
         private void TransparencyLevels_SelectionChanged(object? sender, SelectionChangedEventArgs e)
         {
-            _disposeTransparencySetters?.Invoke();
-
             if (TopLevel.GetTopLevel(this) is { } topLevel && e.AddedItems.Count > 0 && e.AddedItems[0] is WindowTransparencyLevel transparencyLevel)
             {
                 topLevel.TransparencyLevelHint = [transparencyLevel];
 
                 if (topLevel.ActualTransparencyLevel != WindowTransparencyLevel.None &&
-                    topLevel.ActualTransparencyLevel == transparencyLevel)
+                    transparencyLevel != WindowTransparencyLevel.None)
+                {
+                    topLevel.Background = new ImmutableSolidColorBrush(Colors.Gray, 0.2);
+                    if (!topLevel.Styles.Contains(_transparentStyles))
+                        topLevel.Styles.Add(_transparentStyles);
+                }
+                else
                 {
-                    var transparentBrush = new ImmutableSolidColorBrush(Colors.White, 0);
+                    topLevel.Background = null;
-                    var semiTransparentBrush = new ImmutableSolidColorBrush(Colors.Gray, 0.2);
+                    topLevel.Styles.Remove(_transparentStyles);
-                    _disposeTransparencySetters =
-                        (Action)topLevel.SetValue(BackgroundProperty, transparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
-                        SetValue(BackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
-                        SetValue(DrawerPage.DrawerBackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose;
                 }
             }
         }

samples/ControlCatalog/MainWindow.xaml

@@ -12,7 +12,6 @@
         CanResize="{Binding CanResize}"
         CanMinimize="{Binding CanMinimize}"
         CanMaximize="{Binding CanMaximize}"
-        Background="Transparent"
         x:Class="ControlCatalog.MainWindow" WindowState="{Binding WindowState, Mode=TwoWay}"
         x:DataType="vm:MainWindowViewModel">
   <NativeMenu.Menu>
@@ -60,11 +59,20 @@
     <Panel Margin="{Binding $parent[local:MainWindow].OffScreenMargin}">
       <local:MainView Margin="{Binding $parent[local:MainWindow].WindowDecorationMargin}" />
     </Panel>
-    <Border IsVisible="{Binding ExtendClientAreaEnabled}" BorderThickness="1 1 1 0" CornerRadius="4 4 0 0" BorderBrush="#55000000" Height="22" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="250 8 0 0">
+    <Border IsVisible="{Binding ExtendClientAreaEnabled}"
+            BorderThickness="1"
+            CornerRadius="4"
+            BorderBrush="#55000000"
+            VerticalAlignment="Top"
+            HorizontalAlignment="Left"
+            Margin="250,0,0,0"
+            Height="{Binding $parent[local:MainWindow].WindowDecorationMargin.Top}">
       <Border.Background>
-        <SolidColorBrush Color="White" Opacity="0.7" />
+        <SolidColorBrush Color="DodgerBlue" Opacity="0.7" />
       </Border.Background>
-      <TextBlock Margin="5 5 5 0" Text="Content In Title Bar" />
+      <TextBlock Text="Content In Title Bar"
+                 Margin="4"
+                 VerticalAlignment="Center" />
     </Border>
   </Panel>
 </Window>

samples/ControlCatalog/TransparentStyles.axaml

@@ -0,0 +1,25 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:local="clr-namespace:ControlCatalog"
+        x:Class="ControlCatalog.TransparentStyles">
+
+  <!-- Only used when WindowTransparencyLevel != None -->
+
+  <Styles.Resources>
+    <SolidColorBrush x:Key="NavigationBarBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="TitleBarBackgroundBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver" Color="#33808080" />
+    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPressed" Color="#66808080" />
+  </Styles.Resources>
+
+  <Style Selector="local|MainView">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="DrawerBackground" Value="Transparent" />
+
+    <Style Selector="^ TabbedPage">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+  </Style>
+
+</Styles>

samples/ControlCatalog/TransparentStyles.axaml.cs

@@ -0,0 +1,5 @@
+using Avalonia.Styling;
+
+namespace ControlCatalog;
+
+public class TransparentStyles : Styles;