修复颜色选择面板边框显示问题，为颜色选择面板添加显示/隐藏动画

STBBRD · Sep 20, 2024 · 244de8b · 244de8b
1 parent 5f20fc7
commit 244de8b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/ZongziTEK_Blackboard_Sticker/MainWindow.xaml b/ZongziTEK_Blackboard_Sticker/MainWindow.xaml
@@ -6,7 +6,6 @@
         xmlns:local="clr-namespace:ZongziTEK_Blackboard_Sticker"
         mc:Ignorable="d"
         xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern" xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
-        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker"
         Title="ZongziTEK 黑板贴" Height="1080" Width="1920" 
         Background="#00000000" 
         ResizeMode="NoResize" ShowInTaskbar="False"
@@ -71,7 +70,7 @@
                             </ikw:SimpleStackPanel>
                         </Border>
                         <Grid Name="touchGrid" ManipulationStarting="touchGrid_ManipulationStarting" ManipulationDelta="touchGrid_ManipulationDelta" Background="#00000000">
-                            <InkCanvas x:Name="inkCanvas" PreviewTouchDown="inkCanvas_PreviewTouchDown" PreviewTouchUp="inkCanvas_PreviewTouchUp"
+                            <InkCanvas x:Name="inkCanvas" PreviewTouchDown="inkCanvas_PreviewTouchDown" PreviewTouchUp="inkCanvas_PreviewTouchUp" PreviewMouseDown="inkCanvas_PreviewMouseDown"
                            StrokeCollected="inkCanvas_StrokeCollected" StrokeErased="inkCanvas_StrokeErased"
                            IsManipulationEnabled="True" Background="{x:Null}"/>
                         </Grid>
@@ -92,12 +91,12 @@
                                                 HorizontalAlignment="Right" Visibility="{Binding Visibility, ElementName=eraserButton}">
                                             <ui:FontIcon Icon="{x:Static ui:FluentSystemIcons.Edit_20_Regular}" FontSize="24"/>
                                         </Button>
-                                        <Border Name="borderColorPicker" Margin="-100,-480,-124,36" CornerRadius="4" Width="246" Height="450" Visibility="Collapsed" BorderThickness="{Binding BorderThickness, ElementName=buttonExplorer}"
-                                                Background="{DynamicResource {x:Static ui:ThemeKeys.CardBackgroundFillColorDefaultBrushKey}}" BorderBrush="{Binding BorderBrush, ElementName=buttonExplorer}">
+                                        <Border Name="borderColorPicker" Margin="-100,-480,-124,36" CornerRadius="8" Width="246" Height="450" Visibility="Collapsed" BorderThickness="1"
+                                                Background="{DynamicResource {x:Static ui:ThemeKeys.CardBackgroundFillColorDefaultBrushKey}}" BorderBrush="{DynamicResource BorderBrush}">
                                             <ikw:SimpleStackPanel Margin="16" Spacing="12">
                                                 <TextBlock Text="选择画笔颜色" FontSize="24" Foreground="{DynamicResource ForegroundColor}"/>
                                                 <Border Name="borderShowColor" Height="8" CornerRadius="2" Background="White" BorderThickness="1" BorderBrush="#33000000"/>
-                                                <colorpicker:SquarePicker Name="squarePicker" Height="222" ColorChanged="squarePicker_ColorChanged" SelectedColor="White"/>
+                                                <ikw:SquarePicker Name="squarePicker" Height="222" ColorChanged="squarePicker_ColorChanged" SelectedColor="White"/>
                                                 <Grid Height="75">
                                                     <Grid.RowDefinitions>
                                                         <RowDefinition/>

diff --git a/ZongziTEK_Blackboard_Sticker/MainWindow.xaml.cs b/ZongziTEK_Blackboard_Sticker/MainWindow.xaml.cs
@@ -55,6 +55,7 @@ public MainWindow()
             drawingAttributes.StylusTip = StylusTip.Ellipse;
             drawingAttributes.FitToCurve = true;
             squarePicker.SelectedColor = inkCanvas.DefaultDrawingAttributes.Color;
+            originalColorPickerMargin = borderColorPicker.Margin;
 
             // 窗体
             SetWindowMaximized();
@@ -222,8 +223,8 @@ private void penButton_Click(object sender, RoutedEventArgs e)
             {
                 //if (!confirmingClear)
                 //{
-                if (borderColorPicker.Visibility == Visibility.Collapsed) borderColorPicker.Visibility = Visibility.Visible;
-                else borderColorPicker.Visibility = Visibility.Collapsed;
+                if (borderColorPicker.Visibility == Visibility.Collapsed) ShowColorPicker();
+                else HideColorPicker();
                 //}
             }
             else
