Skip to content

Commit 8e727e5

Browse files
karkarlkarkarl
committed
fix theme toggle
1 parent 2512e59 commit 8e727e5

1 file changed

Lines changed: 104 additions & 97 deletions

File tree

‎WinUIGallery/ControlPages/DesignGuidance/AccessibilityColorContrastPage.xaml‎

Lines changed: 104 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
//
1010
//*********************************************************
1111
-->
12-
1312
<Page
1413
x:Class="AppUIBasics.ControlPages.AccessibilityColorContrastPage"
1514
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -38,17 +37,21 @@
3837
<RichTextBlock>
3938
<Paragraph>
4039
Accessibility is about building experiences that make your Windows application usable by people of
41-
all abilities. For more information about designing accessible apps: <Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/design/accessibility/accessibility-overview">Accessibility overview</Hyperlink>
42-
.<LineBreak />
40+
all abilities. For more information about designing accessible apps:
41+
<Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/design/accessibility/accessibility-overview">Accessibility overview</Hyperlink>
42+
.
43+
<LineBreak />
4344
<LineBreak />
4445
To ensure optimal accessibility and usability, apps should strive to use high-contrast and easy-to-
4546
read color combinationto for text and its background. Not only will this benefit users with lower
4647
visual acuity, but this will also ensure visibility and legibility under a wide range of lighting
47-
conditions, screens, and device settings.<LineBreak />
48+
conditions, screens, and device settings.
4849
<LineBreak />
49-
Check out the <Hyperlink NavigateUri="https://accessibilityinsights.io/">Accessibility Insights</Hyperlink>
50-
app to help you find and fix accessibility issues in your Windows apps.</Paragraph>
51-
50+
<LineBreak />
51+
Check out the
52+
<Hyperlink NavigateUri="https://accessibilityinsights.io/">Accessibility Insights</Hyperlink>
53+
app to help you find and fix accessibility issues in your Windows apps.
54+
</Paragraph>
5255
</RichTextBlock>
5356

5457
<TextBlock
@@ -60,237 +63,241 @@
6063
Style="{ThemeResource BodyTextBlockStyle}"
6164
Text="Use this tool to calculate the contrast ratio of two colors and measure them against the Web Content Accessibility Guidelines (WCAG)."
6265
TextWrapping="Wrap" />
63-
<Grid
64-
Padding="8"
65-
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
66-
ColumnSpacing="8"
67-
CornerRadius="{StaticResource ControlCornerRadius}"
68-
RowSpacing="8">
69-
<Grid.RowDefinitions>
70-
<RowDefinition Height="Auto" />
71-
<RowDefinition Height="Auto" />
72-
<RowDefinition Height="Auto" />
73-
</Grid.RowDefinitions>
74-
<Grid.ColumnDefinitions>
75-
<ColumnDefinition Width="Auto" />
76-
<ColumnDefinition Width="Auto" />
77-
<ColumnDefinition Width="Auto" />
78-
<ColumnDefinition Width="*" />
79-
</Grid.ColumnDefinitions>
66+
<controls1:SampleThemeListener>
67+
<Grid
68+
Padding="8"
69+
Background="{ThemeResource ControlExampleDisplayBrush}"
70+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
71+
BorderThickness="1"
72+
CornerRadius="{StaticResource ControlCornerRadius}"
73+
ColumnSpacing="8"
74+
RowSpacing="8">
75+
<Grid.RowDefinitions>
76+
<RowDefinition Height="Auto" />
77+
<RowDefinition Height="Auto" />
78+
<RowDefinition Height="Auto" />
79+
</Grid.RowDefinitions>
80+
<Grid.ColumnDefinitions>
81+
<ColumnDefinition Width="Auto" />
82+
<ColumnDefinition Width="Auto" />
83+
<ColumnDefinition Width="Auto" />
84+
<ColumnDefinition Width="*" />
85+
</Grid.ColumnDefinitions>
8086

81-
<controls1:InlineColorPicker
87+
<controls1:InlineColorPicker
8288
x:Name="TextColorPicker"
8389
AutomationProperties.Name="TextColorPicker"
8490
Grid.RowSpan="2"
8591
Header="Text Color"
8692
ColorChanged="TextColorPicker_ColorChanged"
8793
Color="Black" />
8894

89-
<controls1:InlineColorPicker
95+
<controls1:InlineColorPicker
9096
x:Name="BackgroundColorPicker"
9197
AutomationProperties.Name="BackgroundColorPicker"
9298
Grid.Column="1"
9399
Grid.RowSpan="2"
94100
Header="Background Color"
95101
ColorChanged="BackgroundColorPicker_ColorChanged" />
96102

