Skip to content

Commit 5438e4d

Browse files
Avid29Arlodotexe
Avid29
and
Arlodotexe
authored
ColorAnalyzer Component Creation (#734)
* Created AccentExtractor projects * AccentExtractor proof of concept pixel retrieval * Added colorfulness sorting * Moved AccentExtractor from attached properties to DependencyObject * Added dominant and base color properties to AccentExtractor * Renamed AccentExtractor to AccentAnalyzer * Applied xaml styles * Added gradient to AccentAnalyzer sample * Updated doc markdown * Fixed namespace errors and typos * Added supression for neccesary warning causing build error * Added UWP alternatives for AccentAnalyzer * Resolved namespaces and improved feature .NET feature conditionals for AccentAnalyzer * Added test to AccentAnalyzer * Improved AccentAnalyzer code quality * Exposed AccentColorInfo data from accent analyzer * Added fallback behavior for secondary tertiary values * Added demo images to accent analyzer sample * Applied XAML styles * Added inheritance extensibility to AccentAnalzyer * Renamed component to ColorAnalyzer, clean up sample UX * Ran xaml styler * Changed Source to a dependency property, and added more comments on AccentAnalyzer * Removed Bloom as a stock imnage in ColorAnalyer sample * Removed UpdateAccentCommand from AccentAnalyzer * Applied XAML styles --------- Co-authored-by: Arlo <[email protected]>
1 parent a4def9a commit 5438e4d

22 files changed

+987
-0
lines changed

‎components/ColorAnalyzer/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/ColorAnalyzer/samples/AccentAnalyzer.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: AccentAnalyzer Helper
3+
author: Avid29
4+
description: A tool for extracting colors from an image
5+
keywords: Accents, Color, Helpers
6+
dev_langs:
7+
- csharp
8+
category: Helpers
9+
subcategory: Miscellaneous
10+
discussion-id: 254
11+
issue-id: 0
12+
icon: assets/icon.png
13+
---
14+
15+
# AccentAnalyzer
16+
17+
The AccentAnalyzer provides a pure XAML way to use the colors extracted from an image as a binding source for any `Color` property.
18+
19+
> [!Sample AccentAnalyzerSample]

‎components/ColorAnalyzer/samples/AccentAnalyzerSample.xaml‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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. -->
2+
<Page x:Class="ColorAnalyzerExperiment.Samples.AccentAnalyzerSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:helpers="using:CommunityToolkit.WinUI.Helpers"
8+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
9+
xmlns:local="using:ColorAnalyzerExperiment.Samples"
10+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
11+
mc:Ignorable="d">
12+
13+
<Page.Resources>
14+
<helpers:AccentAnalyzer x:Name="AccentAnalyzer"
15+
Source="{x:Bind AccentedImage}" />
16+
</Page.Resources>
17+
18+
<Grid>
19+
<Grid.ColumnDefinitions>
20+
<ColumnDefinition Width="*" />
21+
<ColumnDefinition Width="*" />
22+
</Grid.ColumnDefinitions>
23+
24+
<StackPanel Padding="20"
25+
VerticalAlignment="Center">
26+
<Image x:Name="AccentedImage"
27+
HorizontalAlignment="Center"
28+
Source="/ColorAnalyzerExperiment.Samples/Assets/StockImages/Bloom.jpg"
29+
Stretch="Uniform">
30+
<interactivity:Interaction.Behaviors>
31+
<interactivity:EventTriggerBehavior EventName="ImageOpened">
32+
<interactivity:CallMethodAction MethodName="UpdateAccent"
33+
TargetObject="{x:Bind AccentAnalyzer}" />
34+
</interactivity:EventTriggerBehavior>
35+
</interactivity:Interaction.Behaviors>
36+
</Image>
37+
<TextBlock HorizontalAlignment="Center"
38+
Text="{x:Bind AccentAnalyzer.Colorfulness, Mode=OneWay}" />
39+
</StackPanel>
40+
41+
<Grid Grid.Column="1"
42+
Height="400"
43+
MaxWidth="600"
44+
Margin="20">
45+
<Grid.ColumnDefinitions>
46+
<ColumnDefinition />
47+
<ColumnDefinition />
48+
<ColumnDefinition />
49+
</Grid.ColumnDefinitions>
50+
<Grid.RowDefinitions>
51+
<RowDefinition Height="4*" />
52+
<RowDefinition Height="2*" />
53+
<RowDefinition Height="*" />
54+
<RowDefinition Height="2*" />
55+
</Grid.RowDefinitions>
56+
57+
<!-- Dominant -->
58+
<Border Grid.RowSpan="3"
59+
Grid.Column="0"
60+
Margin="4"
61+
Padding="2">
62+
<Border.Background>
63+
<SolidColorBrush Color="{x:Bind AccentAnalyzer.DominantColor, Mode=OneWay}" />
64+
</Border.Background>
65+
<TextBlock Foreground="Black"
66+
Text="Dominant" />
67+
</Border>
68+
69+
<!-- Base -->
70+
<Border Grid.Row="4"
71+
Grid.ColumnSpan="4"
72+
Margin="4"
73+
Padding="2">
74+
<Border.Background>
75+
<SolidColorBrush Color="{x:Bind AccentAnalyzer.BaseColor, Mode=OneWay}" />
76+
</Border.Background>
77+
<TextBlock Foreground="Black"
78+
Text="Base" />
79+
</Border>
80+
81+
<!-- Primary -->
82+
<Border Grid.Row="0"
83+
Grid.Column="1"
84+
Margin="4"
85+
Padding="2">
86+
<Border.Background>
87+
<SolidColorBrush Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
88+
</Border.Background>
89+
<TextBlock Foreground="Black"
90+
Text="Primary" />
91+
</Border>
92+
<!-- Secondary -->
93+
<Border Grid.Row="1"
94+
Grid.Column="1"
95+
Margin="4"
96+
Padding="2">
97+
<Border.Background>
98+
<SolidColorBrush Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
99+
</Border.Background>
100+
<TextBlock Foreground="Black"
101+
Text="Secondary" />
102+
</Border>
103+
<!-- Tertiary -->
104+
<Border Grid.Row="2"
105+
Grid.Column="1"
106+
Margin="4"
107+
Padding="2">
108+
<Border.Background>
109+
<SolidColorBrush Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
110+
</Border.Background>
111+
<TextBlock Foreground="Black"
112+
Text="Tertiary" />
113+
</Border>
114+
115+
<!-- Gradient -->
116+
<Rectangle Grid.RowSpan="3"
117+
Grid.Column="2"
118+
Margin="4">
119+
<Rectangle.Fill>
120+
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
121+
<GradientStopCollection>
122+
<GradientStop Offset="0" Color="{x:Bind AccentAnalyzer.PrimaryAccentColor, Mode=OneWay}" />
123+
<GradientStop Offset="0.74" Color="{x:Bind AccentAnalyzer.SecondaryAccentColor, Mode=OneWay}" />
124+
<GradientStop Offset="1" Color="{x:Bind AccentAnalyzer.TertiaryAccentColor, Mode=OneWay}" />
125+
</GradientStopCollection>
126+
</LinearGradientBrush>
127+
</Rectangle.Fill>
128+
</Rectangle>
129+
</Grid>
130+
</Grid>
131+
</Page>

‎components/ColorAnalyzer/samples/AccentAnalyzerSample.xaml.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace ColorAnalyzerExperiment.Samples;
6+
7+
/// <summary>
8+
/// An example sample page of a custom control inheriting from Panel.
9+
/// </summary>
10+
[ToolkitSample(id: nameof(AccentAnalyzerSample), "AccentAnalyzer helper", description: $"A sample for showing how the accent analyzer can be used.")]
11+
public sealed partial class AccentAnalyzerSample : Page
12+
{
13+
public AccentAnalyzerSample()
14+
{
15+
this.InitializeComponent();
16+
}
17+
}

‎components/ColorAnalyzer/samples/Assets/StockImages/Flowers.jpg‎

214 KB
Loading

‎components/ColorAnalyzer/samples/Assets/StockImages/Headphones.jpg‎

18.2 KB
Loading

‎components/ColorAnalyzer/samples/Assets/StockImages/Paint.jpg‎

149 KB
Loading

‎components/ColorAnalyzer/samples/Assets/icon.png‎

2.16 KB
Loading

‎components/ColorAnalyzer/samples/ColorAnalyzer.Samples.csproj‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Project>
2+
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
3+
4+
<PropertyGroup>
5+
<ToolkitComponentName>ColorAnalyzer</ToolkitComponentName>
6+
</PropertyGroup>
7+
8+
<!-- Sets this up as a toolkit component's sample project -->
9+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
10+
<ItemGroup>
11+
<Content Include="Assets\StockImages\Flowers.jpg">
12+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
13+
</Content>
14+
<Content Include="Assets\StockImages\Headphones.jpg">
15+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
16+
</Content>
17+
<Content Include="Assets\StockImages\Paint.jpg">
18+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
19+
</Content>
20+
</ItemGroup>
21+
</Project>

‎components/ColorAnalyzer/samples/Dependencies.props‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 -->
13+
<ItemGroup Condition="'$(WinUIMajorVersion)' == '2'">
14+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
15+
<PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.2.250402"/>
16+
</ItemGroup>
17+
18+
<!-- WinUI 3 -->
19+
<ItemGroup Condition="'$(WinUIMajorVersion)' == '3'">
20+
<PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.2.250402"/>
21+
</ItemGroup>
22+
</Project>

0 commit comments

Comments
 (0)