@@ -234,15 +235,15 @@ private void penButton_Click(object sender, RoutedEventArgs e)
 
         private void eraserButton_Click(object sender, RoutedEventArgs e)
         {
-            borderColorPicker.Visibility = Visibility.Collapsed;
+            HideColorPicker();
             inkCanvas.EditingMode = InkCanvasEditingMode.EraseByStroke;
         }
 
         //bool confirmingClear = false;
 
         private void clearButton_Click(object sender, RoutedEventArgs e)
         {
-            borderColorPicker.Visibility = Visibility.Collapsed;
+            HideColorPicker();
 
             //borderClearConfirm.Visibility = Visibility.Visible;
             //confirmingClear = true;
@@ -342,7 +343,7 @@ private void CheckIsBlackboardLocked()
                 if (GetIsLightTheme()) ToggleButtonLock.Foreground = new SolidColorBrush(Colors.White); else ToggleButtonLock.Foreground = new SolidColorBrush(Colors.Black);
 
                 eraserButton.Visibility = Visibility.Collapsed;
-                borderColorPicker.Visibility = Visibility.Collapsed;
+                HideColorPicker();
 
             }
             else
@@ -406,6 +407,55 @@ private async void HighlightLockState()
             }
         }
 
+        private Thickness originalColorPickerMargin;
+
+        private void ShowColorPicker()
+        {
+            ThicknessAnimation marginAnimation = new()
+            {
+                From = new Thickness(originalColorPickerMargin.Left, originalColorPickerMargin.Top, originalColorPickerMargin.Right, originalColorPickerMargin.Bottom - 50),
+                To = originalColorPickerMargin,
+                Duration = TimeSpan.FromMilliseconds(500),
+                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut }
+            };
+            DoubleAnimation opacityAnimation = new()
+            {
+                From = 0,
+                To = 1,
+                Duration = TimeSpan.FromMilliseconds(500),
+                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut }
+            };
+
+            borderColorPicker.Visibility = Visibility.Visible;
+            borderColorPicker.BeginAnimation(OpacityProperty, opacityAnimation);
+            borderColorPicker.BeginAnimation(MarginProperty, marginAnimation);
+        }
+
+        private async void HideColorPicker()
+        {
+            ThicknessAnimation marginAnimation = new()
+            {
+                From = originalColorPickerMargin,
+                To = new Thickness(originalColorPickerMargin.Left, originalColorPickerMargin.Top, originalColorPickerMargin.Right, originalColorPickerMargin.Bottom - 50),
+                Duration = TimeSpan.FromMilliseconds(250),
+                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn }
+            };
+            DoubleAnimation opacityAnimation = new()
+            {
+                From = 1,
+                To = 0,
+                Duration = TimeSpan.FromMilliseconds(250),
+                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn }
+            };
+
+            borderColorPicker.BeginAnimation(OpacityProperty, opacityAnimation);
+            borderColorPicker.BeginAnimation(MarginProperty, marginAnimation);
+
+            await Task.Delay(250);
+
+            borderColorPicker.Visibility = Visibility.Collapsed;
+        }
+
         private void SaveStrokes()
         {
             FileStream fileStream = new FileStream(GetDataPath() + "sticker.icstk", FileMode.Create);
@@ -448,6 +498,11 @@ private void LoadStrokes()
             SaveStrokes();
         }*/
 
+        private void inkCanvas_PreviewMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            HideColorPicker();
+        }
+
         private List<int> dec = new List<int>(); //记录触摸设备ID
         Point centerPoint; //中心点
 
@@ -533,8 +588,6 @@ private void inkCanvas_PreviewTouchUp(object sender, TouchEventArgs e)
 
         private void inkCanvas_StrokeCollected(object sender, InkCanvasStrokeCollectedEventArgs e)
         {
-            borderColorPicker.Visibility = Visibility.Collapsed;
-
             // 检查是否是压感笔书写
             foreach (StylusPoint stylusPoint in e.Stroke.StylusPoints)
             {

diff --git a/ZongziTEK_Blackboard_Sticker/ZongziTEK_Blackboard_Sticker.csproj b/ZongziTEK_Blackboard_Sticker/ZongziTEK_Blackboard_Sticker.csproj
@@ -400,9 +400,6 @@
     <PackageReference Include="Newtonsoft.Json">
       <Version>13.0.3</Version>
     </PackageReference>
-    <PackageReference Include="PixiEditor.ColorPicker">
-      <Version>3.4.1</Version>
-    </PackageReference>
   </ItemGroup>
   <ItemGroup>
     <Resource Include="Resources\ThisPC.ico" />