<UserControl x:Class="Signum.Windows.ColorUtils.ColorSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:Signum.Windows"
xmlns:mc="clr-namespace:Signum.Windows.ColorUtils"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"
x:Name="me">
<UserControl.Resources>
<DrawingBrush
x:Key="CheckerBrush"
Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0 100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="LightGray">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0 50,50" />
<RectangleGeometry Rect="50,50 50,50" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
<!-- Spectrum Slider Styles -->
<Style x:Key="SliderRepeatButtonStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle"
Value="true"/>
<Setter Property="IsTabStop"
Value="false"/>
<Setter Property="Focusable"
Value="false"/>
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type mc:ColorThumb}"
TargetType="{x:Type mc:ColorThumb}">
<Setter Property="Foreground" Value="{x:Null}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Height" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type mc:ColorThumb}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Ellipse Name="arrow" Stroke="#FFFFFFFF" StrokeThickness="2">
<!--<Ellipse.Fill>
<SolidColorBrush Color="{Binding ThumbColor, RelativeSource={RelativeSource TemplatedParent}, diagnostics:PresentationTraceSources.TraceLevel=High}" />
</Ellipse.Fill>-->
</Ellipse>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type mc:SpectrumSlider}"
TargetType="{x:Type mc:SpectrumSlider}">
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Minimum" Value="0"/>
<Setter Property="Maximum" Value="100"/>
<Setter Property="TickFrequency" Value="0.001" />
<Setter Property="IsSnapToTickEnabled" Value="True" />
<Setter Property="IsDirectionReversed" Value="False" />
<Setter Property="Value" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type mc:SpectrumSlider}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Height="{TemplateBinding Height}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="PART_TrackBackground"
Grid.Column="1" Margin="4,4,4,4">
<Rectangle x:Name="PART_SpectrumDisplay"
Stretch="Fill" VerticalAlignment="Stretch" />
</Border>
<Canvas Grid.Column="1"
HorizontalAlignment="Stretch">
<Rectangle x:Name="PART_SelectionRange"
Canvas.Left="1"
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
Width="2.0"
Visibility="Hidden" />
</Canvas>
<Track Grid.Column="1" x:Name="PART_Track" Grid.ColumnSpan="2">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}"
Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}"
Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<mc:ColorThumb
x:Name="Thumb"
Height="20"
ThumbColor="{Binding SelectedColor, RelativeSource={RelativeSource TemplatedParent}}" />
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelectionRangeEnabled" Value="True">
<Setter TargetName="PART_SelectionRange"
Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="Width" Value="Auto">
<Setter Property="MinWidth" Value="21"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="104"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- End Spectrum Slider -->
<!-- ColorPicker Styles-->
</UserControl.Resources>
<Grid Width="183.03">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="132" />
<ColumnDefinition Width="Auto" MinWidth="25" />
<ColumnDefinition Width="Auto" MinWidth="60.03" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0"
Background="{StaticResource CheckerBrush}"
Grid.RowSpan="1" Grid.ColumnSpan="1" HorizontalAlignment="Center"
Margin="0,0,0,0"
VerticalAlignment="Center">
<Border x:Name="PART_ColorDetail"
MouseLeftButtonDown="PART_ColorDetail_MouseLeftButtonDown"
MouseMove="PART_ColorDetail_MouseMove"
MouseLeftButtonUp="PART_ColorDetail_MouseLeftButtonUp"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Cursor="Cross" Width="127" Height="127">
<Border.Background>
<DrawingBrush
Opacity="{Binding Path=Value, ElementName=opacitySlider}">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<SolidColorBrush
Color="{Binding Path=SelectedColor, ElementName=PART_ColorSlider}" />
</GeometryDrawing.Brush>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="1.0"
Color="{Binding Path=SelectedColor, ElementName=PART_ColorSlider}" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
<DrawingGroup PresentationOptions:Freeze="True">
<DrawingGroup.OpacityMask>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0.0" Color="#FF000000" />
<GradientStop Offset="1" Color="#00000000" />
</LinearGradientBrush>
</DrawingGroup.OpacityMask>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
<Path
x:Name="PART_ColorMarker"
StrokeThickness="2"
Cursor="Cross"
Fill="Transparent">
<Path.Data>
<EllipseGeometry RadiusX="7" RadiusY="7" />
</Path.Data>
<Path.Stroke>
<SolidColorBrush
x:Name="markerBrush"
Color="White" />
</Path.Stroke>
</Path>
</Border>
</Border>
<mc:SpectrumSlider
x:Name="PART_ColorSlider"
Grid.Column="1" Grid.Row="0"
Value="0"
IsMoveToPointEnabled="True"
IsSnapToTickEnabled="False"
Maximum="360" Margin="2,2,2,2"
ValueChanged="PART_ColorSlider_ValueChanged"
/>
<Border
Background="{StaticResource CheckerBrush}"
VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="2" Margin="2,2,0,2">
<Slider
x:Name="opacitySlider"
Orientation="Vertical"
Minimum="0" Maximum="1"
TickFrequency="0.01"
SmallChange="0.01"
LargeChange="0.02"
ValueChanged="opacitySlider_ValueChanged">
<Slider.Background>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
<GradientStop Offset="0.0" Color="Transparent" />
<GradientStop Offset="1.0" Color="Black" />
</LinearGradientBrush>
</Slider.Background>
</Slider>
</Border>
<mc:RGBTextBox HorizontalAlignment="Stretch" Color="{Binding SelectedColor, Mode=TwoWay, ElementName=me, UpdateSourceTrigger=PropertyChanged}" Grid.Column="0" Grid.Row="1"/>
<TextBox MaxLength="9" x:Name="PART_tbHex" Text="{Binding Path=SelectedColor, Mode=TwoWay, ElementName=me, UpdateSourceTrigger=PropertyChanged}" Grid.Column="0" Grid.Row="2" Margin="2,2,2,2" ToolTip="Hexadecimal" />
<Border BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
Background="{StaticResource CheckerBrush}" Grid.Column="2" Grid.RowSpan="2" Grid.Row="1" Grid.ColumnSpan="1"
Margin="-23,2,0,2" Width="47" HorizontalAlignment="Left">
<Rectangle Margin="2,3,3,3"
RadiusX="5" RadiusY="5"
Stroke="Black"
Stretch="Fill"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding SelectedColor, ElementName=me, Mode=OneWay}" />
</Rectangle.Fill>
</Rectangle>
</Border>
</Grid>
</UserControl>
Submit an article or tip