Skip to content

Commit f3f9315

Browse files
Avid29Avid29
committed
Improved markdown documentation for ContrastHelper and ColorPaletteSampler samples
1 parent 1f07641 commit f3f9315

File tree

10 files changed

+137
-95
lines changed

10 files changed

+137
-95
lines changed

‎components/ColorAnalyzer/samples/ColorPaletteSampler/AccentColorSample.xaml‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<local:ColorPaletteSamplerToolkitSampleBase x:Class="ColorAnalyzerExperiment.Samples.AccentColorSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -29,8 +29,8 @@
2929
<ColumnDefinition Width="*" />
3030
</Grid.ColumnDefinitions>
3131

32-
<StackPanel VerticalAlignment="Center"
33-
MaxHeight="250">
32+
<StackPanel MaxHeight="250"
33+
VerticalAlignment="Center">
3434
<Image x:Name="SampledImage"
3535
HorizontalAlignment="Center"
3636
Source="{x:Bind SelectedImage, Mode=OneWay}"
@@ -45,22 +45,22 @@
4545
</StackPanel>
4646

4747
<Grid Grid.Column="1"
48-
HorizontalAlignment="Stretch"
49-
VerticalAlignment="Stretch"
50-
MaxHeight="250"
5148
MaxWidth="400"
52-
Margin="20">
49+
MaxHeight="250"
50+
Margin="20"
51+
HorizontalAlignment="Stretch"
52+
VerticalAlignment="Stretch">
5353
<Grid.ColumnDefinitions>
5454
<ColumnDefinition />
5555
<ColumnDefinition />
5656
</Grid.ColumnDefinitions>
5757
<Grid.RowDefinitions>
58-
<RowDefinition/>
59-
<RowDefinition Height="0.6*"/>
60-
<RowDefinition Height="0.4*"/>
58+
<RowDefinition />
59+
<RowDefinition Height="0.6*" />
60+
<RowDefinition Height="0.4*" />
6161
</Grid.RowDefinitions>
6262

63-
<!-- Primary Accent Color -->
63+
<!-- Primary Accent Color -->
6464
<Border Grid.ColumnSpan="2"
6565
Margin="4"
6666
Padding="2">
@@ -70,7 +70,7 @@
7070
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
7171
Text="Primary Accent" />
7272
</Border>
73-
73+
7474
<!-- Secondary Accent Color -->
7575
<Border Grid.Row="1"
7676
Margin="4"
@@ -81,7 +81,7 @@
8181
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
8282
Text="Secondary Accent" />
8383
</Border>
84-
84+
8585
<!-- Tertiary Accent Color -->
8686
<Border Grid.Row="1"
8787
Grid.Column="1"
@@ -95,8 +95,8 @@
9595
</Border>
9696

9797
<!-- Accent Colors Gradient -->
98-
<Rectangle Grid.ColumnSpan="2"
99-
Grid.Row="3"
98+
<Rectangle Grid.Row="3"
99+
Grid.ColumnSpan="2"
100100
Margin="4">
101101
<Rectangle.Fill>
102102
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

‎components/ColorAnalyzer/samples/ColorPaletteSampler/BaseColorSample.xaml‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<local:ColorPaletteSamplerToolkitSampleBase x:Class="ColorAnalyzerExperiment.Samples.BaseColorSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -14,7 +14,7 @@
1414
<helpers:ColorPaletteSampler x:Name="ColorPaletteSampler"
1515
Source="{x:Bind SampledImage}">
1616
<helpers:BaseColorPaletteSelector x:Name="BaseColorPalette"
17-
MinColorCount="3" />
17+
MinColorCount="3" />
1818
</helpers:ColorPaletteSampler>
1919
</local:ColorPaletteSamplerToolkitSampleBase.Resources>
2020

@@ -29,9 +29,9 @@
2929
<ColumnDefinition Width="*" />
3030
</Grid.ColumnDefinitions>
3131

32-
<StackPanel Padding="20"
33-
VerticalAlignment="Center"
34-
MaxHeight="250">
32+
<StackPanel MaxHeight="250"
33+
Padding="20"
34+
VerticalAlignment="Center">
3535
<Image x:Name="SampledImage"
3636
HorizontalAlignment="Center"
3737
Source="{x:Bind SelectedImage, Mode=OneWay}"
@@ -46,22 +46,22 @@
4646
</StackPanel>
4747

4848
<Grid Grid.Column="1"
49-
HorizontalAlignment="Stretch"
50-
VerticalAlignment="Stretch"
51-
MaxHeight="250"
5249
MaxWidth="400"
53-
Margin="20">
50+
MaxHeight="250"
51+
Margin="20"
52+
HorizontalAlignment="Stretch"
53+
VerticalAlignment="Stretch">
5454
<Grid.ColumnDefinitions>
5555
<ColumnDefinition />
5656
<ColumnDefinition />
5757
</Grid.ColumnDefinitions>
5858
<Grid.RowDefinitions>
59-
<RowDefinition/>
60-
<RowDefinition Height="0.6*"/>
61-
<RowDefinition Height="0.4*"/>
59+
<RowDefinition />
60+
<RowDefinition Height="0.6*" />
61+
<RowDefinition Height="0.4*" />
6262
</Grid.RowDefinitions>
6363