97-
<TextBlock
103+
<TextBlock
98104
Grid.Column="3"
99105
Margin="12,0,0,0"
100106
VerticalAlignment="Center"
101107
Style="{ThemeResource BodyStrongTextBlockStyle}"
102108
Text="Contrast Ratio" />
103-
<TextBlock
109+
<TextBlock
104110
x:Name="ContrastRatioPresenter"
105111
Grid.Row="1"
106112
Grid.Column="3"
107113
Margin="12,-4,0,0"
108114
Style="{ThemeResource SubtitleTextBlockStyle}"
109115
Text="21:1" />
110116

111-
<Grid
117+
<Grid
112118
Grid.Row="2"
113119
Grid.ColumnSpan="4"
114120
MinHeight="300"
115121
Margin="12,0,12,12"
116122
CornerRadius="{StaticResource ControlCornerRadius}">
117-
<Grid.ColumnDefinitions>
118-
<ColumnDefinition Width="*" />
119-
<ColumnDefinition Width="*" />
120-
</Grid.ColumnDefinitions>
123+
<Grid.ColumnDefinitions>
124+
<ColumnDefinition Width="*" />
125+
<ColumnDefinition Width="*" />
126+
</Grid.ColumnDefinitions>
121127

122-
<!-- Status Checks -->
123-
<Grid
128+
<!-- Status Checks -->
129+
<Grid
124130
Padding="8"
125131
Background="{ThemeResource ControlFillColorDefaultBrush}"
126132
ColumnSpacing="8"
127133
RowSpacing="16">
128-
<Grid.RowDefinitions>
129-
<RowDefinition Height="*" />
130-
<RowDefinition Height="*" />
131-
<RowDefinition Height="*" />
132-
</Grid.RowDefinitions>
134+
<Grid.RowDefinitions>
135+
<RowDefinition Height="*" />
136+
<RowDefinition Height="*" />
137+
<RowDefinition Height="*" />
138+
</Grid.RowDefinitions>
133139

134-
<Grid.ColumnDefinitions>
135-
<ColumnDefinition Width="Auto" />
136-
<ColumnDefinition Width="Auto" />
137-
<ColumnDefinition Width="*" />
138-
</Grid.ColumnDefinitions>
140+
<Grid.ColumnDefinitions>
141+
<ColumnDefinition Width="Auto" />
142+
<ColumnDefinition Width="Auto" />
143+
<ColumnDefinition Width="*" />
144+
</Grid.ColumnDefinitions>
139145

140-
<Grid Margin="12,0,0,0">
141-
<Ellipse
146+
<Grid Margin="12,0,0,0">
147+
<Ellipse
142148
x:Name="NormalTextCheckEllipse"
143149
Width="30"
144150
Height="30"
145151
Fill="{ThemeResource SystemFillColorSuccess}" />
146-
<FontIcon
152+
<FontIcon
147153
x:Name="NormalTextCheckIcon"
148154
Foreground="White"
149155
Glyph="&#xE73E;" />
150-
</Grid>
151-
<TextBlock
156+
</Grid>
157+
<TextBlock
152158
x:Name="NormalTextCheckResult"
153159
Grid.Column="1"
154160
Width="40"
155161
VerticalAlignment="Center"
156162
Style="{ThemeResource BodyStrongTextBlockStyle}"
157163
Text="Pass" />
158-
<StackPanel
164+
<StackPanel
159165
Grid.Column="2"
160166
Padding="0,0,12,0"
161167
VerticalAlignment="Center">
162-
<TextBlock FontWeight="Bold" Text="Regular text" />
163-
<TextBlock Text="Requires at least 4.5:1" />
164-
</StackPanel>
168+
<TextBlock FontWeight="Bold" Text="Regular text" />
169+
<TextBlock Text="Requires at least 4.5:1" />
170+
</StackPanel>
165171

166-
<Grid Grid.Row="1" Margin="12,0,0,0">
167-
<Ellipse
172+
<Grid Grid.Row="1" Margin="12,0,0,0">
173+
<Ellipse
168174
x:Name="LargeTextCheckEllipse"
169175
Width="30"
170176
Height="30"
171177
Fill="{ThemeResource SystemFillColorSuccess}" />
172-
<FontIcon
178+
<FontIcon
173179
x:Name="LargeTextCheckIcon"
174180
Foreground="White"
175181
Glyph="&#xE73E;" />
176-
</Grid>
177-
<TextBlock
182+
</Grid>
183+
<TextBlock
178184
x:Name="LargeTextCheckResult"
179185
Grid.Row="1"
180186
Grid.Column="1"
181187
Width="40"
182188
VerticalAlignment="Center"
183189
Style="{ThemeResource BodyStrongTextBlockStyle}"
184190
Text="Pass" />
185-
<StackPanel
191+
<StackPanel
186192
Grid.Row="1"
187193
Grid.Column="2"
188194
Padding="0,0,12,0"
189195
VerticalAlignment="Center">
190-
<TextBlock FontWeight="Bold" Text="Large text (14 pt. bold or 18pt. regular)" />
191-
<TextBlock Text="Requires at least 3:1" />
192-
</StackPanel>
196+
<TextBlock FontWeight="Bold" Text="Large text (14 pt. bold or 18pt. regular)" />
197+
<TextBlock Text="Requires at least 3:1" />
198+
</StackPanel>
193199

