增加ColorPicker使用

SpineViewer/Utils/BackgroundColorToForegroundColor.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace SpineViewer.Utils
+{
+    public class BackgroundToForegroundConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var color = Colors.White;
+            if (value is SolidColorBrush brush)
+            {
+                color = brush.Color;
+            }
+            else if (value is Color c)
+            {
+                color = c;
+            }
+
+            if (color.A < 128)
+                return Brushes.Black;
+
+            // 计算亮度 (使用标准加权公式)
+            double brightness = (0.299 * color.R + 0.587 * color.G + 0.114 * color.B) / 255.0;
+            return brightness < 0.5 ? Brushes.White : Brushes.Black;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

SpineViewer/ViewModels/Exporters/FFmpegVideoExporterViewModel.cs

@@ -25,8 +25,8 @@ namespace SpineViewer.ViewModels.Exporters
             get => _format;
             set
             {
-                if (SetProperty(ref _format, value))
+                if (!SetProperty(ref _format, value))
-                {
+                    return;
                 OnPropertyChanged(nameof(EnableParamLoop));
                 OnPropertyChanged(nameof(EnableParamQuality));
                 OnPropertyChanged(nameof(EnableParamLossless));
@@ -35,7 +35,6 @@ namespace SpineViewer.ViewModels.Exporters
                 OnPropertyChanged(nameof(EnableParamProfile));
             }
         }
-        }
         protected FFmpegVideoExporter.VideoFormat _format = FFmpegVideoExporter.VideoFormat.Mp4;
 
         public bool Loop { get => _loop; set => SetProperty(ref _loop, value); }

SpineViewer/ViewModels/MainWindow/SFMLRendererViewModel.cs

@@ -47,11 +47,6 @@ namespace SpineViewer.ViewModels.MainWindow
         /// </summary>
         private readonly SFML.Graphics.VertexArray _selectedBackgroundVertices = new(SFML.Graphics.PrimitiveType.Quads, 4); // XXX: 暂时未使用 Dispose 释放
 
-        /// <summary>
-        /// 预览画面坐标轴颜色
-        /// </summary>
-        private static readonly SFML.Graphics.Color _axisColor = new(220, 220, 220);
-
         /// <summary>
         /// 坐标轴顶点缓冲区
         /// </summary>
@@ -178,10 +173,21 @@ namespace SpineViewer.ViewModels.MainWindow
         public Color BackgroundColor
         {
             get => Color.FromRgb(_backgroundColor.R, _backgroundColor.G, _backgroundColor.B);
-            set => SetProperty(BackgroundColor, value, v => _backgroundColor = new(value.R, value.G, value.B));
+            set
+            {
+                if (!SetProperty(BackgroundColor, value, v => _backgroundColor = new(value.R, value.G, value.B)))
+                    return;
+                var b = (0.299 * value.R + 0.587 * value.G + 0.114 * value.B) / 255.0;
+                _axisColor = b < 0.5 ? SFML.Graphics.Color.White : SFML.Graphics.Color.Black;
+            }
         }
         private SFML.Graphics.Color _backgroundColor = new(105, 105, 105);
 
