Dyn 4738 custom color picker (#13794)

* DYN-4738-Custom-ColorPicker First version of the customized ColorPicker so it can be used in GroupStyles and in Color Palette node. * DYN-4738-Custom-ColorPicker CustomColorPicker fixed to use only the Basic Colors and hide the Custom Colors. First changes for integrating color picker in Color Palette node. * DYN-4738-Custom-ColorPicker Adapting the CustomColorPicker to be used in the Color Palette node. * DYN-4738-Custom-ColorPicker Refactoring some code and adding comments. * DYN-4738-Custom-ColorPicker Code Review1 Adding comments * DYN-4738-Custom-ColorPicker Code Review2 Reverting code added for debugging.
DynamoDS · Apr 5, 2023 · 9030ede · 9030ede
1 parent adfc4a0
commit 9030ede
Show file tree

Hide file tree

Showing 13 changed files with 881 additions and 38 deletions.
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -48,6 +48,7 @@
     <None Remove="Packages\SplashScreen\build\index.bundle.js" />
     <None Remove="Packages\SplashScreen\build\index.html" />
     <None Remove="UI\Images\Canvas\canvas-button-geometry-scaling.png" />
+    <None Remove="Views\Core\CustomColorPicker.xaml" />
     <None Remove="Views\Core\GeometryScalingPopup.xaml" />
     <None Remove="UI\Images\question-hover-blue-16px.png" />
     <None Remove="Views\SplashScreen\WebApp\splashScreenBackground.png" />
@@ -143,6 +144,11 @@
     <Reference Include="Microsoft.CSharp" />
     <Reference Include="System.Xml" />
     <Reference Include="WindowsBase" />
+	<PackageReference Include="Extended.Wpf.Toolkit" version="3.0.0">
+	  <GeneratePathProperty>true</GeneratePathProperty>
+    <!--Exclude copying the dll because we will handle it in the BinaryCompatibilityOps target -->
+    <ExcludeAssets>runtime</ExcludeAssets>
+	</PackageReference>
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Controls\InstalledPackagesControl.xaml.cs">
@@ -337,6 +343,7 @@
     <Compile Include="Utilities\ResourceUtilities.cs" />
     <Compile Include="ViewModels\Core\Converters\DynamoPythonScriptEditorTextOptions.cs" />
     <Compile Include="ViewModels\Core\Converters\SerializationConverters.cs" />
+    <Compile Include="ViewModels\Core\CustomColorPickerViewModel.cs" />
     <Compile Include="ViewModels\Core\DynamoViewModelBranding.cs" />
     <Compile Include="ViewModels\Core\GeometryScalingViewModel.cs" />
     <Compile Include="ViewModels\Core\HomeWorkspaceViewModel.cs" />
@@ -385,6 +392,7 @@
     <Compile Include="Views\Core\ConnectorContextMenuView.xaml.cs">
       <DependentUpon>ConnectorContextMenuView.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\Core\CustomColorPicker.xaml.cs" />
     <Compile Include="Views\Core\DynamoOpenFileDialog.cs" />
     <Compile Include="Views\Core\ConnectorPinView.xaml.cs">
       <DependentUpon>ConnectorPinView.xaml</DependentUpon>
@@ -553,6 +561,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\Core\CustomColorPicker.xaml">
+      <CopyToOutputDirectory></CopyToOutputDirectory>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\Core\GeometryScalingPopup.xaml">
       <Generator>MSBuild:Compile</Generator>
     </Page>

diff --git a/src/DynamoCoreWpf/UI/Converters.cs b/src/DynamoCoreWpf/UI/Converters.cs
@@ -3641,4 +3641,60 @@ private double GetRelativeLuminance(System.Windows.Media.Color color)
             return 0.2126 * R + 0.7152 * G + 0.0722 * B;
         }
     }
+
+    /// <summary>
+    /// This converter is used to add extra space between the ListBox and the CustomColorPicker border
+    /// </summary>
+    public class AdditionConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if ((value != null) && (parameter != null))
+            {
+                var firstValue = System.Convert.ToDouble(value);
+                var secondValue = double.Parse(parameter as string);
+
+                return firstValue + secondValue;
+            }
+
+            return 0d;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+
+    public class ColorToSolidColorBrushConverter : IValueConverter
+    {
+        /// <summary>
+        /// Converts a Color to a SolidColorBrush.
+        /// </summary>
+        /// <returns>
+        /// A converted SolidColorBrush. If the method returns null, the valid null value is used.
+        /// </returns>
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value != null)
+                return new SolidColorBrush((Color)value);
+
+            return value;
+        }
+
+
+        /// <summary>
+        /// Converts a SolidColorBrush to a Color.
+        /// </summary>
+        /// <returns>
+        /// A converted value. If the method returns null, the valid null value is used.
+        /// </returns>
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value != null)
+                return ((SolidColorBrush)value).Color;
+
+            return value;
+        }
+    }
 }
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml
@@ -187,4 +187,6 @@
     <controls:ListHasMoreThanNItemsToVisibilityConverter x:Key="ListHasMoreThanNItemsToVisibilityConverter" />
     <controls:ObjectTypeConverter x:Key="ObjectTypeConverter" />
     <controls:TextForegroundSaturationColorConverter x:Key="TextForegroundSaturationColorConverter" />
