Skip to content

Commit 4ff92c7

Browse files
ghost1372ghost1372
committed
Add ColorAnalyzer Sample
1 parent a3fe79f commit 4ff92c7

File tree

5 files changed

+304
-4
lines changed

5 files changed

+304
-4
lines changed

‎dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@
2020
"ImagePath": "ms-appx:///Assets/Fluent/Extensions.png",
2121
"UseBuiltInNavigationViewInfoBadgeStyle": true,
2222
"Items": [
23+
{
24+
"UniqueId": "DevWinUIGallery.Views.ColorAnalyzerPage",
25+
"Title": "Color Analyzer",
26+
"IsNew": true,
27+
"Subtitle": "Generates a color palette from any UIElement.",
28+
"ImagePath": "ms-appx:///Assets/Fluent/Color.png"
29+
},
2330
{
2431
"UniqueId": "DevWinUIGallery.Views.MenuFlyoutSecondaryMenuPage",
2532
"Title": "MenuFlyout Attach",
@@ -212,14 +219,12 @@
212219
"UniqueId": "DevWinUIGallery.Views.WanderingParticlesPage",
213220
"Title": "Wandering Particles",
214221
"Subtitle": "A visual effect that generates particles moving in random, flowing paths, creating a dynamic and wandering animation.",
215-
"IsNew": true,
216222
"ImagePath": "ms-appx:///Assets/Fluent/Particle.png"
217223
},
218224
{
219225
"UniqueId": "DevWinUIGallery.Views.SnowFlakeEffectPage",
220226
"Title": "SnowFlake Effect",
221227
"Subtitle": "A visual effect that simulates falling snowflakes, with customizable particle count.",
222-
"IsNew": true,
223228
"ImagePath": "ms-appx:///Assets/Fluent/Snowflake.png"
224229
},
225230
{
@@ -388,7 +393,6 @@
388393
"UniqueId": "DevWinUIGallery.Views.StepBarPage",
389394
"Title": "StepBar",
390395
"Subtitle": "A control that visually represents progress through a series of steps or stages, often used in wizards, forms, or multi-step processes.",
391-
"IsUpdated": true,
392396
"ImagePath": "ms-appx:///Assets/Fluent/Line.png"
393397
},
394398
{
@@ -563,7 +567,6 @@
563567
"UniqueId": "DevWinUIGallery.Views.StylesPage",
564568
"Title": "Styles",
565569
"Subtitle": "Styles",
566-
"IsUpdated": true,
567570
"ImagePath": "ms-appx:///Assets/Fluent/InfoBadge.png"
568571
},
569572
{

‎dev/DevWinUI.Gallery/ControlPagesSampleCode/Features/ColorAnalyzer_xaml.txt‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page.Resources>
2+
<dev:ColorAnalyzer x:Name="ColorAnalyzerSample"
3+
Source="{x:Bind ImageSample}">
4+
<dev:AccentColorAnalyzer x:Name="AccentColorAnalyzerSample"
5+
MinColorCount="3" />
6+
<dev:BaseColorAnalyzer x:Name="BaseColorAnalyzerSample"
7+
MinColorCount="3" />
8+
<dev:ColorWeightAnalyzer x:Name="ColorWeightAnalyzerSample"
9+
MinColorCount="3" />
10+
</dev:ColorAnalyzer>
11+
</Page.Resources>
12+
13+
<Border>
14+
<Border.Background>
15+
<SolidColorBrush Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
16+
</Border.Background>
17+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind AccentColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
18+
Text="Primary Accent" />
19+
</Border>
20+
21+
<Border>
22+
<Border.Background>
23+
<SolidColorBrush Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
24+
</Border.Background>
25+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind BaseColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
26+
Text="Primary Base" />
27+
</Border>
28+
29+
<Border>
30+
<Border.Background>
31+
<SolidColorBrush Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
32+
</Border.Background>
33+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind ColorWeightAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
34+
Text="Primary Weight" />
35+
</Border>

‎dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ public partial class NavigationPageMappings
1414
public static Dictionary<string, Type> PageDictionary { get; } = new Dictionary<string, Type>
1515
{
1616
{"DevWinUIGallery.Views.HomeLandingPage", typeof(DevWinUIGallery.Views.HomeLandingPage)},
17+
{"DevWinUIGallery.Views.ColorAnalyzerPage", typeof(DevWinUIGallery.Views.ColorAnalyzerPage)},
1718
{"DevWinUIGallery.Views.MenuFlyoutSecondaryMenuPage", typeof(DevWinUIGallery.Views.MenuFlyoutSecondaryMenuPage)},
1819
{"DevWinUIGallery.Views.SunTimesHelperPage", typeof(DevWinUIGallery.Views.SunTimesHelperPage)},
1920
{"DevWinUIGallery.Views.SystemTrayIconPage", typeof(DevWinUIGallery.Views.SystemTrayIconPage)},

‎dev/DevWinUI.Gallery/Views/Pages/Common/ColorAnalyzerPage.xaml‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<Page x:Class="DevWinUIGallery.Views.ColorAnalyzerPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:dev="using:DevWinUI"
7+
xmlns:local="using:DevWinUIGallery"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
<Page.Resources>
11+
<dev:ColorAnalyzer x:Name="ColorAnalyzerSample"
12+
Source="{x:Bind ImageSample}">
13+
<dev:AccentColorAnalyzer x:Name="AccentColorAnalyzerSample"
14+
MinColorCount="3" />
15+
<dev:BaseColorAnalyzer x:Name="BaseColorAnalyzerSample"
16+
MinColorCount="3" />
17+
<dev:ColorWeightAnalyzer x:Name="ColorWeightAnalyzerSample"
18+
MinColorCount="3" />
19+
</dev:ColorAnalyzer>
20+
</Page.Resources>
21+
<ScrollViewer>
22+
<StackPanel Margin="10" dev:PanelAttach.ChildrenTransitions="Default" Spacing="10">
23+
<local:ControlExample DocPage="colorAnalyzer"
24+
DocType="Core"
25+
XamlSource="Features/ColorAnalyzer_xaml.txt">
26+
<local:ControlExample.Pane>
27+
<StackPanel Spacing="10">
28+
<Button x:Name="BtnChange"
29+
MinWidth="200"
30+
HorizontalAlignment="Center"
31+
Click="BtnChange_Click"
32+
Content="Change Image" />
33+
<Image x:Name="ImageSample"
34+
Width="200"
35+
Height="200"
36+
HorizontalAlignment="Center"
37+
VerticalAlignment="Top"
38+
ImageOpened="ImageSample_ImageOpened"
39+
Source="ms-appx:///Assets/Carousel/5.jpg"
40+
Stretch="Uniform" />
41+
</StackPanel>
42+
</local:ControlExample.Pane>
43+
<StackPanel Spacing="10">
44+
<Grid Grid.Column="1" MaxWidth="400" MaxHeight="250" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
45+
<Grid.ColumnDefinitions>
46+
<ColumnDefinition />
47+
<ColumnDefinition />
48+
</Grid.ColumnDefinitions>
49+
<Grid.RowDefinitions>
50+
<RowDefinition />
51+
<RowDefinition Height="0.6*" />
52+
<RowDefinition Height="0.4*" />
53+
</Grid.RowDefinitions>
54+
55+
<!-- Primary Accent Color -->
56+
<Border Grid.ColumnSpan="2"
57+
Margin="4"
58+
Padding="2">
59+
<Border.Background>
60+
<SolidColorBrush Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
61+
</Border.Background>
62+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind AccentColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
63+
Text="Primary Accent" />
64+
</Border>
65+
66+
<!-- Secondary Accent Color -->
67+
<Border Grid.Row="1"
68+
Margin="4"
69+
Padding="2">
70+
<Border.Background>
71+
<SolidColorBrush Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
72+
</Border.Background>
73+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind AccentColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
74+
Text="Secondary Accent" />
75+
</Border>
76+
77+
<!-- Tertiary Accent Color -->
78+
<Border Grid.Row="1"
79+
Grid.Column="1"
80+
Margin="4"
81+
Padding="2">
82+
<Border.Background>
83+
<SolidColorBrush Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
84+
</Border.Background>
85+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind AccentColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}"
86+
Text="Tertiary Accent" />
87+
</Border>
88+
89+
<!-- Accent Colors Gradient -->
90+
<Rectangle Grid.Row="3"
91+
Grid.ColumnSpan="2"
92+
Margin="4">
93+
<Rectangle.Fill>
94+
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
95+
<GradientStopCollection>
96+
<GradientStop Offset="0" Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
97+
<GradientStop Offset="0.6" Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
98+
<GradientStop Offset="1" Color="{x:Bind AccentColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
99+
</GradientStopCollection>
100+
</LinearGradientBrush>
101+
</Rectangle.Fill>
102+
</Rectangle>
103+
</Grid>
104+
<NavigationViewItemSeparator />
105+
<Grid Grid.Column="1" MaxWidth="400" MaxHeight="250" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
106+
<Grid.ColumnDefinitions>
107+
<ColumnDefinition />
108+
<ColumnDefinition />
109+
</Grid.ColumnDefinitions>
110+
<Grid.RowDefinitions>
111+
<RowDefinition />
112+
<RowDefinition Height="0.6*" />
113+
<RowDefinition Height="0.4*" />
114+
</Grid.RowDefinitions>
115+
116+
<!-- Primary Base Color -->
117+
<Border Grid.ColumnSpan="2"
118+
Margin="4"
119+
Padding="2">
120+
<Border.Background>
121+
<SolidColorBrush Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
122+
</Border.Background>
123+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind BaseColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
124+
Text="Primary Base" />
125+
</Border>
126+
127+
<!-- Secondary Base Color -->
128+
<Border Grid.Row="1"
129+
Margin="4"
130+
Padding="2">
131+
<Border.Background>
132+
<SolidColorBrush Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
133+
</Border.Background>
134+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind BaseColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
135+
Text="Secondary Base" />
136+
</Border>
137+
138+
<!-- Tertiary Base Color -->
139+
<Border Grid.Row="1"
140+
Grid.Column="1"
141+
Margin="4"
142+
Padding="2">
143+
<Border.Background>
144+
<SolidColorBrush Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
145+
</Border.Background>
146+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind BaseColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}"
147+
Text="Tertiary Base" />
148+
</Border>
149+
150+
<!-- Base Colors Gradient -->
151+
<Rectangle Grid.Row="3"
152+
Grid.ColumnSpan="2"
153+
Margin="4">
154+
<Rectangle.Fill>
155+
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
156+
<GradientStopCollection>
157+
<GradientStop Offset="0" Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
158+
<GradientStop Offset="0.6" Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
159+
<GradientStop Offset="1" Color="{x:Bind BaseColorAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
160+
</GradientStopCollection>
161+
</LinearGradientBrush>
162+
</Rectangle.Fill>
163+
</Rectangle>
164+
</Grid>
165+
<NavigationViewItemSeparator />
166+
<Grid Grid.Column="1" MaxWidth="400" MaxHeight="250" Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
167+
<Grid.ColumnDefinitions>
168+
<ColumnDefinition />
169+
<ColumnDefinition />
170+
</Grid.ColumnDefinitions>
171+
<Grid.RowDefinitions>
172+
<RowDefinition />
173+
<RowDefinition Height="0.6*" />
174+
<RowDefinition Height="0.4*" />
175+
</Grid.RowDefinitions>
176+
177+
<!-- Primary Weight Color -->
178+
<Border Grid.ColumnSpan="2"
179+
Margin="4"
180+
Padding="2">
181+
<Border.Background>
182+
<SolidColorBrush Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
183+
</Border.Background>
184+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind ColorWeightAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}"
185+
Text="Primary Base" />
186+
</Border>
187+
188+
<!-- Secondary Weight Color -->
189+
<Border Grid.Row="1"
190+
Margin="4"
191+
Padding="2">
192+
<Border.Background>
193+
<SolidColorBrush Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
194+
</Border.Background>
195+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind ColorWeightAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}"
196+
Text="Secondary Base" />
197+
</Border>
198+
199+
<!-- Tertiary Weight Color -->
200+
<Border Grid.Row="1"
201+
Grid.Column="1"
202+
Margin="4"
203+
Padding="2">
204+
<Border.Background>
205+
<SolidColorBrush Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
206+
</Border.Background>
207+
<TextBlock dev:ContrastAnalyzer.Opponent="{x:Bind ColorWeightAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}"
208+
Text="Tertiary Base" />
209+
</Border>
210+
211+
<!-- Weight Colors Gradient -->
212+
<Rectangle Grid.Row="3"
213+
Grid.ColumnSpan="2"
214+
Margin="4">
215+
<Rectangle.Fill>
216+
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
217+
<GradientStopCollection>
218+
<GradientStop Offset="0" Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[0], FallbackValue=Transparent, Mode=OneWay}" />
219+
<GradientStop Offset="0.6" Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[1], FallbackValue=Transparent, Mode=OneWay}" />
220+
<GradientStop Offset="1" Color="{x:Bind ColorWeightAnalyzerSample.SelectedColors[2], FallbackValue=Transparent, Mode=OneWay}" />
221+
</GradientStopCollection>
222+
</LinearGradientBrush>
223+
</Rectangle.Fill>
224+
</Rectangle>
225+
</Grid>
226+
227+
</StackPanel>
228+
</local:ControlExample>
229+
</StackPanel>
230+
</ScrollViewer>
231+
232+
</Page>

‎dev/DevWinUI.Gallery/Views/Pages/Common/ColorAnalyzerPage.xaml.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Microsoft.UI.Xaml.Media.Imaging;
2+
3+
namespace DevWinUIGallery.Views;
4+
5+
public sealed partial class ColorAnalyzerPage : Page
6+
{
7+
int imageIndex = 1;
8+
9+
public ColorAnalyzerPage()
10+
{
11+
InitializeComponent();
12+
}
13+
14+
private void BtnChange_Click(object sender, RoutedEventArgs e)
15+
{
16+
if (imageIndex == 11)
17+
{
18+
imageIndex = 1;
19+
}
20+
21+
ImageSample.Source = new BitmapImage(new Uri($"ms-appx:///Assets/Carousel/{imageIndex}.jpg"));
22+
imageIndex++;
23+
}
24+
25+
private void ImageSample_ImageOpened(object sender, RoutedEventArgs e)
26+
{
27+
ColorAnalyzerSample.UpdateAnalyzer();
28+
}
29+
}

0 commit comments

Comments
 (0)