+        /// <summary>
+        /// 预览画面坐标轴颜色
+        /// </summary>
+        private SFML.Graphics.Color _axisColor = SFML.Graphics.Color.White;
+
         public string BackgroundImagePath
         {
             get => _backgroundImagePath;

SpineViewer/Views/ExporterDialogs/CustomFFmpegExporterDialog.xaml

@@ -5,6 +5,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:hc="https://handyorg.github.io/handycontrol"
         xmlns:local="clr-namespace:SpineViewer.Views.ExporterDialogs"
+        xmlns:utils="clr-namespace:SpineViewer.Utils"
         xmlns:exporters="clr-namespace:SpineViewer.ViewModels.Exporters"
         d:DataContext="{d:DesignInstance Type=exporters:CustomFFmpegExporterViewModel}"
         mc:Ignorable="d"
@@ -13,6 +14,9 @@
         Height="800"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
+    <Window.Resources>
+        <utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
+    </Window.Resources>
     <DockPanel>
         <Border DockPanel.Dock="Bottom">
             <WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
                                 </Grid.ColumnDefinitions>
                                 <Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 <DockPanel Grid.Column="1">
-                                    <Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
+                                    <Border DockPanel.Dock="Right">
+                                        <Popup x:Name="_colorPopup" Placement="Right">
+                                            <hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
+                                        </Popup>
+                                    </Border>
+                                    <Button DockPanel.Dock="Right" 
+                                            Content="..." 
+                                            Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
+                                            Click="ButtonPickColor_Click">
                                         <Button.Background>
                                             <SolidColorBrush Color="{Binding BackgroundColor}"/>
                                         </Button.Background>
                                     </Button>
-                                    <TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                    <TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 </DockPanel>
                             </Grid>
 

SpineViewer/Views/ExporterDialogs/CustomFFmpegExporterDialog.xaml.cs

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
 
         private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
         {
+            _colorPopup.IsOpen = !_colorPopup.IsOpen;
+        }
 
+        private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
+        {
+            _colorPopup.IsOpen = false;
+            var color = e.Info;
+            var vm = (BaseExporterViewModel)DataContext;
+            vm.BackgroundColor = color;
+        }
+
+        private void ColorPicker_Canceled(object sender, EventArgs e)
+        {
+            _colorPopup.IsOpen = false;
         }
     }
 }

SpineViewer/Views/ExporterDialogs/FFmpegVideoExporterDialog.xaml

@@ -5,6 +5,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:hc="https://handyorg.github.io/handycontrol"
         xmlns:local="clr-namespace:SpineViewer.Views.ExporterDialogs"
+        xmlns:utils="clr-namespace:SpineViewer.Utils"
         xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
         d:DataContext="{d:DesignInstance Type=vmexp:FFmpegVideoExporterViewModel}"
         mc:Ignorable="d"
@@ -13,6 +14,9 @@
         Height="750"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
+    <Window.Resources>
+        <utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
+    </Window.Resources>
     <DockPanel>
         <Border DockPanel.Dock="Bottom">
             <WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
                                 </Grid.ColumnDefinitions>
                                 <Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 <DockPanel Grid.Column="1">
-                                    <Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
+                                    <Border DockPanel.Dock="Right">
+                                        <Popup x:Name="_colorPopup" Placement="Right">
+                                            <hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
+                                        </Popup>
+                                    </Border>
+                                    <Button DockPanel.Dock="Right" 
+                                            Content="..." 
+                                            Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
+                                            Click="ButtonPickColor_Click">
                                         <Button.Background>
                                             <SolidColorBrush Color="{Binding BackgroundColor}"/>
                                         </Button.Background>
                                     </Button>
-                                    <TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                    <TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 </DockPanel>
                             </Grid>
 

SpineViewer/Views/ExporterDialogs/FFmpegVideoExporterDialog.xaml.cs

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
 
         private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
         {
+            _colorPopup.IsOpen = !_colorPopup.IsOpen;
+        }
 
+        private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
+        {
+            _colorPopup.IsOpen = false;
+            var color = e.Info;
+            var vm = (BaseExporterViewModel)DataContext;
+            vm.BackgroundColor = color;
+        }
+
+        private void ColorPicker_Canceled(object sender, EventArgs e)
+        {
+            _colorPopup.IsOpen = false;
         }
     }
 }

SpineViewer/Views/ExporterDialogs/FrameExporterDialog.xaml

@@ -5,6 +5,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:hc="https://handyorg.github.io/handycontrol"
         xmlns:local="clr-namespace:SpineViewer.Views"
