UI - Added gradient editor dialog

2026-11-12 11:56:30 +00:00 · 2020-03-09 22:35:16 +01:00
1 parent 11b3dcdce9
commit 38b6ca32a3
@@ -68,14 +68,8 @@
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
-                                <Thumb
-                                    x:Name="Thumb"
-                                    Width="20"
-                                    Height="20"
-                                    VerticalAlignment="Center"
-                                    Focusable="False"
-                                    OverridesDefaultStyle="True"
-                                    Template="{StaticResource MaterialDesignColorSliderThumb}">
+                                <Thumb x:Name="Thumb" Width="20" Height="20" VerticalAlignment="Center" Focusable="False" OverridesDefaultStyle="True"
+                                       Template="{StaticResource MaterialDesignColorSliderThumb}">
                                    <Thumb.Foreground>
                                        <SolidColorBrush
                                            Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWay, Converter={StaticResource ColorToSolidColorConverter}}" />
@@ -97,7 +91,6 @@
                 MinWidth="95"
                 MaxLength="9"
                 Margin="0"
-                 Padding="-1"
                 HorizontalAlignment="Stretch" />

        <Border Width="15"
@@ -47,18 +47,18 @@ namespace Artemis.UI.Shared

        private static void ColorGradientPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
-            var colorPicker = (GradientPicker) d;
-            if (colorPicker._inCallback)
+            var gradientPicker = (GradientPicker) d;
+            if (gradientPicker._inCallback)
                return;

-            colorPicker._inCallback = true;
-            colorPicker.OnPropertyChanged(nameof(ColorGradient));
-            colorPicker._inCallback = false;
+            gradientPicker._inCallback = true;
+            gradientPicker.OnPropertyChanged(nameof(ColorGradient));
+            gradientPicker._inCallback = false;
        }

        private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
        {
-            var gradientEditor = new GradientEditor(ColorGradientProperty);
+            var gradientEditor = new GradientEditor(ColorGradient);
            gradientEditor.ShowDialog();
        }
    }
@@ -8,22 +8,27 @@
                         xmlns:s="https://github.com/canton7/Stylet"
                         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                         xmlns:shared="clr-namespace:Artemis.UI.Shared"
+                         xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
                         mc:Ignorable="d"
                         Title="Gradient Editor"
                         Background="{DynamicResource MaterialDesignPaper}"
                         FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
                         UseLayoutRounding="True"
-                         Width="800"
-                         Height="450"
+                         Width="500"
+                         Height="600"
                         ResizeMode="NoResize"
                         Icon="/Resources/Images/Logo/logo-512.png"
+                         FadeContentIfInactive="False"
                         d:DesignHeight="450"
                         d:DesignWidth="800">
+    <controls:MaterialWindow.Resources>
+        <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
+    </controls:MaterialWindow.Resources>
    <StackPanel>
-        <materialDesign:Card >
+        <materialDesign:Card Margin="15 15 15 7" Padding="15">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Margin="16">
                <materialDesign:PackIcon Kind="Crane" Width="80" Height="80" HorizontalAlignment="Center" />
-                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center" Margin="0 15">
+                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
                    Gradient saving not implemented yet
                </TextBlock>
                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
@@ -32,28 +37,69 @@
            </StackPanel>
        </materialDesign:Card>

-        <materialDesign:Card>
-            <Grid>
-                <Grid.RowDefinitions>
-                    <RowDefinition />
-                    <RowDefinition />
-                    <RowDefinition />
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                    <ColumnDefinition />
-                </Grid.ColumnDefinitions>
+        <materialDesign:Card Margin="15 7 15 15" ClipToBounds="False">
+            <StackPanel ClipToBounds="False">
+                <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
+                <Separator Margin="15 5" />

-                <Separator Grid.Row="1" Grid.ColumnSpan="4" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0 8 0" />
+                <ItemsControl ItemsSource="{Binding ColorGradient.Colors, Mode=OneWay}" ClipToBounds="False" Margin="15 0">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas Height="60" Width="435" x:Name="PreviewCanvas" >
+                                <Canvas.Background>
+                                    <VisualBrush Stretch="None" AlignmentY="Top">
+                                        <VisualBrush.Visual>
+                                            <Border Width="{Binding ActualWidth, ElementName=PreviewCanvas}" Height="50">
+                                                <Rectangle x:Name="Preview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                                                    <Rectangle.Fill>
+                                                        <LinearGradientBrush GradientStops="{Binding ColorGradient, Mode=OneWay, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
+                                                    </Rectangle.Fill>
+                                                </Rectangle>
+                                            </Border>
+                                        </VisualBrush.Visual>
+                                    </VisualBrush>
+                                </Canvas.Background>
+                            </Canvas>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemContainerStyle>
+                        <Style TargetType="ContentPresenter">
+                            <Setter Property="Canvas.Top" Value="50" />
+                        </Style>
+                    </ItemsControl.ItemContainerStyle>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <local:GradientEditorColor GradientColor="{Binding}"></local:GradientEditorColor>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                
+                <TextBlock Margin="15 15 0 0">Stops</TextBlock>
+                <Separator Margin="15 5" />

-                <Label Grid.Row="0" Grid.Column="0">Color:</Label>
-                <shared:ColorPicker x:Name="CurrentColor" Grid.Row="0" Grid.Column="1" />
+                <Grid Margin="15">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="70" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="70" />
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="140" />
+                    </Grid.ColumnDefinitions>

