Cannot customize RadColorPicker as desired

10 posts, 1 answers
  1. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 05 Feb 2018 Link to this post

    I am using the very latest (as of this writing, 5-FEB-2018) Telerik UI for WPF

    I just started using the RadColorPicker and saw that it draws text on the button.  I wanted just a button with the chosen color on it.  No text.   I thought it would be just some sort of simple property.  But as far as I can tell, it is not.  Now maybe it's just me but this seems almost fundamental.  Why would you force people to have text on a color selector?   

    I see someone asking this very question 6 years ago  ("Why does my colour picker look like a FONT colour picker?").  But even now, six years later I still don't see any sort of simple property to do this.  Am I missing something?

        https://www.telerik.com/forums/why-does-my-colour-picker-look-like-a-font-colour-picker

    I downloaded the sample solution that was in that thread .  It uses an obsolete property, so I continued following the instructions and made the adjustments recommended in the "Backwards compatibility" section  It still does not work for me

    I saw another thread in which someone tried just putting a color selector inside of a RadDropDownBox.   but that solution is overkill for me.  I want to use the ColorPicker.

    I've attached a picture with an example of what I *want* directly above an example of what I'm currently getting.  In the picture, the square next to "Foreground Color" is what I want.  And the square next to "Selected Color" is what I'm getting.

    Is there a more up-to-date solution for this?  Or can someone at least tell me what changes to make the the default template


     

  2. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 05 Feb 2018 Link to this post

    I should say that I also make a copy of the RaceColorPicker template but that thing is so massive that I can't figure out what to change.  So even some guidance there would be helpful.  As it is, I can't even see where it is drawing the text so I can't see how to alter it.
  3. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    912 posts

    Posted 08 Feb 2018 Link to this post

    Hello Joe,

    To achieve the desired result, you can define a custom ContentTemplate for the control, like so:

    <telerik:RadColorPicker SelectedColor="Red">
        <telerik:RadColorPicker.ContentTemplate>
            <DataTemplate>
                    <Rectangle Width="27" Height="20">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding}"/>
                        </Rectangle.Fill>
                    </Rectangle>
            </DataTemplate>
        </telerik:RadColorPicker.ContentTemplate>
    </telerik:RadColorPicker>

    Please note that this Width and Height are specific to the Office_Black theme. If you're using another theme, you should update them accordingly.

    Do let me know if this works for you.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 12 Feb 2018 in reply to Dilyan Traykov Link to this post

    Hi Dilyan,

    Thank you for the reply.  This partly works for me.  It does give me a solid block.  But I cannot make the block fill up the the button.  It doesn't matter how large I make the rectangle in the xaml, its size on the button remains only a subset of the button.  See the attached image.  I even made it as big as 80 x 80.  It made no difference

    I then thought that perhaps it was the control's padding and so I tried setting that to zero but it still did not help.  

    Any idea what I can do?  

    Here is my current XAML.  I put it all in a Style which I apply to the RadColorPicker

                <Style x:Key ="RadColorPickerStyle" TargetType="{x:Type tk:RadColorPicker}">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Rectangle Width="80" Height="80">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="{Binding}"/>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>


  5. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    407 posts

    Posted 15 Feb 2018 Link to this post

    Hello Joe,

    Thank you for the attached photo. 

    I am afraid I wasn't able to replicate the described scenario on my end. That is why I am attaching the project that I used. May I kindly ask you to modify it in order to illustrate your scenario or send over a sample project of your own? This way I will be able to test it on my side and better assist you. 

    I am looking forward to your project.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 16 Feb 2018 in reply to Vladimir Stoyanov Link to this post

    Hi Vladimir,

    The difference appears to be that I am using the Telerik Windows8Touch theme.

    I took your sample application and made one small edit:  In then MainWindow constructor (in MainWindow.xaml.cs), I put the following line of code, just above the call to InitializeComponent (along with the appropriate using statement)

    StyleManager.ApplicationTheme = new Windows8TouchTheme();

     

    (This is what I must do in my own app.)  So now, MainWindow.xaml.cs looks like this

    using Telerik.Windows.Controls;
     
    namespace ColorPickerTests
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                StyleManager.ApplicationTheme = new Windows8TouchTheme();
     
                InitializeComponent();
            }
        }
    }

    If you do this to your application, your square will look small just like mine, and no amount of sizing it in the XAML data template will make it fill that square

    I have attached an image of how yours looks like with my changes.

  7. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 19 Feb 2018 in reply to Joe Link to this post

    Would this task be made easier by me switching over to the NoXaml approach? 

    If I understand the difference correctly,  when I copy the templates in Blend with my current approach (the regular, XAML dll approach), I'm probably not getting a  true copy of the actual template used in Windows8Touch, am I?

  8. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 20 Feb 2018 in reply to Vladimir Stoyanov Link to this post

    I tried to actually post the project itself but this forum will not permit me to attach a ZIP file.  It only lets me attach .GIF, .JPG, .JPEG and .PNG files.   Really the one-line change I described above -- to the very project you posted -- will show you what I mean.
  9. Answer
    Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    407 posts

    Posted 21 Feb 2018 Link to this post

    Hello Joe,

    Thank you for the additional information. 

    In order to achieve your requirements, you can set the padding of the RadToggleButton within the RadColorPicker to 0. You can do that in the Loaded event of the RadColorPicker and use the ChildrenOfType extension method in order to get a reference to the button. I am attaching a sample project demonstrating this for your reference.

    As for the difference between the Xaml and NoXaml binaries, the templates of the controls in both of them are the same. What is different is that the Xaml dlls contain styles and templates of the UI controls, for all themes. And the NoXaml ones don't contain any styles and that is why, you need to merge the necessary ResourceDictionaries before using them. You can read some more about that in the Xaml vs NoXaml article in our documentation.

    I hope this helps. Let me know if I can be of any further assistance.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  10. Joe
    Joe avatar
    51 posts
    Member since:
    Nov 2017

    Posted 21 Feb 2018 in reply to Vladimir Stoyanov Link to this post

    This is perfect, thank you!
Back to Top