Cancel the split button

[Akram]

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 

[Pavel R. Pavlov]

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

[Tayyaba]

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>

[Dilyan Traykov]

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