Gradient picker - Added color randomization and condensed style

This commit is contained in:
Robert committed 2022-02-27 23:06:58 +01:00
1 parent 8806348386
commit 8faa6b7a49
6 files changed
+109 -66

No files matched your search

@@ -60,12 +60,13 @@ public class GradientPicker : TemplatedControl
AvaloniaProperty.RegisterDirect<GradientPicker, ICommand>(nameof(DeleteStop), g => g.DeleteStop);
private readonly ICommand _deleteStop;
private bool _shiftDown;
private Button? _flipStops;
private Border? _gradient;
private Button? _rotateStops;
private bool _shiftDown;
private Button? _spreadStops;
private Button? _toggleSeamless;
private Button? _randomize;
private ColorGradient? _lastColorGradient;
private ColorPicker? _colorPicker;
@@ -153,6 +154,8 @@ public class GradientPicker : TemplatedControl
_flipStops.Click -= FlipStopsOnClick;
if (_rotateStops != null)
_rotateStops.Click -= RotateStopsOnClick;
if (_randomize != null)
_randomize.Click -= RandomizeOnClick;
_colorPicker = e.NameScope.Find<ColorPicker>("ColorPicker");
_gradient = e.NameScope.Find<Border>("Gradient");
@@ -160,6 +163,7 @@ public class GradientPicker : TemplatedControl
_toggleSeamless = e.NameScope.Find<Button>("ToggleSeamless");
_flipStops = e.NameScope.Find<Button>("FlipStops");
_rotateStops = e.NameScope.Find<Button>("RotateStops");
_randomize = e.NameScope.Find<Button>("Randomize");
if (_gradient != null)
_gradient.PointerPressed += GradientOnPointerPressed;
@@ -171,10 +175,13 @@ public class GradientPicker : TemplatedControl
_flipStops.Click += FlipStopsOnClick;
if (_rotateStops != null)
_rotateStops.Click += RotateStopsOnClick;
if (_randomize != null)
_randomize.Click += RandomizeOnClick;
base.OnApplyTemplate(e);
}
/// <inheritdoc />
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
@@ -309,4 +316,10 @@ public class GradientPicker : TemplatedControl
ColorGradient.RotateStops(_shiftDown);
}
private void RandomizeOnClick(object? sender, RoutedEventArgs e)
{
ColorGradient.Randomize(6);
SelectedColorStop = ColorGradient.First();
}
}
@@ -22,7 +22,13 @@
</VisualBrush.Visual>
</VisualBrush>
</Styles.Resources>
<StyleInclude Source="/Styles/Border.axaml" />
<!-- Custom controls -->
<StyleInclude Source="/Styles/Controls/GradientPicker.axaml" />
<StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
<!-- Custom styles -->
<StyleInclude Source="/Styles/Border.axaml" />
<StyleInclude Source="/Styles/Button.axaml" />
<StyleInclude Source="/Styles/Condensed.axaml" />
<StyleInclude Source="/Styles/TextBlock.axaml" />
@@ -32,9 +38,6 @@
<StyleInclude Source="/Styles/NumberBox.axaml" />
<StyleInclude Source="/Styles/TreeView.axaml" />
<StyleInclude Source="/Styles/Controls/GradientPicker.axaml" />
<StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
<Style Selector="Window:windows:windows10 /template/ Border#RootBorder">
<!-- This will show if custom accent color setting is used in Settings page-->
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />
@@ -75,4 +75,8 @@
<Setter Property="MinHeight" Value="24" />
</Style>
<Style Selector="gradientPicker|GradientPickerButton.condensed /template/ Border.gradient-display">
<Setter Property="Margin" Value="4" />
<Setter Property="CornerRadius" Value="2" />
</Style>
</Styles>
@@ -236,6 +236,9 @@
</ToolTip.Tip>
<avalonia:MaterialIcon Kind="AxisZRotateCounterclockwise" />
</Button>
<Button Name="Randomize" Classes="icon-button operation-button" ToolTip.Tip="Randomize the gradient.">
<avalonia:MaterialIcon Kind="ShuffleVariant" />
</Button>
</StackPanel>
</Border>
</Grid>
@@ -21,7 +21,7 @@
<Style Selector="gradientPicker|GradientPickerButton">
<Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}"/>
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template">
<ControlTemplate>
@@ -34,13 +34,10 @@
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Border BorderBrush="{DynamicResource ColorPickerButtonOutline}"
BorderThickness="1"
Margin="5"
<Border Classes="gradient-display"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{TemplateBinding LinearGradientBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
Background="{TemplateBinding LinearGradientBrush}" />
</controls:Button>
<Viewbox Grid.Column="1"
@@ -57,5 +54,10 @@
</Setter>
</Style>
<Style Selector="gradientPicker|GradientPickerButton /template/ Border.gradient-display">
<Setter Property="Margin" Value="5" />
<Setter Property="BorderBrush" Value="{DynamicResource ColorPickerButtonOutline}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" />
</Style>
</Styles>