This is a migrated thread and some comments may be shown as answers.

Cancel the split button

3 Answers 79 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Akram
Top achievements
Rank 1
Akram asked on 26 Dec 2012, 05:19 PM
Hi 
how can i make the color picker has only one button, so if the user press everywhere then the drop down open.

i use this event code to do this task but i hope there is a build in functionality to do that

        private void RadColorPicker_MouseUp(object sender, MouseButtonEventArgs e)
        {
            if (e.OriginalSource is RadButton && sender is RadColorPicker)
                (sender as RadColorPicker).IsDropDownOpen = true;
        }


Thanks,
Akram 

3 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 27 Dec 2012, 01:47 PM
Hi Akram,

This behavior is not supported out-of-the-box. Handling the Click event of the button of the RadColorPicker control (not the toggle button, visualizing the arrow) will do the work only when you open the pop-up (the RadColorSelector control) because when that pop-up looses focus it closes it self. Hence you will be able only to open the color selector. On MouseDown, over the button, the pop-up will loose focus and it will close it self and the logic in the handler, for the Click event over the button, will open the pop-up again.

The better approach is to place the RadColorSelector control as an Item of a custom designed RadDropDownButton. Please try out the following snippet and let me know if it works for you:

<telerik:RadDropDownButton Width="40" Height="25">
    <telerik:RadDropDownButton.Content>
        <TextBlock FontFamily="Baskerville Old Face"
                   FontSize="14"
                   FontStyle="Oblique"
                   FontWeight="ExtraBold"
                   Text="A" />
    </telerik:RadDropDownButton.Content>
    <telerik:RadDropDownButton.DropDownContent>
        <telerik:RadColorSelector />
    </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>


All the best,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Tayyaba
Top achievements
Rank 1
answered on 11 Nov 2019, 04:34 AM

Hi Pavlov,

 

I want to have the dropdown button as a rectangle whose color fill should be the selected color of RadColorSelector.
I am trying to achieve this with the following code, but it is not working.

Kindly let me know how can I achieve my desired behaviour.

 

Thanks,

Tayyaba Naz

 

<telerik:RadDropDownButton Width="40" Height="25" DropDownIndicatorVisibility="Collapsed">
                                <telerik:RadDropDownButton.Content>
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding SelectedColor, ElementName=colorSelector}"/>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </telerik:RadDropDownButton.Content>
                                <telerik:RadDropDownButton.DropDownContent>
                                    <telerik:RadColorSelector x:Name="colorSelector"/>
                                </telerik:RadDropDownButton.DropDownContent>
                            </telerik:RadDropDownButton>
0
Dilyan Traykov
Telerik team
answered on 13 Nov 2019, 03:05 PM

Hi Tayyaba,

You've taken the correct approach for achieving the desired result.

The only part missing from the content you've specified is the Width and Height of the Rectangle element. You can bind these to the ActualWidth and ActualHeight of the parent RadDropDownButton. In addition, you may wish to set a Padding of 0 for the button.

        <telerik:RadDropDownButton Padding="0" Width="40" Height="25" DropDownIndicatorVisibility="Collapsed">
            <telerik:RadDropDownButton.Content>
                <Rectangle 
                    Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:RadDropDownButton}}" 
                    Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=telerik:RadDropDownButton}}">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding SelectedColor, ElementName=colorSelector}"/>
                    </Rectangle.Fill>
                </Rectangle>
            </telerik:RadDropDownButton.Content>
            <telerik:RadDropDownButton.DropDownContent>
                <telerik:RadColorSelector x:Name="colorSelector"/>
            </telerik:RadDropDownButton.DropDownContent>
        </telerik:RadDropDownButton>
Please give this a try and let me know if it delivers the desired appearance.

Regards,
Dilyan Traykov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ColorPicker
Asked by
Akram
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Tayyaba
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or