64-
<!-- Most Basic Color -->
64+
<!-- Most Basic Color -->
6565
<Border Grid.ColumnSpan="2"
6666
Margin="4"
6767
Padding="2">
@@ -71,7 +71,7 @@
7171
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind BaseColorPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
7272
Text="Base" />
7373
</Border>
74-
74+
7575
<!-- Second Most Basic Color -->
7676
<Border Grid.Row="1"
7777
Margin="4"
@@ -82,7 +82,7 @@
8282
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind BaseColorPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
8383
Text="Base 2" />
8484
</Border>
85-
85+
8686
<!-- Third Most Basic Color -->
8787
<Border Grid.Row="1"
8888
Grid.Column="1"
@@ -96,8 +96,8 @@
9696
</Border>
9797

9898
<!-- Accent Colors Gradient -->
99-
<Rectangle Grid.ColumnSpan="2"
100-
Grid.Row="3"
99+
<Rectangle Grid.Row="3"
100+
Grid.ColumnSpan="2"
101101
Margin="4">
102102
<Rectangle.Fill>
103103
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

‎components/ColorAnalyzer/samples/ColorPaletteSampler/ColorWeightSample.xaml‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<local:ColorPaletteSamplerToolkitSampleBase x:Class="ColorAnalyzerExperiment.Samples.ColorWeightSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -29,9 +29,9 @@
2929
<ColumnDefinition Width="*" />
3030
</Grid.ColumnDefinitions>
3131

32-
<StackPanel Padding="20"
33-
VerticalAlignment="Center"
34-
MaxHeight="250">
32+
<StackPanel MaxHeight="250"
33+
Padding="20"
34+
VerticalAlignment="Center">
3535
<Image x:Name="SampledImage"
3636
HorizontalAlignment="Center"
3737
Source="{x:Bind SelectedImage, Mode=OneWay}"
@@ -44,21 +44,21 @@
4444
</interactivity:Interaction.Behaviors>
4545
</Image>
4646
</StackPanel>
47-
47+
4848
<Grid Grid.Column="1"
49-
HorizontalAlignment="Stretch"
50-
VerticalAlignment="Stretch"
51-
MaxHeight="250"
5249
MaxWidth="400"
53-
Margin="20">
50+
MaxHeight="250"
51+
Margin="20"
52+
HorizontalAlignment="Stretch"
53+
VerticalAlignment="Stretch">
5454
<Grid.ColumnDefinitions>
5555
<ColumnDefinition />
5656
<ColumnDefinition />
5757
</Grid.ColumnDefinitions>
5858
<Grid.RowDefinitions>
59-
<RowDefinition/>
60-
<RowDefinition Height="0.6*"/>
61-
<RowDefinition Height="0.4*"/>
59+
<RowDefinition />
60+
<RowDefinition Height="0.6*" />
61+
<RowDefinition Height="0.4*" />
6262
</Grid.RowDefinitions>
6363

6464
<!-- Color 1 -->
@@ -71,8 +71,8 @@
7171
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind ColorWeightPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
7272
Text="Color 1" />
7373
</Border>
74-
75-
<!-- Color 2 -->
74+
75+
<!-- Color 2 -->
7676
<Border Grid.Row="1"
7777
Margin="4"
7878
Padding="2">
@@ -82,7 +82,7 @@
8282
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind ColorWeightPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
8383
Text="Color 2" />
8484
</Border>
85-
85+
8686
<!-- Color 3 -->
8787
<Border Grid.Row="1"
8888
Grid.Column="1"
@@ -96,8 +96,8 @@
9696
</Border>
9797

9898
<!-- Color Gradient -->
99-
<Rectangle Grid.ColumnSpan="2"
100-
Grid.Row="3"
99+
<Rectangle Grid.Row="3"
100+
Grid.ColumnSpan="2"
101101
Margin="4">
102102
<Rectangle.Fill>
103103
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">

‎components/ColorAnalyzer/samples/ColorPaletteSampler/ImageOptionsPane.xaml.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ public ImageOptionsPane(ColorPaletteSamplerToolkitSampleBase sample)
2626

2727
string[] images = ["Flowers.jpg", "Headphones.jpg", "Paint.jpg"];
2828
StockImages = images.Select(x => $"ms-appx:///Assets/StockImages/{x}").ToList();
29+
SetImage(new Uri(StockImages.First()));
2930
}
3031

3132
private void Button_Click(object sender, RoutedEventArgs e)

