Artemis/src/Artemis.UI.Shared/Controls/ColorPicker.xaml

<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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:shared="clr-namespace:Artemis.UI.Shared"
    x:Class="Artemis.UI.Shared.ColorPicker"
    mc:Ignorable="d"
    d:DesignHeight="101.848" d:DesignWidth="242.956">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Artemis.UI.Shared;component/Resources/ArtemisShared.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ColorPicker.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <shared:ColorToStringConverter x:Key="ColorToStringConverter" />
            <shared:ColorToSolidColorConverter x:Key="ColorToSolidColorConverter" />
            <ControlTemplate x:Key="MaterialDesignOpacitySlider" TargetType="{x:Type Slider}">
                <Border
                    x:Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="True">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="1" Height="8" CornerRadius="4" Background="{StaticResource Checkerboard}">
                            <Border Height="8" CornerRadius="4">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                        <GradientStop Offset="0" Color="Transparent" />
                                        <GradientStop Offset="1.0"
                                                      Color="{Binding Color, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource ColorToSolidColorConverter}}" />
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Border>
                        <Track x:Name="PART_Track"
                               Grid.Row="1"
                               OpacityMask="{x:Null}">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{DynamicResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{DynamicResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb x:Name="Thumb" Width="20" Height="20" VerticalAlignment="Center" Focusable="False" OverridesDefaultStyle="True"
                                       Template="{DynamicResource MaterialDesignColorSliderThumb}">
                                    <Thumb.Foreground>
                                        <SolidColorBrush
                                            Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWay, Converter={StaticResource ColorToSolidColorConverter}}" />
                                    </Thumb.Foreground>
                                </Thumb>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </Border>
            </ControlTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid HorizontalAlignment="Stretch">
        <TextBox x:Name="ColorCodeTextBox"
                 materialDesign:TextFieldAssist.TextBoxViewMargin="1 0 1 0"
                 Text="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource ColorToStringConverter}}"
                 MinWidth="95"
                 MaxLength="9"
                 Margin="0"
                 HorizontalAlignment="Stretch" />

        <Border Width="15"
                Height="15"
                CornerRadius="15"
                Margin="0,0,0,2"
                VerticalAlignment="Center"
                HorizontalAlignment="Right"
                Background="{StaticResource Checkerboard}">
            <Ellipse Stroke="{DynamicResource NormalBorderBrush}" Cursor="Hand" MouseUp="UIElement_OnMouseUp">
                <Ellipse.Fill>
                    <SolidColorBrush Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Mode=OneWay}" />
                </Ellipse.Fill>
            </Ellipse>
        </Border>

        <Popup AllowsTransparency="True"
               Placement="Bottom"
               CustomPopupPlacementCallback="{x:Static materialDesign:CustomPopupPlacementCallbackHelper.LargePopupCallback}"
               PlacementTarget="{Binding ElementName=ColorCodeTextBox}"
               StaysOpen="{Binding StaysOpen, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
               PopupAnimation="Fade"
               IsOpen="{Binding PopupOpen, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
            <materialDesign:Card Width="200" Height="230" Margin="30" materialDesign:ShadowAssist.ShadowDepth="Depth4">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="160" />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <materialDesign:ColorPicker Grid.Row="0"
                                                Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                                                MouseUp="ColorGradient_OnMouseUp"
                                                PreviewMouseDown="Slider_OnMouseDown"
                                                PreviewMouseUp="Slider_OnMouseUp" />
                    <Slider Grid.Row="1" Margin="8"
                            IsMoveToPointEnabled="True"
                            Orientation="Horizontal"
                            Style="{DynamicResource MaterialDesignColorSlider}"
                            Template="{StaticResource MaterialDesignOpacitySlider}"
                            Value="{Binding ColorOpacity, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                            PreviewMouseDown="Slider_OnMouseDown"
                            PreviewMouseUp="Slider_OnMouseUp"
                            Maximum="255" />

                    <!-- Checkboxes don't work inside popups inside tree views, which is where the color picker is regularly used -->
                    <shared:TreeViewPopupCompatibleCheckBox Grid.Row="2"
                                                     x:Name="PreviewCheckBox"
                                                     Margin="10 0"
                                                     VerticalAlignment="Center"
                                                     Style="{StaticResource MaterialDesignCheckBox}" 
                                                     Click="PreviewCheckBoxClick">
                        Preview on devices
                    </shared:TreeViewPopupCompatibleCheckBox>

                </Grid>
            </materialDesign:Card>
        </Popup>
    </Grid>
</UserControl>