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

<UserControl x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
             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:converters="clr-namespace:Artemis.UI.Shared.Converters"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
             xmlns:utilities="clr-namespace:Artemis.UI.Shared.Utilities"
             mc:Ignorable="d"
             Background="{DynamicResource MaterialDesignPaper}"
             FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
             Width="400"
             Height="400"
             d:DesignHeight="450"
             d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
    <UserControl.Resources>
        <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />

        <VisualBrush x:Key="Checkerboard" TileMode="Tile" Stretch="Uniform" ViewportUnits="Absolute" Viewport="0,0,10,10">
            <VisualBrush.Visual>
                <Grid Width="10" Height="10">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Gray" />
                    <Rectangle Grid.Row="0" Grid.Column="1" Fill="White" />
                    <Rectangle Grid.Row="1" Grid.Column="0" Fill="White" />
                    <Rectangle Grid.Row="1" Grid.Column="1" Fill="Gray" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </UserControl.Resources>
    <Grid Margin="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="0 5" HorizontalAlignment="Center" VerticalAlignment="Center">
            <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>
        <Separator Grid.Row="1" Margin="0 5" />
        <StackPanel Grid.Row="2" Margin="0 5" ClipToBounds="False">
            <TextBlock Margin="0 5">Gradient</TextBlock>

            <Border Background="{StaticResource Checkerboard}">
                <Rectangle x:Name="Preview" Height="40" utilities:SizeObserver.Observe="True" utilities:SizeObserver.ObservedWidth="{Binding PreviewWidth, Mode=OneWayToSource}">
                    <Rectangle.Fill>
                        <LinearGradientBrush
                            GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}"
                            EndPoint="1,0"
                            StartPoint="0,0" />
                    </Rectangle.Fill>
                </Rectangle>
            </Border>

            <ItemsControl ItemsSource="{Binding ColorStopViewModels}" MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding Offset}" />
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl s:View.Model="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <TextBlock Margin="0 5">Selected stop</TextBlock>

            <Grid Margin="0 5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <Label HorizontalAlignment="Left" Margin="-5,0,0,0">Color:</Label>
                    <controls1:ColorPicker
                        x:Name="CurrentColor"
                        Width="85"
                        Margin="5,0,15,0"
                        Color="{Binding Path=SelectedColorStopViewModel.ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}"
                        IsEnabled="{Binding HasSelectedColorStopViewModel}" />

                    <Label HorizontalAlignment="Center">Location:</Label>
                    <TextBox Width="40"
                             Text="{Binding SelectedColorStopViewModel.OffsetPercent}"
                             IsEnabled="{Binding HasSelectedColorStopViewModel}"
                             materialDesign:HintAssist.Hint="0"
                             Margin="5 0 0 0" />
                    <Label>%</Label>
                </StackPanel>
                <Button Grid.Column="1"
                        Style="{StaticResource MaterialDesignOutlinedButton}"
                        Height="25"
                        Margin="8,0,0,0"
                        IsEnabled="{Binding HasSelectedColorStopViewModel}"
                        Command="{s:Action RemoveColorStop}"
                        CommandParameter="{Binding SelectedColorStopViewModel}">
                    DELETE
                </Button>
            </Grid>
        </StackPanel>

        <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Style="{StaticResource MaterialDesignOutlinedButton}" IsCancel="True" Margin="0 8 8 0"
                    Command="{s:Action Cancel}" Content="CANCEL" />
            <Button Style="{StaticResource MaterialDesignFlatMidBgButton}" IsDefault="True" Margin="0 8 0 0"
                    Command="{s:Action Confirm}" Content="ACCEPT" />
        </StackPanel>
    </Grid>
</UserControl>