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

<UserControl x:ClassModifier="internal"
             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:shared="clr-namespace:Artemis.UI.Shared"
             mc:Ignorable="d"
             Background="{DynamicResource MaterialDesignPaper}"
             FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
             Width="400"
             Height="450"
             d:DesignHeight="450"
             d:DesignWidth="400"
             d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
    <UserControl.Resources>
        <shared:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
        <shared: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>
    <UserControl.InputBindings>
        <KeyBinding Key="Delete" Command="{s:Action RemoveColorStop}" CommandParameter="{Binding SelectedColorStopViewModel}"/>
    </UserControl.InputBindings>
    <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">
            <Grid>
                <TextBlock Margin="0 5">Gradient</TextBlock>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource MaterialDesignFlatButton}" 
                        Margin="0 0 5 4"
                        Padding="0"
                        Command="{s:Action SpreadColorStops}" 
                        ToolTip="Spread Stops" IsEnabled="{Binding HasMoreThanOneStop}" 
                        HorizontalAlignment="Left"
                        Height="25" Width="25">
                        <materialDesign:PackIcon Kind="ArrowLeftRight"/>
                    </Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" 
                        Margin="0 0 5 4"
                        Padding="0"
                        Command="{s:Action ToggleSeam}" 
                        ToolTip="Toggle Seamless" IsEnabled="{Binding HasMoreThanOneStop}" 
                        HorizontalAlignment="Left"
                        Height="25" Width="25">
                        <materialDesign:PackIcon Kind="SineWave"/>
                    </Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" 
                        Margin="0 0 5 4"
                        Padding="0"
                        Command="{s:Action FlipColorStops}" 
                        ToolTip="Flip Stops" IsEnabled="{Binding HasMoreThanOneStop}" 
                        HorizontalAlignment="Left"
                        Height="25" Width="25">
                        <materialDesign:PackIcon Kind="FlipHorizontal"/>
                    </Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" 
                        Margin="0 0 5 4"
                        Padding="0"
                        Command="{s:Action RotateColorStops}" 
                        ToolTip="Rotate Stops (shift to invert)" IsEnabled="{Binding HasMoreThanOneStop}" 
                        HorizontalAlignment="Left"
                        Height="25" Width="25">
                        <materialDesign:PackIcon Kind="AxisZRotateCounterclockwise"/>
                    </Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" 
                        Margin="0 0 5 4"
                        Padding="0"
                        Command="{s:Action ShowClearGradientPopup}" 
                        ToolTip="Clear All Color Stops" IsEnabled="{Binding HasMoreThanOneStop}" 
                        HorizontalAlignment="Left"
                        Height="25" Width="25"
                        x:Name="ClearGradientButton">
                        <StackPanel>
                            <materialDesign:PackIcon Kind="DeleteSweep"/>
                        </StackPanel>
                    </Button>
                    <Popup
                        AllowsTransparency="True"
                        Placement="Right"
                        VerticalOffset="-25"
                        HorizontalOffset="-5"
                        CustomPopupPlacementCallback="{x:Static materialDesign:CustomPopupPlacementCallbackHelper.LargePopupCallback}"
                        PlacementTarget="{Binding ElementName=ClearGradientButton}"
                        StaysOpen="False"
                        PopupAnimation="Fade"
                        IsOpen="{Binding ClearGradientPopupOpen, Mode=OneWay}">
                        <materialDesign:Card Margin="30" Padding="12" materialDesign:ShadowAssist.ShadowDepth="Depth4" >
                            <StackPanel HorizontalAlignment="Center">
                                <TextBlock Style="{StaticResource MaterialDesignSubtitle2TextBlock}" TextAlignment="Center" Margin="0 0 0 10">Clear Gradient?</TextBlock>
                                <StackPanel Orientation="Horizontal">
                                    <Button Command="{s:Action HideClearGradientPopup}" Style="{StaticResource MaterialDesignOutlinedButton}" Margin="0 0 10 0">No</Button>
                                    <Button Command="{s:Action ClearGradientAndHide}">Yes</Button>
                                </StackPanel>
                            </StackPanel>
                        </materialDesign:Card>
                    </Popup>
                </StackPanel>
            </Grid>
            <Border Background="{StaticResource Checkerboard}">
                <Rectangle x:Name="Preview" Height="40" shared:SizeObserver.Observe="True" shared:SizeObserver.ObservedWidth="{Binding PreviewWidth, Mode=OneWayToSource}">
                    <Rectangle.Fill>
                        <LinearGradientBrush
                            GradientStops="{Binding ColorGradient, 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 6 0 0" FontWeight="Bold">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,1,0,0">Color:</Label>
                    <shared: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="30"
                             Text="{Binding SelectedColorStopViewModel.OffsetPercent, UpdateSourceTrigger=PropertyChanged}"
                             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}"
                        ToolTip="Delete Selected Stop">
                    <Button.Resources>
                        <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#c94848"/>
                    </Button.Resources>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Delete"/>
                        <TextBlock Margin="4 0 0 0">Delete</TextBlock>
                    </StackPanel>
                </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>