RadColorEditor Style: select Transparent color

3 posts, 0 answers
  1. Rebecca
    Rebecca avatar
    28 posts
    Member since:
    Nov 2010

    Posted 08 Feb 2012 Link to this post

    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).

    <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>



    Thank you for your time.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Feb 2012 Link to this post

    Hi Rebecca,

     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. 

    All the best,
    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Rebecca
    Rebecca avatar
    28 posts
    Member since:
    Nov 2010

    Posted 13 Feb 2012 Link to this post

    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
Back to Top