Cancel the split button

4 posts, 0 answers
  1. Akram
    Akram avatar
    45 posts
    Member since:
    Dec 2012

    Posted 26 Dec 2012 Link to this post

    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 
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1251 posts

    Posted 27 Dec 2012 Link to this post

    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.

  3. Tayyaba
    Tayyaba avatar
    43 posts
    Member since:
    Apr 2017

    Posted 10 Nov in reply to Pavel R. Pavlov Link to this post

    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>
  4. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1021 posts

    Posted 4 days and 18 hours ago Link to this post

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