I have created a custom style for the RadColorEditor.
I want to add in the ability for the user to select transparent as the color.
So, I added a Border with an EventTrigger for it's MouseUp event and within that I have a StoryBoard with a ColorAnimation.
I target the SelectedColor of the TemplatedParent (the RadColorEditor) and it sets the SelectedColor to Transparent as expected.
However, after I do this, I can no longer select colors using rectangle (for selecting the saturation) and rectangle-bar (for selecting hue).
I want to add in the ability for the user to select transparent as the color.
So, I added a Border with an EventTrigger for it's MouseUp event and within that I have a StoryBoard with a ColorAnimation.
I target the SelectedColor of the TemplatedParent (the RadColorEditor) and it sets the SelectedColor to Transparent as expected.
However, after I do this, I can no longer select colors using rectangle (for selecting the saturation) and rectangle-bar (for selecting hue).
<Style x:Key="{x:Type telerik:RadColorEditor}" TargetType="{x:Type telerik:RadColorEditor}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#FF848484"/>
<Setter Property="Padding" Value="12"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadColorEditor}">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Margin="0,0,3,3">
<Rectangle>
<Rectangle.Fill>
<Binding ElementName="HuePad" Path="PointerRelativePosition.Y">
<Binding.Converter>
<Telerik_Windows_Controls_ColorEditor_Converters:HueConverter/>
</Binding.Converter>
</Binding>
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="White"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Telerik_Windows_Controls_ColorEditor_Pad:Pad x:Name="SaturationValuePad" MovementDirection="Both">
<Grid>
<Ellipse Height="12" Stroke="Black" StrokeThickness="1" Width="12"/>
<Ellipse Height="10" Stroke="White" StrokeThickness="1" Width="10"/>
</Grid>
</Telerik_Windows_Controls_ColorEditor_Pad:Pad>
</Border>
</Grid>
<Grid Grid.Column="1" Margin="0,0,0,0">
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0.025">
<GradientStop Color="Red"/>
<GradientStop Color="#FEFFFF00" Offset="0.167"/>
<GradientStop Color="#FE00FF00" Offset="0.333"/>
<GradientStop Color="#FE00FFFF" Offset="0.5"/>
<GradientStop Color="#FE0000FF" Offset="0.667"/>
<GradientStop Color="#FEFF00FF" Offset="0.833"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Telerik_Windows_Controls_ColorEditor_Pad:Pad x:Name="HuePad" MovementDirection="Y">
<Grid Height="7" Width="18">
<Path Data="M0,0L3.5085413,3.5085411 0,7.0170822z" Fill="Black" HorizontalAlignment="Left" Height="7" Stretch="Fill" Width="3.5"/>
<Path Data="M0.06,3.5L4,0 4,7 0.06,3.515625z" Fill="Black" HorizontalAlignment="Right" Height="7" Stretch="Fill" Width="3.5"/>
</Grid>
</Telerik_Windows_Controls_ColorEditor_Pad:Pad>
</Border>
</Grid>
<Grid Margin="0,0,3,0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,0,1"
ToolTip="{Binding PreviousColor, RelativeSource={RelativeSource TemplatedParent}}">
<Border.Background>
<Binding Path="PreviousColor" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:ColorToBrushConverter/>
</Binding.Converter>
</Binding>
</Border.Background>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0,1,1,1" Grid.Column="1" Margin="-1,0,0,0"
ToolTip="{Binding SelectedColor, RelativeSource={RelativeSource TemplatedParent}}">
<Border.Background>
<Binding Path="SelectedColor" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:ColorToBrushConverter/>
</Binding.Converter>
</Binding>
</Border.Background>
</Border>
</Grid>
<Border x:Name="TransparentOption" BorderThickness="1,1,2,1"
Background="{StaticResource TemplateEditingSpaceBackground}"
Grid.Row="1"
Grid.Column="1">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseUp" >
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="0:0:0" From="Transparent" To="Transparent"
Storyboard.TargetProperty="SelectedColor"
Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2 Answers, 1 is accepted
0
Hi Rebecca,
Petar Mladenov
the Telerik team
We agree this is a bug in the RadColorEditor. We logged it in our PITS where you can track its status. We also updated your telerik account points and we will do our best to have this fixed for the Q1 2012 Service Pack in the second half of March.
Please excuse us for the inconvenience caused.
Petar Mladenov
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Rebecca
Top achievements
Rank 1
Rank 1
answered on 13 Feb 2012, 08:31 PM
I tried several things to try and get around the problem. The closest solution I came up with was the one where I added a converter that switched the alpha value from 00 to FF whenever a user clicked on the hue or saturation areas. The problem that occurred with this solution was that the "selected" color didn't appear as the user dragged one of the color-selector-controls. It ended up getting a little crazy after that.
In the end, I was able to work around the problem by using a slider control within my ControlTemplate that is bound to the Alpha member of the ColorViewModel. Now the user can select the opacity of the color instead of simply having the option to pick "transparent" as a color.
Thank you for looking into this problem.
-Rebecca
In the end, I was able to work around the problem by using a slider control within my ControlTemplate that is bound to the Alpha member of the ColorViewModel. Now the user can select the opacity of the color instead of simply having the option to pick "transparent" as a color.
Thank you for looking into this problem.
-Rebecca