Merge pull request #16 from irihitech/popup

Add Flyout/Popup

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,113 @@
+<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">
+    <Grid
+        HorizontalAlignment="Center"
+        VerticalAlignment="Center"
+        ColumnDefinitions="* * * * *"
+        RowDefinitions="* * * * *">
+        <Button
+            Grid.Row="0"
+            Grid.Column="1"
+            Content="Top Left">
+            <Button.Flyout>
+                <Flyout Content="TopEdgeAlignedLeft" Placement="TopEdgeAlignedLeft" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="0"
+            Grid.Column="2"
+            Content="Top">
+            <Button.Flyout>
+                <Flyout Content="Top" Placement="Top" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="0"
+            Grid.Column="3"
+            Content="Top Right">
+            <Button.Flyout>
+                <Flyout Content="TopEdgeAlignedRight" Placement="TopEdgeAlignedRight" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="1"
+            Grid.Column="0"
+            Content="Left Top">
+            <Button.Flyout>
+                <Flyout Content="LeftEdgeAlignedTop" Placement="LeftEdgeAlignedTop" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="1"
+            Grid.Column="4"
+            Content="Right Top">
+            <Button.Flyout>
+                <Flyout Content="RightEdgeAlignedTop" Placement="RightEdgeAlignedTop" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="2"
+            Grid.Column="0"
+            Content="Left">
+            <Button.Flyout>
+                <Flyout Content="Left" Placement="Left" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="2"
+            Grid.Column="4"
+            Content="Right">
+            <Button.Flyout>
+                <Flyout Content="Right" Placement="Right" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="3"
+            Grid.Column="0"
+            Content="Left Bottom">
+            <Button.Flyout>
+                <Flyout Content="LeftEdgeAlignedBottom" Placement="LeftEdgeAlignedBottom" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="3"
+            Grid.Column="4"
+            Content="Right Bottom">
+            <Button.Flyout>
+                <Flyout Content="RightEdgeAlignedBottom" Placement="RightEdgeAlignedBottom" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="4"
+            Grid.Column="1"
+            Content="Bottom Left">
+            <Button.Flyout>
+                <Flyout Content="BottomEdgeAlignedLeft" Placement="BottomEdgeAlignedLeft" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="4"
+            Grid.Column="2"
+            Content="Bottom">
+            <Button.Flyout>
+                <Flyout Content="Bottom" Placement="Bottom" />
+            </Button.Flyout>
+        </Button>
+        <Button
+            Grid.Row="4"
+            Grid.Column="3"
+            Content="Bottom Right">
+            <Button.Flyout>
+                <Flyout Content="BottomEdgeAlignedRight" Placement="BottomEdgeAlignedRight" />
+            </Button.Flyout>
+        </Button>
+    </Grid>
+
+</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,46 @@
+<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.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="FlyoutPresenter.Background" Value="{DynamicResource FlyoutBackground}" />
+        <Setter Property="FlyoutPresenter.BorderBrush" Value="{DynamicResource FlyoutBorderBrush}" />
+        <Setter Property="FlyoutPresenter.BorderThickness" Value="{DynamicResource FlyoutBorderThickness}" />
+        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <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="{DynamicResource FlyoutBorderBoxShadow}"
+                    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}"
+                            FontWeight="{TemplateBinding FontWeight}" />
+                    </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/Light/Flyout.axaml

@@ -0,0 +1,20 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <SolidColorBrush x:Key="FlyoutBackground" Color="White" />
+    <SolidColorBrush
+        x:Key="FlyoutBorderBrush"
+        Opacity="0.08"
+        Color="#1C1F23" />
+    <FontWeight x:Key="FlyoutFontWeight">400</FontWeight>
+    <Thickness x:Key="FlyoutBorderThickness">1</Thickness>
+    <BoxShadows x:Key="FlyoutBorderBoxShadow">0 0 8 0 #1A000000</BoxShadows>
+    <sys:Double x:Key="FlyoutMinHeight">100</sys:Double>
+    <sys:Double x:Key="FlyoutMinWidth">100</sys:Double>
+    <sys:Double x:Key="FlyoutMaxHeight">600</sys:Double>
+    <sys:Double x:Key="FlyoutMaxWidth">600</sys:Double>
+    <CornerRadius x:Key="FlyoutCornerRadius">6</CornerRadius>
+    <Thickness x:Key="FlyoutPadding">8</Thickness>
+
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Light.axaml

@@ -16,5 +16,6 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </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  -->
     <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/Light/Light.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>