Artemis/src/Artemis.UI.Shared/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:converters="clr-namespace:Artemis.UI.Shared.Converters" 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:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ColorPicker.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <converters:ColorToStringConverter x:Key="ColorToStringConverter" />
            <converters:ColorToSolidColorConverter x:Key="ColorToSolidColorConverter" />
            <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>
            <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="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignHorizontalColorSliderTrackRepeatButton}" />
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb x:Name="Thumb" Width="20" Height="20" VerticalAlignment="Center" Focusable="False" OverridesDefaultStyle="True"
                                       Template="{StaticResource 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">
        <!-- Style="{StaticResource MaterialDesignFloatingHintTextBox}" -->
        <!-- Padding="0 0 10 0" -->
        <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=PART_TextBox}"
               StaysOpen="False"
               PopupAnimation="Fade"
               IsOpen="{Binding PopupOpen, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
            <materialDesign:Card Width="200" Height="200" Margin="30" materialDesign:ShadowAssist.ShadowDepth="Depth4">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="160" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <materialDesign:ColorPicker Grid.Row="0" Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
                    <Slider Grid.Row="1" Margin="8"
                            IsMoveToPointEnabled="True"
                            Orientation="Horizontal"
                            Style="{StaticResource MaterialDesignColorSlider}"
                            Template="{StaticResource MaterialDesignOpacitySlider}"
                            Value="{Binding ColorOpacity, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                            Maximum="255" />
                </Grid>
            </materialDesign:Card>
        </Popup>
    </Grid>
</UserControl>