Skip to content

Commit aecbcad

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #4134 from robloo/color-picker-fixes
Color picker fixes
2 parents 5e4b0b8 + 4fd1609 commit aecbcad

File tree

7 files changed

+165
-94
lines changed

7 files changed

+165
-94
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerButtonXaml.bind

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,11 @@
1010
<SolidColorBrush Color="{ThemeResource SystemChromeLowColor}" x:Key="SystemControlForegroundChromeLowBrush"/>
1111
</Page.Resources>
1212

13-
<Grid>
14-
<Grid.RowDefinitions>
15-
<RowDefinition Height="*" />
16-
<RowDefinition Height="*" />
17-
<RowDefinition Height="*" />
18-
<RowDefinition Height="*" />
19-
</Grid.RowDefinitions>
20-
<!-- Example 1 -->
21-
<StackPanel Grid.Row="0"
22-
Orientation="Vertical"
13+
<ScrollViewer>
14+
<StackPanel Orientation="Vertical"
2315
HorizontalAlignment="Center"
24-
VerticalAlignment="Center"
2516
Spacing="20">
17+
<!-- Example 1 -->
2618
<Border Background="{ThemeResource SystemChromeMediumColor}"
2719
CornerRadius="4"
2820
Height="100"
@@ -44,13 +36,7 @@
4436
</Style>
4537
</controls:ColorPickerButton.ColorPickerStyle>
4638
</controls:ColorPickerButton>
47-
</StackPanel>
48-
<!-- Example 2 -->
49-
<StackPanel Grid.Row="1"
50-
Orientation="Vertical"
51-
HorizontalAlignment="Center"
52-
VerticalAlignment="Center"
53-
Spacing="20">
39+
<!-- Example 2 -->
5440
<Border Background="{ThemeResource SystemChromeMediumColor}"
5541
CornerRadius="4"
5642
Height="100"
@@ -72,13 +58,7 @@
7258
</Style>
7359
</controls:ColorPickerButton.ColorPickerStyle>
7460
</controls:ColorPickerButton>
75-
</StackPanel>
76-
<!-- Example 3 -->
77-
<StackPanel Grid.Row="2"
78-
Orientation="Vertical"
79-
HorizontalAlignment="Center"
80-
VerticalAlignment="Center"
81-
Spacing="20">
61+
<!-- Example 3 -->
8262
<Border Background="{ThemeResource SystemChromeMediumColor}"
8363
CornerRadius="4"
8464
Height="100"
@@ -100,13 +80,7 @@
10080
</Style>
10181
</controls:ColorPickerButton.ColorPickerStyle>
10282
</controls:ColorPickerButton>
103-
</StackPanel>
104-
<!-- Example 4 -->
105-
<StackPanel Grid.Row="3"
106-
Orientation="Vertical"
107-
HorizontalAlignment="Center"
108-
VerticalAlignment="Center"
109-
Spacing="20">
83+
<!-- Example 4 -->
11084
<Border Background="{ThemeResource SystemChromeMediumColor}"
11185
CornerRadius="4"
11286
Height="100"
@@ -130,6 +104,32 @@
130104
</Style>
131105
</controls:ColorPickerButton.ColorPickerStyle>
132106
</controls:ColorPickerButton>
107+
<!-- Example 5 -->
108+
<Border Background="{ThemeResource SystemChromeMediumColor}"
109+
CornerRadius="4"
110+
Height="100"
111+
Width="300"
112+
Padding="10">
113+
<TextBlock TextAlignment="Center"
114+
VerticalAlignment="Center">
115+
Ring-shaped spectrum <LineBreak />
116+
Alpha channel enabled <LineBreak />
117+
Only Color Palette Shown
118+
</TextBlock>
119+
</Border>
120+
<controls:ColorPickerButton x:Name="ColorPickerButton5"
121+
SelectedColor="Teal">
122+
<controls:ColorPickerButton.ColorPickerStyle>
123+
<Style TargetType="controls:ColorPicker">
124+
<Setter Property="ColorSpectrumShape" Value="Ring"/>
125+
<Setter Property="IsAlphaEnabled" Value="True"/>
126+
<Setter Property="IsHexInputVisible" Value="True"/>
127+
<Setter Property="IsColorSpectrumVisible" Value="False"/>
128+
<Setter Property="IsColorPaletteVisible" Value="True"/>
129+
<Setter Property="IsColorChannelTextInputVisible" Value="False"/>
130+
</Style>
131+
</controls:ColorPickerButton.ColorPickerStyle>
132+
</controls:ColorPickerButton>
133133
</StackPanel>
134-
</Grid>
134+
</ScrollViewer>
135135
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ColorPicker/ColorPickerXaml.bind

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
Alpha channel enabled
6161
</TextBlock>
6262
</Border>
63-
<controls:ColorPicker x:Name="ColorPickerButton3"
63+
<controls:ColorPicker x:Name="ColorPicker3"
6464
Color="Transparent"
6565
ColorSpectrumShape="Ring"
6666
IsAlphaEnabled="True"
@@ -78,12 +78,33 @@
7878
Saturation+Value spectrum channels
7979
</TextBlock>
8080
</Border>
81-
<controls:ColorPicker x:Name="ColorPickerButton4"
81+
<controls:ColorPicker x:Name="ColorPicker4"
8282
Color="Maroon"
8383
ColorSpectrumShape="Ring"
8484
ColorSpectrumComponents="SaturationValue"
8585
IsAlphaEnabled="True"
8686
IsHexInputVisible="True"/>
87+
<!-- Example 5 -->
88+
<Border Background="{ThemeResource SystemChromeMediumColor}"
89+
CornerRadius="4"
90+
Height="100"
91+
Width="300"
92+
Padding="10">
93+
<TextBlock TextAlignment="Center"
94+
VerticalAlignment="Center">
95+
Ring-shaped spectrum <LineBreak />
96+
Alpha channel enabled <LineBreak />
97+
Only Color Palette Shown
98+
</TextBlock>
99+
</Border>
100+
<controls:ColorPicker x:Name="ColorPicker5"
101+
Color="Teal"
102+
ColorSpectrumShape="Ring"
103+
IsAlphaEnabled="True"
104+
IsHexInputVisible="True"
105+
IsColorSpectrumVisible="False"
106+
IsColorPaletteVisible="True"
107+
IsColorChannelTextInputVisible="False"/>
87108
</StackPanel>
88109
</ScrollViewer>
89110
</Page>

