feat: WIP: flyout default theme. pending on DynamicResource.

src/Semi.Avalonia.Demo/MainWindow.axaml

@@ -44,5 +44,8 @@
         <TabItem Header="ListBox">
             <pages:ListBoxItem />
         </TabItem>
+        <TabItem Header="Flyout">
+            <pages:FlyoutDemo />
+        </TabItem>
     </TabControl>
 </Window>

src/Semi.Avalonia.Demo/Pages/FlyoutDemo.axaml

@@ -0,0 +1,23 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.FlyoutDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel>
+        <StackPanel>
+            <Button Content="Hello">
+                <Button.Flyout>
+                    <Flyout Placement="Top" ShowMode="Standard">
+                        <StackPanel>
+                            <TextBlock>Hello World</TextBlock>
+                        </StackPanel>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
+        </StackPanel>
+    </StackPanel>
+</UserControl>

src/Semi.Avalonia.Demo/Pages/FlyoutDemo.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.LogicalTree;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class FlyoutDemo : UserControl
+{
+    public FlyoutDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

src/Semi.Avalonia.Demo/Program.cs

@@ -27,7 +27,7 @@ namespace Semi.Avalonia.Demo
         public static AppBuilder BuildAvaloniaApp()
             => AppBuilder.Configure<App>()
                 .UsePlatformDetect()
-                .With(new Win32PlatformOptions(){ UseCompositor = true})
+                .With(new Win32PlatformOptions(){ UseCompositor = false})
                 .LogToTrace();
     }
 }

src/Semi.Avalonia/Controls/Controls.axaml

@@ -5,9 +5,11 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ListBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/PathIcon.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Popup.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/RepeatButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/SelectableTextBlock.axaml" />

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -0,0 +1,44 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type FlyoutPresenter}" TargetType="FlyoutPresenter">
+        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
+        <Setter Property="FlyoutPresenter.Background" Value="White" />
+        <Setter Property="FlyoutPresenter.BorderBrush" Value="#1A000000" />
+        <Setter Property="FlyoutPresenter.BorderThickness" Value="0.5" />
+        <Setter Property="FlyoutPresenter.Padding" Value="8" />
+        <Setter Property="FlyoutPresenter.MinWidth" Value="100" />
+        <Setter Property="FlyoutPresenter.MaxWidth" Value="600" />
+        <Setter Property="FlyoutPresenter.MinHeight" Value="100" />
+        <Setter Property="FlyoutPresenter.MaxHeight" Value="600" />
+        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="FlyoutPresenter.CornerRadius" Value="4" />
+        <Setter Property="FlyoutPresenter.Margin" Value="4" />
+        <Setter Property="FlyoutPresenter.Template">
+            <ControlTemplate TargetType="FlyoutPresenter">
+                <Border
+                    Name="LayoutRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="0 0 8 0 #1A000000"
+                    ClipToBounds="False"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <ContentPresenter
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="Stretch"
+                            VerticalContentAlignment="Stretch"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Popup.axaml

@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type PopupRoot}" TargetType="PopupRoot">
+        <Setter Property="Background" Value="{x:Null}" />
+        <Setter Property="TransparencyLevelHint" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="PopupRoot">
+                <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
+                    <Panel>
+                        <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+                        <VisualLayerManager IsPopup="True">
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Padding="{TemplateBinding Padding}"
+                                Background="{TemplateBinding Background}"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        </VisualLayerManager>
+                    </Panel>
+                </LayoutTransformControl>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Themes/LightTheme.axaml

@@ -1,16 +1,15 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
-    <!-- Add Resources Here -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Light.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Light.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
     <Style Selector=":is(UserControl)">
-        <Setter Property="Theme" Value="{StaticResource {x:Type UserControl}}"></Setter>
+        <Setter Property="Theme" Value="{StaticResource {x:Type UserControl}}" />
     </Style>
 </Styles>