From 90e8a34aaba519a2aee86cc50284d30b47d0c096 Mon Sep 17 00:00:00 2001 From: robloo Date: Mon, 26 Jul 2021 22:50:01 -0400 Subject: [PATCH 1/6] Ensure only visible tabs are selected --- .../ColorPicker/ColorPicker.cs | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs index 12a20c8f4cc..99523f15ecb 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs @@ -40,6 +40,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls [TemplatePart(Name = nameof(ColorPicker.CheckeredBackground8Border), Type = typeof(Border))] [TemplatePart(Name = nameof(ColorPicker.CheckeredBackground9Border), Type = typeof(Border))] [TemplatePart(Name = nameof(ColorPicker.CheckeredBackground10Border), Type = typeof(Border))] + [TemplatePart(Name = nameof(ColorPicker.ColorPanelSelector), Type = typeof(ListBox))] [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumControl), Type = typeof(ColorSpectrum))] [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumAlphaSlider), Type = typeof(ColorPickerSlider))] [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumThirdDimensionSlider), Type = typeof(ColorPickerSlider))] @@ -78,6 +79,7 @@ public partial class ColorPicker : Microsoft.UI.Xaml.Controls.ColorPicker private Color? updatedRgbColor = null; private DispatcherQueueTimer dispatcherQueueTimer = null; + private ListBox ColorPanelSelector; private ColorSpectrum ColorSpectrumControl; private ColorPickerSlider ColorSpectrumAlphaSlider; private ColorPickerSlider ColorSpectrumThirdDimensionSlider; @@ -177,6 +179,8 @@ protected override void OnApplyTemplate() // We need to disconnect old events first this.ConnectEvents(false); + this.ColorPanelSelector = this.GetTemplateChild(nameof(ColorPanelSelector)); + this.ColorSpectrumControl = this.GetTemplateChild(nameof(ColorSpectrumControl)); this.ColorSpectrumAlphaSlider = this.GetTemplateChild(nameof(ColorSpectrumAlphaSlider)); this.ColorSpectrumThirdDimensionSlider = this.GetTemplateChild(nameof(ColorSpectrumThirdDimensionSlider)); @@ -216,6 +220,7 @@ protected override void OnApplyTemplate() base.OnApplyTemplate(); this.UpdateVisualState(false); + this.ValidateSelectedPanel(); this.isInitialized = true; this.SetActiveColorRepresentation(ColorRepresentation.Rgba); this.UpdateColorControlValues(); // TODO: This will also connect events after, can we optimize vs. doing it twice with the ConnectEvents above? @@ -1065,6 +1070,48 @@ private void SetDefaultPalette() return; } + /// + /// Validates and updates the current 'tab' or 'panel' selection. + /// If the currently selected tab is collapsed, the next visible tab will be selected. + /// + private void ValidateSelectedPanel() + { + object selectedItem = null; + + if (this.ColorPanelSelector != null) + { + if (this.ColorPanelSelector.SelectedItem == null && + this.ColorPanelSelector.Items.Count > 0) + { + // As a failsafe, forcefully select the first item + selectedItem = this.ColorPanelSelector.Items[0]; + } + else + { + selectedItem = this.ColorPanelSelector.SelectedItem; + } + + if (selectedItem is UIElement selectedElement && + selectedElement.Visibility == Visibility.Collapsed) + { + // Select the first visible item instead + foreach (object item in this.ColorPanelSelector.Items) + { + if (item is UIElement element && + element.Visibility == Visibility.Visible) + { + selectedItem = item; + break; + } + } + } + + this.ColorPanelSelector.SelectedItem = selectedItem; + } + + return; + } + /*************************************************************************************** * * Color Update Timer From f448ee31c6292bf8a96923c5cdd0f91c8e7aa6bc Mon Sep 17 00:00:00 2001 From: robloo Date: Mon, 26 Jul 2021 22:50:46 -0400 Subject: [PATCH 2/6] Add additional color picker samples showing only a palette --- .../ColorPicker/ColorPickerButtonXaml.bind | 38 +++++++++++++++++++ .../ColorPicker/ColorPickerXaml.bind | 25 +++++++++++- 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind index 8a84e01b04e..654d66c346a 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind @@ -131,5 +131,43 @@ + + + + + Ring-shaped spectrum + Alpha channel enabled + Only Color Palette Shown + + + + + + + + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind index 59d3454d6c0..c3116470e48 100644 --- 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 - - + + + + Ring-shaped spectrum + Alpha channel enabled + Only Color Palette Shown + + + \ No newline at end of file From bc05c86bf0bb708cfc60f131b3b9c442492780b0 Mon Sep 17 00:00:00 2001 From: robloo Date: Mon, 26 Jul 2021 23:30:36 -0400 Subject: [PATCH 3/6] Make tabs automatically size uniformly to width This improves the design when some tabs are hidden --- .../ColorPicker/ColorPicker.xaml | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml index 370be9af979..3641acb2e3c 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml @@ -69,12 +69,13 @@ CornerRadius="4" /> - + - - - From e23a8952a98de3b984e2c22acf616cc9479c30ec Mon Sep 17 00:00:00 2001 From: robloo Date: Mon, 26 Jul 2021 23:32:40 -0400 Subject: [PATCH 4/6] Set slider DefaultForeground value in style This fixes potential issues with shared instances of the brush --- .../ColorPicker/ColorPickerSlider.Properties.cs | 2 +- .../ColorPicker/ColorPickerSlider.xaml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.Properties.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.Properties.cs index bf99d884dfd..2a0471a420a 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.Properties.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.Properties.cs @@ -104,7 +104,7 @@ public ColorRepresentation ColorRepresentation typeof(Brush), typeof(ColorPickerSlider), new PropertyMetadata( - new SolidColorBrush(Colors.Gray), + null, (s, e) => (s as ColorPickerSlider)?.OnDependencyPropertyChanged(s, e))); /// diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.xaml b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.xaml index 439e7040f2b..51027d2d0be 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.xaml +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerSlider.xaml @@ -9,6 +9,7 @@ TargetType="controls:ColorPickerSlider"> + From dde93f33c8d68f1b4dcd2f869836caf01155ad6d Mon Sep 17 00:00:00 2001 From: robloo Date: Mon, 26 Jul 2021 23:55:19 -0400 Subject: [PATCH 5/6] Add central OnDependencyPropertyChanged method in ColorPicker --- .../ColorPicker/ColorPicker.Properties.cs | 16 +++- .../ColorPicker/ColorPicker.cs | 94 +++++++++---------- 2 files changed, 57 insertions(+), 53 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.Properties.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.Properties.cs index 1c6e2cdd469..641e83131f5 100644 --- 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), typeof(ColorPicker), - new PropertyMetadata(null)); + new PropertyMetadata( + null, + (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e))); /// /// Gets the list of custom palette colors. @@ -38,7 +40,9 @@ public ObservableCollection CustomPaletteColors nameof(CustomPaletteColumnCount), typeof(int), typeof(ColorPicker), - new PropertyMetadata(4)); + new PropertyMetadata( + 4, + (s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e))); /// /// 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))); /// /// 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))); /// /// Gets or sets a value indicating whether the color palette is visible. diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs index 99523f15ecb..7a22dbc8f70 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs @@ -66,8 +66,6 @@ public partial class ColorPicker : Microsoft.UI.Xaml.Controls.ColorPicker private const int ColorUpdateInterval = 30; // Milliseconds private long tokenColor; - private long tokenCustomPalette; - private long tokenIsColorPaletteVisible; private bool callbacksConnected = false; private bool eventsConnected = false; @@ -252,23 +250,19 @@ private T GetTemplateChild(string childName, bool isRequired = false) /// True to connect callbacks, otherwise false. private void ConnectCallbacks(bool connected) { - if ((connected == true) && - (this.callbacksConnected == false)) + if (connected == true && + this.callbacksConnected == false) { // Add callbacks for dependency properties - this.tokenColor = this.RegisterPropertyChangedCallback(ColorProperty, OnColorChanged); - this.tokenCustomPalette = this.RegisterPropertyChangedCallback(CustomPaletteProperty, OnCustomPaletteChanged); - this.tokenIsColorPaletteVisible = this.RegisterPropertyChangedCallback(IsColorPaletteVisibleProperty, OnIsColorPaletteVisibleChanged); + this.tokenColor = this.RegisterPropertyChangedCallback(ColorProperty, OnColorChanged); this.callbacksConnected = true; } - else if ((connected == false) && - (this.callbacksConnected == true)) + else if (connected == false && + this.callbacksConnected == true) { // Remove callbacks for dependency properties - this.UnregisterPropertyChangedCallback(ColorProperty, this.tokenColor); - this.UnregisterPropertyChangedCallback(CustomPaletteProperty, this.tokenCustomPalette); - this.UnregisterPropertyChangedCallback(IsColorPaletteVisibleProperty, this.tokenIsColorPaletteVisible); + this.UnregisterPropertyChangedCallback(ColorProperty, this.tokenColor); this.callbacksConnected = false; } @@ -282,8 +276,8 @@ private void ConnectCallbacks(bool connected) /// True to connect event handlers, otherwise false. private void ConnectEvents(bool connected) { - if ((connected == true) && - (this.eventsConnected == false)) + if (connected == true && + this.eventsConnected == false) { // Add all events if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.ColorChanged += ColorSpectrum_ColorChanged; } @@ -336,8 +330,8 @@ private void ConnectEvents(bool connected) this.eventsConnected = true; } - else if ((connected == false) && - (this.eventsConnected == true)) + else if (connected == false && + this.eventsConnected == true) { // Remove all events if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.ColorChanged -= ColorSpectrum_ColorChanged; } @@ -1112,6 +1106,41 @@ private void ValidateSelectedPanel() return; } + private void OnDependencyPropertyChanged(object sender, DependencyPropertyChangedEventArgs args) + { + DependencyObject senderControl = sender as DependencyObject; + + /* Note: ColorProperty is defined in the base class and cannot be used here + * See the OnColorChanged callback below + */ + + if (object.ReferenceEquals(args.Property, CustomPaletteProperty)) + { + IColorPalette palette = this.CustomPalette; + + if (palette != null) + { + this.CustomPaletteColumnCount = palette.ColorCount; + this.CustomPaletteColors.Clear(); + + for (int shadeIndex = 0; shadeIndex < palette.ShadeCount; shadeIndex++) + { + for (int colorIndex = 0; colorIndex < palette.ColorCount; colorIndex++) + { + this.CustomPaletteColors.Add(palette.GetColor(colorIndex, shadeIndex)); + } + } + } + } + else if (object.ReferenceEquals(args.Property, IsColorPaletteVisibleProperty)) + { + this.UpdateVisualState(false); + this.ValidateSelectedPanel(); + } + + return; + } + /*************************************************************************************** * * Color Update Timer @@ -1194,39 +1223,6 @@ private void OnColorChanged(DependencyObject d, DependencyProperty e) return; } - /// - /// Callback for when the dependency property value changes. - /// - private void OnCustomPaletteChanged(DependencyObject d, DependencyProperty e) - { - IColorPalette palette = this.CustomPalette; - - if (palette != null) - { - this.CustomPaletteColumnCount = palette.ColorCount; - this.CustomPaletteColors.Clear(); - - for (int shadeIndex = 0; shadeIndex < palette.ShadeCount; shadeIndex++) - { - for (int colorIndex = 0; colorIndex < palette.ColorCount; colorIndex++) - { - this.CustomPaletteColors.Add(palette.GetColor(colorIndex, shadeIndex)); - } - } - } - - return; - } - - /// - /// Callback for when the dependency property value changes. - /// - private void OnIsColorPaletteVisibleChanged(DependencyObject d, DependencyProperty e) - { - this.UpdateVisualState(false); - return; - } - /*************************************************************************************** * * Event Handling From 79f29316572001a2b8147896c26ed2546c3400de Mon Sep 17 00:00:00 2001 From: robloo Date: Sun, 29 Aug 2021 13:05:05 -0400 Subject: [PATCH 6/6] Fix ColorPickerButton samples and switch to StackPanel This is now the same as ColorPicker samples --- .../ColorPicker/ColorPickerButtonXaml.bind | 104 ++++++------------ .../ColorPicker/ColorPickerXaml.bind | 42 +++---- 2 files changed, 54 insertions(+), 92 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind index 654d66c346a..939f067a2b3 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind @@ -10,19 +10,11 @@ - - - - - - - - - + + - - - + - - - + - - - + + + + + Ring-shaped spectrum + Alpha channel enabled + Only Color Palette Shown + + + + + + + - - - - - Ring-shaped spectrum - Alpha channel enabled - Only Color Palette Shown - - - - - - - - - + \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind index c3116470e48..1502d4ad1f0 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind @@ -84,27 +84,27 @@ ColorSpectrumComponents="SaturationValue" IsAlphaEnabled="True" IsHexInputVisible="True"/> - - - - Ring-shaped spectrum - Alpha channel enabled - Only Color Palette Shown - - - + + + + Ring-shaped spectrum + Alpha channel enabled + Only Color Palette Shown + + + \ No newline at end of file