Skip to content

Commit

Permalink
Merge pull request #1 from michaldivis/vNext
Browse files Browse the repository at this point in the history 
v1.0.1
  • Loading branch information
@michaldivis
michaldivis authored Sep 15, 2022
2 parents 4bbc5ee + 00e2e8a commit 672b103
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 55 deletions.
36 changes: 34 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ Blend multiple colors together with transparency support.
var baseColor = Color.FromArgb(0, 0, 0); //The base color. This one can't be transparent. If it is, the alpha channel will be ignored.
var colorToAdd = Color.FromArgb(125, 55, 13); //A color to add. This one can have transparency.
var colorToAddLayer = new ColorLayer(colorToAdd, 100);
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAddLayer);
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
```

### Advanced
Expand All @@ -44,3 +43,36 @@ var anotherColorToAddLayer = new ColorLayer(anotherColorToAdd, 25);

var threeColorsCombined = ColorBlender.Combine(baseColor, colorToAddLayer, anotherColorToAddLayer);
```

### Transparency

Using the `Color`'s alpha channel:
```csharp
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(127, 125, 55, 13); //set 50% transparency using the color Alpha channel
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
```

Using the `ColorLayer`'s `AmountPercentage` property:
```csharp
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(125, 55, 13);
var colorToAddLayer = new ColorLayer(colorToAdd, 50); //set 50% transparency using the color AmountPercentage property of the ColorLayer
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
```

Using both the `Color`'s alpha channel and `ColorLayer`'s `AmountPercentage` property:
```csharp
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(127, 125, 55, 13); //set 50% transparency using the color Alpha channel
var colorToAddLayer = new ColorLayer(colorToAdd, 50); //set 50% transparency using the color AmountPercentage property of the ColorLayer. The resulting color will only be added by 25% because both color's Alpha and layer's AmountPercentage were used.
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
```

### Color extensions

```csharp
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(125, 55, 13);
var twoColorsCombined = baseColor.Combine(colorToAdd);
```
Binary file modified assets/sample_screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion sample/SampleApp/ColorBlendingExample.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ namespace SampleApp;

