From 4d3c9630c3adca1d7426bd1d12af27ccd23b3df0 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:35:51 +0800
Subject: [PATCH] fix: fix Flyout Placement.

---
 .../Pages/ColorPickerDemo.axaml               | 86 ++++++++++---------
 .../Controls/ColorPicker.axaml                |  2 +-
 src/Semi.Avalonia.ColorPicker/Shared.axaml    |  1 +
 3 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 29451c7..65a3b2f 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -9,46 +9,48 @@
     d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal"
-            Spacing="20">
-            <ColorView ColorSpectrumShape="Ring" />
-            <ColorView ColorSpectrumShape="Box" />
-            <ColorView Palette="{DynamicResource SemiColorPalette}" />
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ColorView ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal">
+                <ColorView
+                    Theme="{StaticResource SimpleColorView}"
+                    IsAlphaVisible="True"
+                    HsvColor="hsv(120,11%,10%)" />
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <controls:FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+
+                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
+                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
+            </StackPanel>
         </StackPanel>
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal">
-            <ColorView
-                Theme="{StaticResource SimpleColorView}"
-                IsAlphaVisible="True"
-                HsvColor="hsv(120,11%,10%)" />
-        </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker ColorSpectrumShape="Ring">
-                <ColorPicker.Palette>
-                    <controls:FlatHalfColorPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            <ColorPicker ColorSpectrumShape="Box">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            
-            <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-        </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker Theme="{StaticResource SimpleColorPicker}"
-                HsvColor="hsv(120,11%,10%)" />
-            <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
-                HsvColor="hsv(120,11%,10%)" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index aca0643..c4a05e4 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -538,7 +538,7 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index 08bc9af..a85aaf9 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -29,4 +29,5 @@
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
     
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
+    <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>
\ No newline at end of file