Artemis/src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml

<controls:MaterialWindow x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditor"
                         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                         xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
                         xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
                         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"
                         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 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">
                    Gradient saving not implemented yet
                </TextBlock>
                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
                    Soon you'll be able to store different gradients for usage throughout your profiles and quickly select them
                </TextBlock>
            </StackPanel>
        </materialDesign:Card>

        <materialDesign:Card Margin="15 7 15 15" ClipToBounds="False">
            <StackPanel ClipToBounds="False">
                <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
                <Separator Margin="15 5" />

                <ItemsControl ItemsSource="{Binding ColorGradient.Colors}" ClipToBounds="False" Margin="15 0">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas Height="60" Width="437" x:Name="PreviewCanvas">
                                <Canvas.Background>
                                    <VisualBrush Stretch="None" AlignmentY="Top">
                                        <VisualBrush.Visual>
                                            <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Margin="15">
                                                <Rectangle x:Name="Preview"
                                                           VerticalAlignment="Stretch"
                                                           HorizontalAlignment="Stretch"
                                                           Width="{Binding ActualWidth, ElementName=PreviewCanvas}"
                                                           Height="35">
                                                    <Rectangle.Fill>
                                                        <LinearGradientBrush GradientStops="{Binding ColorGradient.Colors, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                            </materialDesign:Card>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Canvas.Background>
                            </Canvas>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="ContentPresenter">
                            <Setter Property="Canvas.Top" Value="40" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:GradientEditorColor
                                ColorGradient="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:MaterialWindow}, Path=ColorGradient}"
                                GradientColor="{Binding}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <TextBlock Margin="15 15 0 0">Stops</TextBlock>
                <Separator Margin="15 5" />

                <Grid Margin="15">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="140" />
                    </Grid.ColumnDefinitions>

                    <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>