public class ColorBlendingExample
{
public string Title { get; }
public Color BaseColor { get; }
public ColorLayer[] Layers { get; }
public Color ResultColor { get; }

public ColorBlendingExample(Color baseColor, params ColorLayer[] layers)
public ColorBlendingExample(string Title, Color baseColor, params ColorLayer[] layers)
{
this.Title = Title;
BaseColor = baseColor;
Layers = layers;
ResultColor = ColorBlender.Combine(baseColor, layers);
Expand Down
68 changes: 61 additions & 7 deletions sample/SampleApp/MainViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,21 @@ public class MainViewModel

public MainViewModel()
{
Examples.Add(new ColorBlendingExample(Hex("#000"), new ColorLayer(Hex("#fff"), 25)));
Examples.Add(new ColorBlendingExample(Hex("#000"), new ColorLayer(Hex("#fff"), 50)));
Examples.Add(new ColorBlendingExample(Hex("#007d40"), new ColorLayer(Hex("#fff"), 75)));
Examples.Add(new ColorBlendingExample("A bit of gray", Hex("#000"), new ColorLayer(Hex("#fff"), 25)));
Examples.Add(new ColorBlendingExample("Fifty shades", Hex("#000"), new ColorLayer(Hex("#fff"), 50)));
Examples.Add(new ColorBlendingExample("Bright green", Hex("#007d40"), new ColorLayer(Hex("#fff"), 75)));

Examples.Add(new ColorBlendingExample(Hex("#000"), new ColorLayer(Hex("#4056F4"), 60)));
Examples.Add(new ColorBlendingExample("Is it blue or purple?", Hex("#000"), new ColorLayer(Hex("#4056F4"), 60)));

Examples.Add(new ColorBlendingExample(Hex("#007d40"), new ColorLayer[]
Examples.Add(new ColorBlendingExample("More than two colors", Hex("#007d40"), new ColorLayer[]
{
new ColorLayer(Hex("#4056F4"), 42),
new ColorLayer(Hex("#B1740F"), 28)
}));

Examples.Add(new ColorBlendingExample(Hex("#000"), new ColorLayer(Hex("#804056F4"), 55)));
Examples.Add(new ColorBlendingExample("Both alpha transparency and amount percentage used", Hex("#000"), new ColorLayer(Hex("#804056F4"), 55)));

Examples.Add(new ColorBlendingExample(Hex("#007d40"), new ColorLayer[]
Examples.Add(new ColorBlendingExample("Combo - both alpha transparency and amount percentage used for multiple colors", Hex("#007d40"), new ColorLayer[]
{
new ColorLayer(Hex("#804056F4"), 71),
new ColorLayer(Hex("#5CB1740F"), 20)
Expand All @@ -35,4 +35,58 @@ private static Color Hex(string hex)
{
return ColorTranslator.FromHtml(hex);
}

private void SimpleExample()
{
var baseColor = Color.FromArgb(0, 0, 0); //The base color. This one can't be transparent. If it is, the alpha channel will be ignored.

var colorToAdd = Color.FromArgb(125, 55, 13); //A color to add. This one can have transparency.

var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
}

private void AdvancedExample()
{
var baseColor = Color.FromArgb(0, 0, 0); //The base color. This one can't be transparent. If it is, the alpha channel will be ignored.

var colorToAdd = Color.FromArgb(127, 125, 55, 13); //A color to add. This one can have transparency.
var colorToAddLayer = new ColorLayer(colorToAdd, 50); //The color's amount is set to 50% and it's alpha channel is at 50% so in the result, only 25% of this color will be added on top of the base color.

var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAddLayer);

var anotherColorToAdd = Color.FromArgb(255, 13, 79);
var anotherColorToAddLayer = new ColorLayer(anotherColorToAdd, 25);

var threeColorsCombined = ColorBlender.Combine(baseColor, colorToAddLayer, anotherColorToAddLayer);
}

private void TransparencyUsingAlphaExample()
{
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(127, 125, 55, 13); //set 50% transparency using the color Alpha channel
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
}

private void TransparencyUsingAmountExample()
{
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(125, 55, 13);
var colorToAddLayer = new ColorLayer(colorToAdd, 50); //set 50% transparency using the color AmountPercentage property of the ColorLayer
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
}

private void TransparencyUsingAlphaAndAmountExample()
{
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(127, 125, 55, 13); //set 50% transparency using the color Alpha channel
var colorToAddLayer = new ColorLayer(colorToAdd, 50); //set 50% transparency using the color AmountPercentage property of the ColorLayer. The resulting color will only be added by 25% because both color's Alpha and layer's AmountPercentage were used.
var twoColorsCombined = ColorBlender.Combine(baseColor, colorToAdd);
}

private void ExtensionsExample()
{
var baseColor = Color.FromArgb(0, 0, 0);
var colorToAdd = Color.FromArgb(125, 55, 13);
var twoColorsCombined = baseColor.Combine(colorToAdd);
}
}
98 changes: 54 additions & 44 deletions sample/SampleApp/MainWindow.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,123 +19,133 @@
<ItemsControl ItemsSource="{Binding Examples}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border
<StackPanel>
<TextBlock
Margin="15,15,0,-5"
FontSize="14"
Foreground="#fff"
Text="{Binding Title}" />

<Border
Margin="10,10,10,0"
Padding="10"
Background="#363636"
CornerRadius="10">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal">

<StackPanel>
<TextBlock


<StackPanel>
<TextBlock
Margin="0,0,0,5"
Foreground="#fff"
Text="Base Color"
TextAlignment="Center" />
<Border
<Border
Width="90"
Height="60"
HorizontalAlignment="Left"
Background="{Binding BaseColor, Converter={StaticResource ColorToSolidColorBrushConverter}}">
<Border
<Border
Padding="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="#40000000"
CornerRadius="5">
<StackPanel>
<TextBlock
<StackPanel>
<TextBlock
Foreground="#fff"
Text="{Binding BaseColor, Converter={StaticResource ColorToHexConverter}}"
TextAlignment="Center" />
</StackPanel>
</StackPanel>
</Border>
</Border>
</Border>
</StackPanel>
</StackPanel>

<TextBlock
<TextBlock
Margin="10,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="#999"
Text="+" />

<StackPanel>
<TextBlock
<StackPanel>
<TextBlock
Margin="0,0,0,5"
Foreground="#fff"
Text="Layers"
TextAlignment="Center" />
<ItemsControl ItemsSource="{Binding Layers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border
<ItemsControl ItemsSource="{Binding Layers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border
Width="90"
Height="60"
Background="{Binding Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
<Border
<Border
Padding="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="#40000000"
CornerRadius="5">
<StackPanel>
<TextBlock
<StackPanel>
<TextBlock
Foreground="#fff"
Text="{Binding Color, Converter={StaticResource ColorToHexConverter}}"
TextAlignment="Center" />
<TextBlock
<TextBlock
Foreground="#fff"
Text="{Binding AmountPercentage, StringFormat=' {0}%'}"
TextAlignment="Center" />
</StackPanel>
</StackPanel>
</Border>
</Border>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

<TextBlock
<TextBlock
Margin="10,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="#999"
Text="=" />

<StackPanel>
<TextBlock
<StackPanel>
<TextBlock
Margin="0,0,0,5"
Foreground="#fff"
Text="Result"
TextAlignment="Center" />
<Border
<Border
Width="90"
Height="60"
HorizontalAlignment="Left"
Background="{Binding ResultColor, Converter={StaticResource ColorToSolidColorBrushConverter}}">
<Border
<Border
Padding="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="#40000000"
CornerRadius="5">
<StackPanel>
<TextBlock
<StackPanel>
<TextBlock
Foreground="#fff"
Text="{Binding ResultColor, Converter={StaticResource ColorToHexConverter}}"
TextAlignment="Center" />
</StackPanel>
</StackPanel>
</Border>
</Border>
</Border>
</StackPanel>
</StackPanel>
</StackPanel>
</Border>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Expand Down
41 changes: 41 additions & 0 deletions src/DarkColors/ColorBlender.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,35 @@ namespace DarkColors;
/// </summary>
public static class ColorBlender
{
/// <summary>
/// Blend a base color with one or more colors
/// </summary>
/// <param name="nonTransparentBase">Base color - transparency will be ignored</param>
/// <param name="colors">Colors to add - supports transparency</param>
/// <returns>Color blending result</returns>
public static Color Combine(Color nonTransparentBase, params Color[] colors)
{
var result = nonTransparentBase;

foreach (var color in colors)
{
result = Blend(result, color, 100);
}

return result;
}

/// <summary>
/// Blend a base color with one or more colors
/// </summary>
/// <param name="nonTransparentBase">Base color - transparency will be ignored</param>
/// <param name="color">Color to add - supports transparency</param>
/// <returns>Color blending result</returns>
public static Color Combine(Color nonTransparentBase, Color color)
{
return Blend(nonTransparentBase, color, 100);
}

/// <summary>
/// Blend a base color with one or more colors
/// </summary>
Expand All @@ -26,6 +55,18 @@ public static Color Combine(Color nonTransparentBase, params ColorLayer[] layers
return result;
}

/// <summary>
/// Blend a base color with one or more colors
/// </summary>
/// <param name="nonTransparentBase">Base color - transparency will be ignored</param>
/// <param name="layer">Layer to add - supports transparency</param>
/// <returns>Color blending result</returns>
public static Color Combine(Color nonTransparentBase, ColorLayer layer)
{
var amount = (double)layer.AmountPercentage / 100;
return Blend(nonTransparentBase, layer.Color, amount);
}

private static Color Blend(Color source, Color added, double addedManualAmount)
{
var addedTransparencyAmount = (double)added.A / 255;
Expand Down
Loading

0 comments on commit 672b103

Please sign in to comment.