KeyboardAudioVisualizer/KeyboardAudioVisualizer/Styles/GradientEditor.xaml

<styles:CachedResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                 xmlns:controls="clr-namespace:KeyboardAudioVisualizer.Controls"
                                 xmlns:styles="clr-namespace:KeyboardAudioVisualizer.Styles">

    <styles:CachedResourceDictionary.MergedDictionaries>
        <styles:CachedResourceDictionary Source="/KeyboardAudioVisualizer;component/Styles/ColorSelector.xaml" />
    </styles:CachedResourceDictionary.MergedDictionaries>

    <Style x:Key="StyleGradientStop"
           TargetType="ContentControl">

        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Width" Value="12" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#FFFFFFFF" />

        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type GradientStop}">
                    <Grid>
                        <Path Stretch="Fill"
                              Data="M 0.5,0 L 0,0.25 L 0,1 L 1,1 L 1,0.25 Z"
                              StrokeThickness="0"
                              Fill="{StaticResource BrushChessboardSmall}" />
                        <Path Stretch="Fill"
                              Data="M 0.5,0 L 0,0.25 L 0,1 L 1,1 L 1,0.25 Z"
                              Stroke="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=ContentControl}}" 
                              StrokeThickness="{Binding BorderThickness, RelativeSource={RelativeSource AncestorType=ContentControl}}"
                              Fill="{Binding Background, RelativeSource={RelativeSource AncestorType=ContentControl}}" />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <DataTrigger Binding="{Binding (controls:GradientEditor.IsSelected), RelativeSource={RelativeSource Self}}" Value="True">
                <Setter Property="BorderBrush" Value="#FF808080" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="StyleGradientEditor"
           TargetType="{x:Type controls:GradientEditor}">

        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Height" Value="60" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="GradientStopStyle" Value="{StaticResource StyleGradientStop}" />

        <Setter Property="ColorSelectorTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type GradientStop}">
                    <GroupBox>
                        <controls:ColorSelector Foreground="#FFFFFFFF" SelectedColor="{Binding Color}" />
                    </GroupBox>
                </DataTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:GradientEditor}">
                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">

                        <DockPanel>
                            <Border DockPanel.Dock="Bottom"
                                    Height="16">
                                <Canvas x:Name="PART_Stops" 
                                        VerticalAlignment="Stretch" 
                                        HorizontalAlignment="Stretch"
                                        Background="Transparent" />
                            </Border>

                            <Border Background="{StaticResource BrushChessboard}">
                                <Canvas x:Name="PART_Gradient"
                                        VerticalAlignment="Stretch" 
                                        HorizontalAlignment="Stretch"
                                        Background="Transparent" />
                            </Border>
                        </DockPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type controls:GradientEditor}" BasedOn="{StaticResource StyleGradientEditor}" />

</styles:CachedResourceDictionary>