Cannot customize RadColorPicker as desired

[Joe]

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

 

[Joe]

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.

[Dilyan Traykov]

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

[Joe]

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>

[Vladimir Stoyanov]

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

[Joe]

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.

[Joe]

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?

[Joe]

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.

[Vladimir Stoyanov]

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

[Joe]

This is perfect, thank you!