194-
<Grid Grid.Row="2" Margin="10,0,0,0">
195-
<Ellipse
200+
<Grid Grid.Row="2" Margin="10,0,0,0">
201+
<Ellipse
196202
x:Name="ComponentsCheckEllipse"
197203
Width="30"
198204
Height="30"
199205
VerticalAlignment="Center"
200206
Fill="{ThemeResource SystemFillColorSuccess}" />
201-
<FontIcon
207+
<FontIcon
202208
x:Name="ComponentsCheckIcon"
203209
Foreground="White"
204210
Glyph="&#xE73E;" />
205-
</Grid>
206-
<TextBlock
211+
</Grid>
212+
<TextBlock
207213
x:Name="ComponentsCheckResult"
208214
Grid.Row="2"
209215
Grid.Column="1"
210216
Width="40"
211217
VerticalAlignment="Center"
212218
Style="{ThemeResource BodyStrongTextBlockStyle}"
213219
Text="Pass" />
214-
<StackPanel
220+
<StackPanel
215221
Grid.Row="2"
216222
Grid.Column="2"
217223
Padding="0,0,10,0"
218224
VerticalAlignment="Center">
219-
<TextBlock FontWeight="Bold" Text="Graphical objects and UI components" />
220-
<TextBlock Text="Requires at least 3:1" />
221-
</StackPanel>
222-
</Grid>
225+
<TextBlock FontWeight="Bold" Text="Graphical objects and UI components" />
226+
<TextBlock Text="Requires at least 3:1" />
227+
</StackPanel>
228+
</Grid>
223229

224-
<!-- Preview -->
225-
<Grid
230+
<!-- Preview -->
231+
<Grid
226232
Grid.Column="1"
227233
Padding="8"
228234
Background="{x:Bind BackgroundColorPicker.ColorBrush, Mode=OneWay}">
229-
<Grid.RowDefinitions>
230-
<RowDefinition Height="*" />
231-
<RowDefinition Height="*" />
232-
<RowDefinition Height="*" />
233-
</Grid.RowDefinitions>
235+
<Grid.RowDefinitions>
236+
<RowDefinition Height="*" />
237+
<RowDefinition Height="*" />
238+
<RowDefinition Height="*" />
239+
</Grid.RowDefinitions>
234240

235-
<TextBlock
241+
<TextBlock
236242
Padding="12,0,12,0"
237243
VerticalAlignment="Center"
238244
Foreground="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
239245
Text="The quick brown fox jumped over the lazy fox." />
240246

241-
<StackPanel
247+
<StackPanel
242248
Grid.Row="1"
243249
Padding="12,0,12,0"
244250
VerticalAlignment="Center">
245-
<TextBlock
251+
<TextBlock
246252
FontSize="14"
247253
FontWeight="Bold"
248254
Foreground="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
249255
Text="The quick brown fox jumped over the lazy fox." />
250-
<TextBlock
256+
<TextBlock
251257
FontSize="18"
252258
Foreground="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
253259
Text="The quick brown fox jumped over the lazy fox." />
254-
</StackPanel>
260+
</StackPanel>
255261

256-
<StackPanel
262+
<StackPanel
257263
Grid.Row="2"
258264
Padding="12,0,12,0"
259265
VerticalAlignment="Center"
260266
Orientation="Horizontal"
261267
Spacing="8">
262-
<Grid>
263-
<Rectangle
268+
<Grid>
269+
<Rectangle
264270
Width="30"
265271
Height="30"
266272
Fill="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
267273
RadiusX="4"
268274
RadiusY="4" />
269-
<FontIcon Foreground="White" Glyph="&#xE73E;" />
270-
</Grid>
275+
<FontIcon Foreground="White" Glyph="&#xE73E;" />
276+
</Grid>
271277

272-
<Grid>
273-
<Rectangle
278+
<Grid>
279+
<Rectangle
274280
Width="50"
275281
Height="30"
276282
Fill="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
277283
RadiusX="15"
278284
RadiusY="50" />
279-
<Ellipse
285+
<Ellipse
280286
Width="15"
281287
Height="15"
282288
Margin="0,0,5,0"
283289
HorizontalAlignment="Right"
284290
VerticalAlignment="Center"
285291
Fill="White" />
286-
</Grid>
287-
<FontIcon
292+
</Grid>
293+
<FontIcon
288294
FontSize="20"
289295
Foreground="{x:Bind TextColorPicker.ColorBrush, Mode=OneWay}"
290296
Glyph="&#xE735;" />
291-
</StackPanel>
297+
</StackPanel>
298+
</Grid>
292299
</Grid>
293300
</Grid>
294-
</Grid>
301+
</controls1:SampleThemeListener>
295302
</StackPanel>
296303
</Page>

0 commit comments

Comments
 (0)