-                <Label Grid.Row="0" Grid.Column="2">Location:</Label>
-                <TextBox x:Name="CurrentLocation" Grid.Row="0" Grid.Column="3" />
-            </Grid>
+                    <Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
+                    <shared:ColorPicker Grid.Row="0" Grid.Column="1" x:Name="CurrentColor" Width="85" />
+
+                    <Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
+                    <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
+                        <TextBox x:Name="CurrentLocation" Width="40" />
+                        <Label>%</Label>
+                    </StackPanel>
+
+                    <Button Grid.Row="0" Grid.Column="4" Style="{StaticResource MaterialDesignRaisedButton}" Width="80" Height="25">
+                        Delete
+                    </Button>
+                </Grid>
+            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
 </controls:MaterialWindow>
@@ -1,5 +1,8 @@
-using System.Windows;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Windows;
 using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Annotations;
 using MaterialDesignExtensions.Controls;

 namespace Artemis.UI.Shared.Screens.GradientEditor
@@ -7,20 +10,50 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
    /// <summary>
    ///     Interaction logic for GradientEditor.xaml
    /// </summary>
-    public partial class GradientEditor : MaterialWindow
+    public partial class GradientEditor : MaterialWindow, INotifyPropertyChanged
    {
-        public GradientEditor(DependencyProperty colorGradientProperty)
-        {
-            ColorGradientProperty = colorGradientProperty;
-            InitializeComponent();
-        }
+        public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientEditor),
+            new FrameworkPropertyMetadata(default(ColorGradient), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ColorGradientPropertyChangedCallback));

-        public DependencyProperty ColorGradientProperty { get; }
+        public static readonly RoutedEvent ColorGradientChangedEvent =
+            EventManager.RegisterRoutedEvent(
+                nameof(ColorGradient),
+                RoutingStrategy.Bubble,
+                typeof(RoutedPropertyChangedEventHandler<ColorGradient>),
+                typeof(GradientEditor));
+
+        private bool _inCallback;
+
+        public GradientEditor(ColorGradient colorGradient)
+        {
+            InitializeComponent();
+            DataContext = this;
+            ColorGradient = colorGradient;
+        }

        public ColorGradient ColorGradient
        {
            get => (ColorGradient) GetValue(ColorGradientProperty);
            set => SetValue(ColorGradientProperty, value);
        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        [NotifyPropertyChangedInvocator]
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private static void ColorGradientPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var editor = (GradientEditor) d;
+            if (editor._inCallback)
+                return;
+
+            editor._inCallback = true;
+            editor.OnPropertyChanged(nameof(ColorGradient));
+            editor._inCallback = false;
+        }
    }
 }
@@ -0,0 +1,25 @@
+<UserControl
+    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:Artemis.UI.Shared.Screens.GradientEditor"
+    x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorColor"
+    mc:Ignorable="d"
+    d:DesignHeight="450" d:DesignWidth="800">
+    <Canvas>
+        <Path x:Name="ColorStop"
+              Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
+              Stroke="White"
+              StrokeThickness="2"
+              Cursor="Hand">
+            <Path.RenderTransform>
+                <TransformGroup>
+                    <RotateTransform Angle="180" />
+                    <TranslateTransform X="14" Y="33" />
+                    <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
+                </TransformGroup>
+            </Path.RenderTransform>
+        </Path>
+    </Canvas>
+</UserControl>
@@ -0,0 +1,71 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Annotations;
+
+namespace Artemis.UI.Shared.Screens.GradientEditor
+{
+    /// <summary>
+    ///     Interaction logic for GradientEditorColor.xaml
+    /// </summary>
+    public partial class GradientEditorColor : UserControl, INotifyPropertyChanged
+    {
+        public static readonly DependencyProperty ColorGradientColorProperty = DependencyProperty.Register(nameof(GradientColor), typeof(ColorGradientColor), typeof(GradientEditorColor),
+            new FrameworkPropertyMetadata(default(ColorGradientColor), ColorGradientColorPropertyChangedCallback));
+
+        private bool _inCallback;
+
+        public GradientEditorColor()
+        {
+            InitializeComponent();
+        }
+
+        public ColorGradientColor GradientColor
+        {
+            get => (ColorGradientColor) GetValue(ColorGradientColorProperty);
+            set => SetValue(ColorGradientColorProperty, value);
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        [NotifyPropertyChangedInvocator]
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private static void ColorGradientColorPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var self = (GradientEditorColor) d;
+            if (self._inCallback)
+                return;
+
+            self._inCallback = true;
+            self.OnPropertyChanged(nameof(GradientColor));
+
+            // Get the parent canvas
+            DependencyObject parent = null;
+            DependencyObject current = self;
+            while (current != null && !(parent is Canvas))
+            {
+                parent = VisualTreeHelper.GetParent(current);
+                current = parent;
+            }
+
+            if (parent is Canvas canvas)
+                self.ColorStop.SetValue(Canvas.LeftProperty, (double) 435f * self.GradientColor.Position);
+
+            self.ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
+                self.GradientColor.Color.Alpha,
+                self.GradientColor.Color.Red,
+                self.GradientColor.Color.Green,
+                self.GradientColor.Color.Blue
+            ));
+
+            self._inCallback = false;
+        }
+    }
+}