Skip to content

Commit

Permalink
Added a "Color palette" UI (#53)
Browse files Browse the repository at this point in the history
  • Loading branch information
Leo-Peyronnet committed Sep 15, 2021
1 parent d01d44f commit 19b0b94
Show file tree
Hide file tree
Showing 6 changed files with 207 additions and 1 deletion.
1 change: 1 addition & 0 deletions ColorPicker/App.xaml.cs
Expand Up @@ -46,6 +46,7 @@ protected override void OnStartup(StartupEventArgs e)

Global.PickerPage = new(); // Create a new PickerPage
Global.ConverterPage = new(); // Create a new ConverterPage
Global.PalettePage = new(); // Create a new ConverterPage
Global.SettingsPage = new(); // Create a new SettingsPage

base.OnStartup(e);
Expand Down
5 changes: 5 additions & 0 deletions ColorPicker/Classes/Global.cs
Expand Up @@ -65,6 +65,11 @@ public static class Global
/// </summary>
public static ConverterPage ConverterPage { get; set; }

/// <summary>
/// The <see cref="Pages.PalettePage"/>.
/// </summary>
public static PalettePage PalettePage { get; set; }

/// <summary>
/// The <see cref="Pages.SettingsPage"/>.
/// </summary>
Expand Down
21 changes: 20 additions & 1 deletion ColorPicker/MainWindow.xaml
Expand Up @@ -162,7 +162,7 @@
<StackPanel Margin="10" Grid.Column="0">
<Button Click="PickerTabBtn_Click" x:Name="PickerTabBtn" Margin="5" Background="{Binding Source={StaticResource Background1}}" Foreground="{Binding Source={StaticResource Foreground1}}" FontWeight="Bold" Padding="8" Style="{DynamicResource TabButtonStyle}" FontSize="20" HorizontalAlignment="Left" Width="200" HorizontalContentAlignment="Left" MouseEnter="TabEnter" MouseLeave="TabLeave" Cursor="Hand">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PickerIcon" Text="&#xF2F6;" FontSize="23" FontWeight="Regular" FontFamily="/Fonts/#FluentSystemIcons-Regular" Margin="0 0 10 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock x:Name="PickerIcon" Text="&#xF2FC;" FontSize="23" FontWeight="Regular" FontFamily="/Fonts/#FluentSystemIcons-Regular" Margin="0 0 10 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="{x:Static lang:Resources.Picker}" VerticalAlignment="Center"/>
</StackPanel>
<Button.ToolTip>
Expand Down Expand Up @@ -211,6 +211,25 @@
</EventTrigger>
</Button.Triggers>
</Button>
<Button Click="PaletteTabBtn_Click" x:Name="PaletteTabBtn" Margin="5" Background="{Binding Source={StaticResource Background1}}" Foreground="{Binding Source={StaticResource Foreground1}}" FontWeight="Bold" Padding="8" Style="{DynamicResource TabButtonStyle}" FontSize="20" HorizontalAlignment="Left" Width="200" HorizontalContentAlignment="Left" MouseEnter="TabEnter" MouseLeave="TabLeave" Cursor="Hand">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PaletteIcon" Text="&#xF2F6;" FontSize="23" FontWeight="Regular" FontFamily="/Fonts/#FluentSystemIcons-Regular" Margin="0 0 10 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="{x:Static lang:Resources.Palette}" VerticalAlignment="Center"/>
</StackPanel>
<Button.ToolTip>
<ToolTip Content="{x:Static lang:Resources.Palette}" Foreground="{Binding Source={StaticResource Foreground1}}" Background="{Binding Source={StaticResource Background1}}"/>
</Button.ToolTip>
<Button.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="15" To="20" Duration="0:0:0.2" Storyboard.TargetName="PaletteIcon" Storyboard.TargetProperty="FontSize"/>
<ColorAnimation From="{Binding Source={StaticResource Background1}}" To="{Binding Source={StaticResource AccentColor}}" Duration="0:0:0.2" Storyboard.TargetName="PaletteTabBtn" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Click="SettingsTabBtn_Click" x:Name="SettingsTabBtn" Margin="5" Background="{Binding Source={StaticResource Background1}}" Foreground="{Binding Source={StaticResource Foreground1}}" FontWeight="Bold" Padding="8" Style="{DynamicResource TabButtonStyle}" FontSize="20" HorizontalAlignment="Left" Width="200" HorizontalContentAlignment="Left" MouseEnter="TabEnter" MouseLeave="TabLeave" Cursor="Hand">
<StackPanel Orientation="Horizontal">
<TextBlock Text="&#xF6AB;" FontSize="23" FontWeight="Regular" FontFamily="/Fonts/#FluentSystemIcons-Regular" Margin="0 0 10 0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
Expand Down
11 changes: 11 additions & 0 deletions ColorPicker/MainWindow.xaml.cs
Expand Up @@ -110,6 +110,9 @@ private void ResetAllCheckStatus()
ConverterTabBtn.Foreground = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Foreground1"].ToString()) }; // Set the foreground
ConverterTabBtn.Background = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Background1"].ToString()) }; // Set the background

PaletteTabBtn.Foreground = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Foreground1"].ToString()) }; // Set the foreground
PaletteTabBtn.Background = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Background1"].ToString()) }; // Set the background

SettingsTabBtn.Foreground = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Foreground1"].ToString()) }; // Set the foreground
SettingsTabBtn.Background = new SolidColorBrush { Color = (Color)ColorConverter.ConvertFromString(App.Current.Resources["Background1"].ToString()) }; // Set the background
}
Expand Down Expand Up @@ -137,5 +140,13 @@ private void SettingsTabBtn_Click(object sender, RoutedEventArgs e)