‎components/ColorAnalyzer/samples/ColorPaletteSampler/MultiplePaletteSelectorSample.xaml‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
22
<local:ColorPaletteSamplerToolkitSampleBase x:Class="ColorAnalyzerExperiment.Samples.MultiplePaletteSelectorSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -16,7 +16,7 @@
1616
<helpers:AccentColorPaletteSelector x:Name="AccentPalette"
1717
MinColorCount="1" />
1818
<helpers:BaseColorPaletteSelector x:Name="BaseColorPalette"
19-
MinColorCount="1" />
19+
MinColorCount="1" />
2020
<helpers:ColorWeightPaletteSelector x:Name="ColorWeightPalette"
2121
MinColorCount="1" />
2222
</helpers:ColorPaletteSampler>
@@ -33,9 +33,9 @@
3333
<ColumnDefinition Width="*" />
3434
</Grid.ColumnDefinitions>
3535

36-
<StackPanel Padding="20"
37-
VerticalAlignment="Center"
38-
MaxHeight="250">
36+
<StackPanel MaxHeight="250"
37+
Padding="20"
38+
VerticalAlignment="Center">
3939
<Image x:Name="SampledImage"
4040
HorizontalAlignment="Center"
4141
Source="{x:Bind SelectedImage, Mode=OneWay}"
@@ -48,20 +48,20 @@
4848
</interactivity:Interaction.Behaviors>
4949
</Image>
5050
</StackPanel>
51-
51+
5252
<Grid Grid.Column="1"
53-
HorizontalAlignment="Stretch"
54-
VerticalAlignment="Stretch"
55-
MaxHeight="250"
5653
MaxWidth="400"
57-
Margin="20">
54+
MaxHeight="250"
55+
Margin="20"
56+
HorizontalAlignment="Stretch"
57+
VerticalAlignment="Stretch">
5858
<Grid.ColumnDefinitions>
5959
<ColumnDefinition />
6060
<ColumnDefinition />
6161
</Grid.ColumnDefinitions>
6262
<Grid.RowDefinitions>
63-
<RowDefinition/>
64-
<RowDefinition Height="0.6*"/>
63+
<RowDefinition />
64+
<RowDefinition Height="0.6*" />
6565
</Grid.RowDefinitions>
6666

6767
<!-- Dominant -->
@@ -74,8 +74,8 @@
7474
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind ColorWeightPalette.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
7575
Text="Dominant" />
7676
</Border>
77-
78-
<!-- Accent -->
77+
78+
<!-- Accent -->
7979
<Border Grid.Row="1"
8080
Margin="4"
8181
Padding="2">
@@ -85,7 +85,7 @@
8585
<TextBlock helpers:ContrastHelper.Opponent="{x:Bind AccentPalette.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
8686
Text="Accent" />
8787
</Border>
88-
88+
8989
<!-- Base -->
9090
<Border Grid.Row="1"
9191
Grid.Column="1"

‎components/ColorAnalyzer/samples/ColorPaletteSamplerToolkitSample.md‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,53 @@
11
---
2-
title: AccentAnalyzer Helper
2+
title: ColorPaletteSampler
33
author: Avid29
4-
description: A tool for extracting colors from an image
5-
keywords: Accents, Color, Helpers
4+
description: A resource that generates a color palette from an image or any other UI element.
5+
keywords: Color
66
dev_langs:
77
- csharp
88
category: Helpers
99
subcategory: Miscellaneous
1010
discussion-id: 254
11-
issue-id: 0
11+
issue-id: 736
1212
icon: assets/icon.png
1313
---
1414

1515
# ColorPaletteSampler
1616

17-
### Extracing Accent Colors
17+
## Overview
18+
19+
The `ColorPaletteSampler` is a resource that generates a color palette from any `UIElement`,
20+
but most notably from an `Image`. After the palette is generated, you can use a `PaletteSelector`
21+
or collection of `PaletteSelector` items to select colors from the palette to bind to in the UI.
22+
23+
## AccentColorPaletteSelector
24+
25+
The `AccentColorPaletteSelector` can be used to extract accent colors from an image. An
26+
accent color is a color that stands out, which we detect by looking for colors following
27+
a "colorness" formula.
28+
29+
Here's an example where you can play around and see the results.
1830

1931
> [!Sample AccentColorSample]
2032
21-
### Extract Base Colors
33+
## BaseColorPaletteSelector
34+
35+
The `BaseColorPaletteSelector` can be used to extract basic colors from an image.
36+
Basic colors are colors that standand out less stands out, which we detect by using
37+
the same "colorness" formula, as accent colors, but inverting the results.
2238

2339
> [!Sample BaseColorSample]
2440
25-
### Identifying the colors which cover the most area in an image
41+
## ColorWeightPaletteSelector
42+
43+
The `ColorWeightPaletteSelector` can be used to determine which colors cover the most
44+
area in an image.
2645

2746
> [!Sample ColorWeightSample]
2847
29-
### Using multiple palette selectors
48+
## Using multiple `PaletteSelectors` items
49+
50+
Finally, multiple `PaletteSelector` items can be used together in a single `ColorPaletteSampler`
51+
to extract any combination of color data from an image.
3052

3153
> [!Sample MultiplePaletteSelectorSample]

0 commit comments

Comments
 (0)