‎Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.Properties.cs

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ public partial class ColorPicker
2020
nameof(CustomPaletteColors),
2121
typeof(ObservableCollection<Windows.UI.Color>),
2222
typeof(ColorPicker),
23-
new PropertyMetadata(null));
23+
new PropertyMetadata(
24+
null,
25+
(s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
2426

2527
/// <summary>
2628
/// Gets the list of custom palette colors.
@@ -38,7 +40,9 @@ public ObservableCollection<Windows.UI.Color> CustomPaletteColors
3840
nameof(CustomPaletteColumnCount),
3941
typeof(int),
4042
typeof(ColorPicker),
41-
new PropertyMetadata(4));
43+
new PropertyMetadata(
44+
4,
45+
(s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
4246

4347
/// <summary>
4448
/// Gets or sets the number of colors in each row (section) of the custom color palette.
@@ -64,7 +68,9 @@ public int CustomPaletteColumnCount
6468
nameof(CustomPalette),
6569
typeof(IColorPalette),
6670
typeof(ColorPicker),
67-
new PropertyMetadata(null));
71+
new PropertyMetadata(
72+
null,
73+
(s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
6874

6975
/// <summary>
7076
/// Gets or sets the custom color palette.
@@ -91,7 +97,9 @@ public IColorPalette CustomPalette
9197
nameof(IsColorPaletteVisible),
9298
typeof(bool),
9399
typeof(ColorPicker),
94-
new PropertyMetadata(true));
100+
new PropertyMetadata(
101+
true,
102+
(s, e) => (s as ColorPicker)?.OnDependencyPropertyChanged(s, e)));
95103

96104
/// <summary>
97105
/// Gets or sets a value indicating whether the color palette is visible.

0 commit comments

Comments
 (0)