+        xmlns:utils="clr-namespace:SpineViewer.Utils"
         xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
         d:DataContext="{d:DesignInstance Type=vmexp:FrameExporterViewModel}"
         mc:Ignorable="d"
@@ -13,6 +14,9 @@
         Height="480"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
+    <Window.Resources>
+        <utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
+    </Window.Resources>
     <DockPanel>
         <Border DockPanel.Dock="Bottom">
             <WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
                                 </Grid.ColumnDefinitions>
                                 <Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 <DockPanel Grid.Column="1">
-                                    <Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
+                                    <Border DockPanel.Dock="Right">
+                                        <Popup x:Name="_colorPopup" Placement="Right">
+                                            <hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
+                                        </Popup>
+                                    </Border>
+                                    <Button DockPanel.Dock="Right" 
+                                            Content="..." 
+                                            Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
+                                            Click="ButtonPickColor_Click">
                                         <Button.Background>
                                             <SolidColorBrush Color="{Binding BackgroundColor}"/>
                                         </Button.Background>
                                     </Button>
-                                    <TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                    <TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 </DockPanel>
                             </Grid>
 

SpineViewer/Views/ExporterDialogs/FrameExporterDialog.xaml.cs

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
 
         private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
         {
+            _colorPopup.IsOpen = !_colorPopup.IsOpen;
+        }
 
+        private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
+        {
+            _colorPopup.IsOpen = false;
+            var color = e.Info;
+            var vm = (BaseExporterViewModel)DataContext;
+            vm.BackgroundColor = color;
+        }
+
+        private void ColorPicker_Canceled(object sender, EventArgs e)
+        {
+            _colorPopup.IsOpen = false;
         }
     }
 }

SpineViewer/Views/ExporterDialogs/FrameSequenceExporterDialog.xaml

@@ -5,6 +5,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:hc="https://handyorg.github.io/handycontrol"
         xmlns:local="clr-namespace:SpineViewer.Views"
+        xmlns:utils="clr-namespace:SpineViewer.Utils"
         xmlns:vmexp="clr-namespace:SpineViewer.ViewModels.Exporters"
         d:DataContext="{d:DesignInstance Type=vmexp:FrameSequenceExporterViewModel}"
         mc:Ignorable="d"
@@ -13,6 +14,9 @@
         Height="550"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
+    <Window.Resources>
+        <utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
+    </Window.Resources>
     <DockPanel>
         <Border DockPanel.Dock="Bottom">
             <WrapPanel HorizontalAlignment="Center">
@@ -105,12 +109,20 @@
                                 </Grid.ColumnDefinitions>
                                 <Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 <DockPanel Grid.Column="1">
-                                    <Button DockPanel.Dock="Right" Content="..." Click="ButtonPickColor_Click">
+                                    <Border DockPanel.Dock="Right">
+                                        <Popup x:Name="_colorPopup" Placement="Right">
+                                            <hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
+                                        </Popup>
+                                    </Border>
+                                    <Button DockPanel.Dock="Right" 
+                                            Content="..." 
+                                            Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
+                                            Click="ButtonPickColor_Click">
                                         <Button.Background>
                                             <SolidColorBrush Color="{Binding BackgroundColor}"/>
                                         </Button.Background>
                                     </Button>
-                                    <TextBox x:Name="_colorTextBox" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                    <TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
                                 </DockPanel>
                             </Grid>
 

SpineViewer/Views/ExporterDialogs/FrameSequenceExporterDialog.xaml.cs

@@ -44,7 +44,20 @@ namespace SpineViewer.Views.ExporterDialogs
 
         private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
         {
+            _colorPopup.IsOpen = !_colorPopup.IsOpen;
+        }
 
+        private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
+        {
+            _colorPopup.IsOpen = false;
+            var color = e.Info;
+            var vm = (BaseExporterViewModel)DataContext;
+            vm.BackgroundColor = color;
+        }
+
+        private void ColorPicker_Canceled(object sender, EventArgs e)
+        {
+            _colorPopup.IsOpen = false;
         }
     }
 }

