Merge pull request #4134 from robloo/color-picker-fixes

Color picker fixes
CommunityToolkit · Aug 30, 2021 · aecbcad · aecbcad
2 parents 5e4b0b8 + 4fd1609
commit aecbcad
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 94 deletions.
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind
@@ -10,19 +10,11 @@
     <SolidColorBrush Color="{ThemeResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
   </Page.Resources>
 
-  <Grid>
-    <Grid.RowDefinitions>
-      <RowDefinition Height="*" />
-      <RowDefinition Height="*" />
-      <RowDefinition Height="*" />
-      <RowDefinition Height="*" />
-    </Grid.RowDefinitions>
-    <!-- Example 1 -->
-    <StackPanel Grid.Row="0"
-                Orientation="Vertical"
+  <ScrollViewer>
+    <StackPanel Orientation="Vertical"
                 HorizontalAlignment="Center"
-                VerticalAlignment="Center"
                 Spacing="20">
+      <!-- Example 1 -->
       <Border Background="{ThemeResource SystemChromeMediumColor}"
               CornerRadius="4"
               Height="100"
@@ -44,13 +36,7 @@
           </Style>
         </controls:ColorPickerButton.ColorPickerStyle>
       </controls:ColorPickerButton>
-    </StackPanel>
-    <!-- Example 2 -->
-    <StackPanel Grid.Row="1"
-                Orientation="Vertical"
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Spacing="20">
+      <!-- Example 2 -->
       <Border Background="{ThemeResource SystemChromeMediumColor}"
               CornerRadius="4"
               Height="100"
@@ -72,13 +58,7 @@
           </Style>
         </controls:ColorPickerButton.ColorPickerStyle>
       </controls:ColorPickerButton>
-    </StackPanel>
-    <!-- Example 3 -->
-    <StackPanel Grid.Row="2"
-                Orientation="Vertical"
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Spacing="20">
+      <!-- Example 3 -->
       <Border Background="{ThemeResource SystemChromeMediumColor}"
               CornerRadius="4"
               Height="100"
@@ -100,13 +80,7 @@
           </Style>
         </controls:ColorPickerButton.ColorPickerStyle>
       </controls:ColorPickerButton>
-    </StackPanel>
-    <!-- Example 4 -->
-    <StackPanel Grid.Row="3"
-                Orientation="Vertical"
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                Spacing="20">
+      <!-- Example 4 -->
       <Border Background="{ThemeResource SystemChromeMediumColor}"
               CornerRadius="4"
               Height="100"
@@ -130,6 +104,32 @@
           </Style>
         </controls:ColorPickerButton.ColorPickerStyle>
       </controls:ColorPickerButton>
+      <!-- Example 5 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                   VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled <LineBreak />
+          Only Color Palette Shown
+        </TextBlock>
+      </Border>
+      <controls:ColorPickerButton x:Name="ColorPickerButton5"
+                                  SelectedColor="Teal">
+        <controls:ColorPickerButton.ColorPickerStyle>
+          <Style TargetType="controls:ColorPicker">
+            <Setter Property="ColorSpectrumShape" Value="Ring"/>
+            <Setter Property="IsAlphaEnabled" Value="True"/>
+            <Setter Property="IsHexInputVisible" Value="True"/>
+            <Setter Property="IsColorSpectrumVisible" Value="False"/>
+            <Setter Property="IsColorPaletteVisible" Value="True"/>
+            <Setter Property="IsColorChannelTextInputVisible" Value="False"/>
+          </Style>
+        </controls:ColorPickerButton.ColorPickerStyle>
+      </controls:ColorPickerButton>
     </StackPanel>
-  </Grid>
+  </ScrollViewer>
 </Page>
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind
@@ -60,7 +60,7 @@
           Alpha channel enabled
         </TextBlock>
       </Border>
-      <controls:ColorPicker x:Name="ColorPickerButton3"
+      <controls:ColorPicker x:Name="ColorPicker3"
                             Color="Transparent"
                             ColorSpectrumShape="Ring"
                             IsAlphaEnabled="True"
@@ -78,12 +78,33 @@
           Saturation+Value spectrum channels
         </TextBlock>
       </Border>
-      <controls:ColorPicker x:Name="ColorPickerButton4"
+      <controls:ColorPicker x:Name="ColorPicker4"
                             Color="Maroon"
                             ColorSpectrumShape="Ring"
                             ColorSpectrumComponents="SaturationValue"
                             IsAlphaEnabled="True"
                             IsHexInputVisible="True"/>
+      <!-- Example 5 -->
+      <Border Background="{ThemeResource SystemChromeMediumColor}"
+              CornerRadius="4"
+              Height="100"
+              Width="300"
+              Padding="10">
+        <TextBlock TextAlignment="Center"
+                   VerticalAlignment="Center">
+          Ring-shaped spectrum <LineBreak />
+          Alpha channel enabled <LineBreak />
+          Only Color Palette Shown
+        </TextBlock>
+      </Border>
+      <controls:ColorPicker x:Name="ColorPicker5"
+                            Color="Teal"
+                            ColorSpectrumShape="Ring"
+                            IsAlphaEnabled="True"
+                            IsHexInputVisible="True"
+                            IsColorSpectrumVisible="False"
+                            IsColorPaletteVisible="True"
+                            IsColorChannelTextInputVisible="False"/>
     </StackPanel>
   </ScrollViewer>
 </Page>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.Properties.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.Properties.cs
@@ -20,7 +20,9 @@ public partial class ColorPicker
                 nameof(CustomPaletteColors),
                 typeof(ObservableCollection<Windows.UI.Color>),
                 typeof(ColorPicker),
-                new PropertyMetadata(null));
+                new PropertyMetadata(
+                    null,
+                    (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
 
         /// <summary>
         /// Gets the list of custom palette colors.
@@ -38,7 +40,9 @@ public ObservableCollection<Windows.UI.Color> CustomPaletteColors
                 nameof(CustomPaletteColumnCount),
                 typeof(int),
                 typeof(ColorPicker),
-                new PropertyMetadata(4));
+                new PropertyMetadata(
+                    4,
+                    (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
 
         /// <summary>
         /// Gets or sets the number of colors in each row (section) of the custom color palette.
@@ -64,7 +68,9 @@ public int CustomPaletteColumnCount
                 nameof(CustomPalette),
                 typeof(IColorPalette),
                 typeof(ColorPicker),
-                new PropertyMetadata(null));
+                new PropertyMetadata(
+                    null,
+                    (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
 
         /// <summary>
         /// Gets or sets the custom color palette.
@@ -91,7 +97,9 @@ public IColorPalette CustomPalette
                 nameof(IsColorPaletteVisible),
                 typeof(bool),
                 typeof(ColorPicker),
-                new PropertyMetadata(true));
+                new PropertyMetadata(
+                    true,
+                    (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
 
         /// <summary>
         /// Gets or sets a value indicating whether the color palette is visible.