PageContent.Navigate(Global.SettingsPage); // Navigate
}

private void PaletteTabBtn_Click(object sender, RoutedEventArgs e)
{
ResetAllCheckStatus(); // Reset the background and foreground of all buttons
CheckButton(PaletteTabBtn); // Check the "Picker" button

PageContent.Navigate(Global.PalettePage); // Navigate
}
}
}
46 changes: 46 additions & 0 deletions ColorPicker/Pages/PalettePage.xaml
@@ -0,0 +1,46 @@
<Page x:Class="ColorPicker.Pages.PalettePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ColorPicker.Pages"
xmlns:lang="clr-namespace:ColorPicker.Properties"
mc:Ignorable="d"
Foreground="{Binding Source={StaticResource Foreground1}}"
d:DesignHeight="350" d:DesignWidth="560"
FontFamily="../Fonts/#Montserrat"
Title="PalettePage">

<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<StackPanel Margin="10,40,10,5" Grid.Row="0">
<TextBlock Text="{x:Static lang:Resources.Palette}" Foreground="{Binding Source={StaticResource Foreground1}}" FontSize="16"/>
<StackPanel Orientation="Horizontal">
<Border x:Name="ColorDisplayer" CornerRadius="10" Margin="10" Grid.Column="0" Height="50" Width="50" HorizontalAlignment="Left"/>
<TextBlock Text="{x:Static lang:Resources.RGB}" VerticalAlignment="Center"/>
<TextBox MinHeight="24" x:Name="RGBTxt" TextChanged="RGBTxt_TextChanged" Width="150" Style="{DynamicResource TextBoxStyle1}" BorderBrush="{Binding Source={StaticResource AccentColor}}" CaretBrush="{Binding Source={StaticResource Foreground1}}" Foreground="{Binding Source={StaticResource Foreground1}}" Background="{Binding Source={StaticResource Background1}}" BorderThickness="2" Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>

<TextBlock Text="{x:Static lang:Resources.Shades}"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border x:Name="DarkShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="RegularShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="BaseShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="TintShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
</StackPanel>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border x:Name="DRegularShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="DDarkShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="DBaseShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
<Border x:Name="DTintShade" CornerRadius="10" Margin="10" Height="50" Width="50"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Page>
124 changes: 124 additions & 0 deletions ColorPicker/Pages/PalettePage.xaml.cs
@@ -0,0 +1,124 @@
/*
MIT License
Copyright (c) Léo Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
using ColorHelper;
using ColorPicker.Classes;
using ColorPicker.Enums;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ColorPicker.Pages
{
/// <summary>
/// Interaction logic for PalettePage.xaml
/// </summary>
public partial class PalettePage : Page
{
public PalettePage()
{
InitializeComponent();
InitUI();
}

private void InitUI()
{
// Generate random color
int r, g, b;
Random random = new();

r = random.Next(0, 255); // Generate random number between 0 and 255
g = random.Next(0, 255); // Generate random number between 0 and 255
b = random.Next(0, 255); // Generate random number between 0 and 255

RGBTxt.Text = $"{r}{Global.Settings.RGBSeparator}{g}{Global.Settings.RGBSeparator}{b}"; // Set text
}

private RGB[] GetShades(HSL hsl)
{
// Dark shades
HSL darkShade = new(hsl.H, hsl.S, 30);
RGB darkShadeRgb = ColorHelper.ColorConverter.HslToRgb(darkShade);

// Regular shades
var l = hsl.L - 16;
HSL regularShade = new(hsl.H, hsl.S, (byte)l);
RGB regularShadeRgb = ColorHelper.ColorConverter.HslToRgb(regularShade);

// Tint shades
var s = hsl.S - 20;
var l2 = hsl.L + 6;

HSL tintShade = new(hsl.H, (byte)s, (byte)l2);
RGB tintShadeRgb = ColorHelper.ColorConverter.HslToRgb(tintShade);

RGB[] colors = { darkShadeRgb, regularShadeRgb, tintShadeRgb };

return colors;
}

private void RGBTxt_TextChanged(object sender, TextChangedEventArgs e)
{
try
{
// Set default color
string[] rgb = RGBTxt.Text.Split(new string[] { Global.Settings.RGBSeparator }, StringSplitOptions.None);

ColorDisplayer.Background = new SolidColorBrush { Color = Color.FromRgb((byte)int.Parse(rgb[0]), (byte)int.Parse(rgb[1]), (byte)int.Parse(rgb[2])) };
BaseShade.Background = new SolidColorBrush { Color = Color.FromRgb((byte)int.Parse(rgb[0]), (byte)int.Parse(rgb[1]), (byte)int.Parse(rgb[2])) };

// Get shades
HSL hsl = ColorHelper.ColorConverter.RgbToHsl(new((byte)int.Parse(rgb[0]), (byte)int.Parse(rgb[1]), (byte)int.Parse(rgb[2])));

var shades = GetShades(hsl); // Get shades
var shades1 = GetShades(ColorHelper.ColorConverter.RgbToHsl(shades[0])); // Get shades

DBaseShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades[0].R, shades[0].G, shades[0].B) };

DarkShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades[0].R, shades[0].G, shades[0].B) };
RegularShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades[1].R, shades[1].G, shades[1].B) };
TintShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades[2].R, shades[2].G, shades[2].B) };

DDarkShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades1[0].R, shades1[0].G, shades1[0].B) };
DRegularShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades1[1].R, shades1[1].G, shades1[1].B) };
DTintShade.Background = new SolidColorBrush { Color = Color.FromRgb(shades1[2].R, shades1[2].G, shades1[2].B) };

}
catch
{

}
}
}
}

0 comments on commit 19b0b94

Please sign in to comment.