SpineViewer/Views/MainWindow.xaml

@@ -37,6 +37,7 @@
             </Style.Triggers>
         </Style>
         <utils:StringFormatMultiValueConverter x:Key="StrFmtCvter"/>
+        <utils:BackgroundToForegroundConverter x:Key="Bg2FgCvter"/>
     </Window.Resources>
 
     <Window.TaskbarItemInfo>
@@ -941,7 +942,22 @@
                                             <ColumnDefinition Width="*"/>
                                         </Grid.ColumnDefinitions>
                                         <Label Content="{DynamicResource Str_BackgroundColor}" ToolTip="#AARRGGBB"/>
-                                        <TextBox Grid.Column="1" Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                        <DockPanel Grid.Column="1">
+                                            <Border DockPanel.Dock="Right">
+                                                <Popup x:Name="_colorPopup" Placement="Right">
+                                                    <hc:ColorPicker Confirmed="ColorPicker_Confirmed" Canceled="ColorPicker_Canceled"/>
+                                                </Popup>
+                                            </Border>
+                                            <Button DockPanel.Dock="Right"
+                                                    Content="..."
+                                                    Foreground="{Binding BackgroundColor, Converter={StaticResource Bg2FgCvter}}"
+                                                    Click="ButtonPickColor_Click">
+                                                <Button.Background>
+                                                    <SolidColorBrush Color="{Binding BackgroundColor}"/>
+                                                </Button.Background>
+                                            </Button>
+                                            <TextBox Text="{Binding BackgroundColor}" ToolTip="#AARRGGBB"/>
+                                        </DockPanel>
                                     </Grid>
 
                                     <!-- 背景图案 -->

SpineViewer/Views/MainWindow.xaml.cs

@@ -8,6 +8,7 @@ using SpineViewer.Natives;
 using SpineViewer.Resources;
 using SpineViewer.Services;
 using SpineViewer.Utils;
+using SpineViewer.ViewModels.Exporters;
 using SpineViewer.ViewModels.MainWindow;
 using System.Collections.Specialized;
 using System.ComponentModel;
@@ -253,6 +254,28 @@ public partial class MainWindow : Window
 
     #endregion
 
+    #region ColorPicker 弹窗事件处理
+
+    private void ButtonPickColor_Click(object sender, RoutedEventArgs e)
+    {
+        _colorPopup.IsOpen = !_colorPopup.IsOpen;
+    }
+
+    private void ColorPicker_Confirmed(object sender, HandyControl.Data.FunctionEventArgs<Color> e)
+    {
+        _colorPopup.IsOpen = false;
+        var color = e.Info;
+        var vm = ((MainWindowViewModel)DataContext).SFMLRendererViewModel;
+        vm.BackgroundColor = color;
+    }
+
+    private void ColorPicker_Canceled(object sender, EventArgs e)
+    {
+        _colorPopup.IsOpen = false;
+    }
+
+    #endregion
+
     #region ViewModel PropertyChanged 事件处理
 
     private void SFMLRendererViewModel_PropertyChanged(object? sender, PropertyChangedEventArgs e)
@@ -709,11 +732,10 @@ public partial class MainWindow : Window
     private void DebugMenuItem_Click(object sender, RoutedEventArgs e)
     {
 #if DEBUG
-        var a = _rootGrid.ColumnDefinitions[0].Width;
+
-        var b = _rootGrid.ColumnDefinitions[1].Width;
+        var res = HandyControl.Controls.Dialog.Show<HandyControl.Controls.ColorPicker>();
-        var c = _rootGrid.ColumnDefinitions[2].Width;
+
-        Debug.WriteLine(a);
+        return;
-        Debug.WriteLine(_rootGrid.ColumnDefinitions[0].Width.IsStar);
 #endif
     }
 }