+    <controls:AdditionConverter x:Key="AdditionConverter" />
+    <controls:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter" />
 </ResourceDictionary>
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml
@@ -6,6 +6,8 @@
                     xmlns:nodes="clr-namespace:Dynamo.Nodes;assembly=DynamoCoreWpf"
                     xmlns:dynui="clr-namespace:Dynamo.UI.Controls;assembly=DynamoCoreWpf"
                     xmlns:fa="clr-namespace:FontAwesome.WPF;assembly=FontAwesome.WPF"
+                    xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
+                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                     xmlns:p="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf"
                     xmlns:ui="clr-namespace:Dynamo.UI;assembly=DynamoCoreWpf">
 
@@ -5668,4 +5670,133 @@
         </Style.Triggers>
     </Style>
 
+    <DataTemplate x:Key="ColorItemTemplate">
+        <Grid>
+            <Border Background="White"
+                    BorderBrush="LightGray"
+                    BorderThickness="1"
+                    Margin="1">
+                <Rectangle Width="26"
+                           Height="26">
+                    <Rectangle.Style>
+                        <Style TargetType="Rectangle">
+                            <Setter Property="Fill"
+                                    Value="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}" />
+                        </Style>
+                    </Rectangle.Style>
+                </Rectangle>
+            </Border>
+        </Grid>
+    </DataTemplate>
+
+    <Style x:Key="ColorDisplayStyle"
+           TargetType="ContentControl">
+        <Setter Property="Focusable"
+                Value="False" />
+        <Setter Property="ContentTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <Border Background="{StaticResource CheckerBrush}">
+                        <Rectangle Fill="{Binding SelectedColor, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}, Converter={StaticResource ColorToSolidColorBrushConverter}}" />
+                    </Border>
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding SelectedColor, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
+                         Value="{x:Null}">
+                <Setter Property="Visibility"
+                        Value="Collapsed" />
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style x:Key="ColorItemContainerStyle"
+           TargetType="{x:Type ListBoxItem}">
+        <Setter Property="ToolTip"
+                Value="{Binding Name}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                    <Grid x:Name="mainGrid"
+                          ToolTip="{Binding Name}">
+                        <Grid.Resources>
+                            <Style TargetType="ToolTip">
+                                <Style.Triggers>
+                                    <Trigger Property="Content"
+                                             Value="{x:Static sys:String.Empty}">
+                                        <Setter Property="Visibility"
+                                                Value="Collapsed" />
+                                    </Trigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Grid.Resources>
+                        <ContentPresenter HorizontalAlignment="Center"
+                                          VerticalAlignment="Center" />
+                        <Border BorderThickness="2"
+                                Background="Transparent"
+                                BorderBrush="{StaticResource PreferencesWindowButtonColor}"
+                                x:Name="_outerBorder"
+                                Visibility="{Binding Path=IsColorItemSelected,Converter={StaticResource BooleanToVisibilityConverter}}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                        </Border>
+                        <Border Background="Transparent"
+                                BorderThickness="1"
+                                BorderBrush="Transparent"
+                                x:Name="_innerBorder"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                        </Border>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver"
+                                 Value="True">
+                            <Setter TargetName="_outerBorder"
+                                    Property="BorderBrush"
+                                    Value="{StaticResource PreferencesWindowButtonColor}" />
+                            <Setter TargetName="_innerBorder"
+                                    Property="BorderBrush"
+                                    Value="{StaticResource PreferencesWindowButtonColor}" />
+                        </Trigger>
+                        <DataTrigger Binding="{Binding DisplayColorTooltip, RelativeSource={RelativeSource AncestorType={x:Type xctk:ColorPicker}}}"
+                                     Value="False">
+                            <Setter Property="ToolTip"
+                                    Value="{x:Static sys:String.Empty}"
+                                    TargetName="mainGrid" />
+                        </DataTrigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="ColorListStyle"
+           TargetType="ListBox">
+        <Setter Property="Background"
+                Value="Transparent" />
+        <Setter Property="BorderThickness"
+                Value="0" />
+        <Setter Property="MaxHeight"
+                Value="300" />
+        <!-- ConverterParameter is margin/Padding from Popup-->
+        <Setter Property="Width"
+                Value="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type xctk:ColorPicker}}, Converter={StaticResource AdditionConverter}, ConverterParameter=-18}" />
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <WrapPanel Width="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}, Converter={StaticResource AdditionConverter}, ConverterParameter=-4}" />
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="ItemContainerStyle"
+                Value="{StaticResource ColorItemContainerStyle}" />
+        <Setter Property="ItemTemplate"
+                Value="{StaticResource ColorItemTemplate}" />
+        <Setter Property="SelectionMode"
+                Value="Single" />
+    </Style>
+
+
+
 </ResourceDictionary>