Skip to content

Commit 79f2931

Browse files
robloorobloo
committed
Fix ColorPickerButton samples and switch to StackPanel
This is now the same as ColorPicker samples
1 parent dde93f3 commit 79f2931

File tree

2 files changed

+54
-92
lines changed

2 files changed

+54
-92
lines changed

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

Lines changed: 33 additions & 71 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,44 +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-
<!-- Example 5 -->
135-
<StackPanel Grid.Row="3"
136-
Orientation="Vertical"
137-
HorizontalAlignment="Center"
138-
VerticalAlignment="Center"
139-
Spacing="20">
140-
<Border Background="{ThemeResource SystemChromeMediumColor}"
141-
CornerRadius="4"
142-
Height="100"
143-
Width="300"
144-
Padding="10">
145-
<TextBlock TextAlignment="Center"
146-
VerticalAlignment="Center">
147-
Ring-shaped spectrum <LineBreak />
148-
Alpha channel enabled <LineBreak />
149-
Only Color Palette Shown
150-
</TextBlock>
151-
</Border>
152-
<controls:ColorPickerButton x:Name="ColorPickerButton5"
153-
SelectedColor="Teal">
154-
<controls:ColorPickerButton.ColorPickerStyle>
155-
<Style TargetType="controls:ColorPicker">
156-
<Setter Property="ColorSpectrumShape"
157-
Value="Ring"/>
158-
<Setter Property="IsAlphaEnabled"
159-
Value="True"/>
160-
<Setter Property="IsHexInputVisible"
161-
Value="True"/>
162-
<Setter Property="IsColorSpectrumVisible"
163-
Value="False"/>
164-
<Setter Property="IsColorPaletteVisible"
165-
Value="True"/>
166-
<Setter Property="IsColorChannelTextInputVisible"
167-
Value="False"/>
168-
</Style>
169-
</controls:ColorPickerButton.ColorPickerStyle>
170-
</controls:ColorPickerButton>
171-
</StackPanel>
172-
</Grid>
134+
</ScrollViewer>
173135
</Page>

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -84,27 +84,27 @@
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"/>
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"/>
108108
</StackPanel>
109109
</ScrollViewer>
110110
</Page>

0 commit comments

Comments
 (0)