how to change the background color of a color picker control when expanded (black theme) to a customized color ?
This is a pretty minor issue but the #FF808080 gray appears twice in the default color picker (once at the bottom of first column and once at top of 2nd column) which can lead to a little strangeness.
If you start the color picker with this color selected, it will show both boxes as selected.
The other strangeness I was able to duplicate in the WPF demos (R1 2022SP1) is if I have the 2nd column box gray selected and close the color picker, then when I reopen it the gray at the bottom of the 1st column will be selected.
So start with this:
Click gray at bottom of 1st column, then reopen the screen. The box at the top of the 2nd color will remain selected.
There is a little bit of strangeness too when you have that shade of gray selected and then you click down into one of the "standard colors", it appears to leave the selected border around the original gray color (but does correctly put the selected border around the standard color).
Am I misinterpreting this or is this a bug?
Hellp
In the previous post I asked a question and got an answer..
But there was a problem.
It is related to number 1. ( https://www.telerik.com/forums/is-a-custom-color-picker-possible )
It runs fine until the build is successful and I start debugging and finish.
Using <Setter Property = "local : CustomColorPickerOpenBehavior"Value = "True"/> crashes the designer.
Where xaml designer Exception was thrown.
InvalidOperationException: Sequence contains no matching element
Deleting the CustomColorPickerOpenBehavior property shows the xaml designer.
If the property is created again, an exception occurs.
What is the problem?
Thanks.
<Style TargetType="telerik:RadColorPicker" BasedOn="{StaticResource RadColorPickerStyle}">
<Setter Property="Padding" Value="5" />
<Setter Property="SplitButtonStyle">
<Setter.Value>
<Style TargetType="telerik:RadSplitButton" BasedOn="{StaticResource RadSplitButtonStyle}">
<Setter Property="mat:MaterialAssist.FocusBrush" Value="Transparent"/>
<Setter Property="mat:MaterialAssist.MouseOverBrush" Value="Transparent"/>
<Setter Property="behaviour:ColorPickerButtonSync.IsEnabled" Value="True" />
<Setter Property="IsChecked" Value="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType=telerik:RadColorPicker}}" />
</Style>
</Setter.Value>
</Setter>
</Style>
<telerik:RadColorPicker Width="70" SelectedColor="Red" IsRecentColorsActive="True">
<telerik:RadColorPicker.ContentTemplate>
<DataTemplate>
<Rectangle Width="35" Height="25"
Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadColorPicker}},
Path=SelectedColor, Converter={StaticResource mediaToBrushConverter}}" />
</DataTemplate>
</telerik:RadColorPicker.ContentTemplate>
<telerik:RadColorPicker.AdditionalContent>
<ContentControl HorizontalContentAlignment="Stretch" Content="{Binding}" >
<ContentControl.ContentTemplate>
<DataTemplate>
<Grid>
<telerik:RadButton Height="26" BorderThickness="0"
HorizontalContentAlignment="Left"
Command="{Binding OnClickOpenEditColorsCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type telerik:RadColorPicker}}}"
>
<telerik:RadButton.Content>
<TextBlock Text="More Colors..." Margin="26 0 0 0" />
</telerik:RadButton.Content>
</telerik:RadButton>
</Grid>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</telerik:RadColorPicker.AdditionalContent>
</telerik:RadColorPicker>
public class ColorPickerButtonSync
{
public static bool GetIsEnabled(DependencyObject obj)
{
return (bool)obj.GetValue(IsEnabledProperty);
}
public static void SetIsEnabled(DependencyObject obj, bool value)
{
obj.SetValue(IsEnabledProperty, value);
}
public static readonly DependencyProperty IsEnabledProperty =
DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(ColorPickerButtonSync), new PropertyMetadata(false, new PropertyChangedCallback(OnIsEnabledChanged)));
private static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var button = d as RadSplitButton;
button.IsToggle = true;
button.Loaded += Button_Loaded;
button.Checked += SplitButton_Checked;
button.Unchecked += SplitButton_Unchecked;
button.DropDownOpened += Button_DropDownOpened;
button.DropDownClosed += Button_DropDownClosed;
}
private static void Button_Loaded(object sender, RoutedEventArgs e)
{
var splitButton = sender as RadSplitButton;
var colorSelector = splitButton.DropDownContent as RadColorSelector;
colorSelector.Loaded += (s, a) =>
{
var rootElement = colorSelector.ChildrenOfType<Grid>().First(x => x.Name == "RootElement");
Grid.SetRow(rootElement.Children[1], 4);
Grid.SetRow(rootElement.Children[2], 5);
Grid.SetRow(rootElement.Children[3], 6);
Grid.SetRow(rootElement.Children[4], 1);
Grid.SetRow(rootElement.Children[5], 2);
Grid.SetRow(rootElement.Children[6], 3);
};
var dropDownPart = splitButton.ChildrenOfType<RadToggleButton>().First(x => x.Name == "DropDownPart");
var rectangle = splitButton.ChildrenOfType<Rectangle>().First(x => x.Name == "Separator");
//System.InvalidOperationException: 'Sequence contains no matching element'
dropDownPart.Visibility = Visibility.Collapsed;
rectangle.Visibility = Visibility.Collapsed;
}
private static void Button_DropDownClosed(object sender, RoutedEventArgs e)
{
var splitButton = sender as RadSplitButton;
splitButton.IsChecked = false;
}
private static void Button_DropDownOpened(object sender, RoutedEventArgs e)
{
var splitButton = sender as RadSplitButton;
splitButton.IsChecked = true;
}
private static void SplitButton_Checked(object sender, RoutedEventArgs e)
{
var splitButton = sender as RadSplitButton;
var colorPicker = splitButton.ParentOfType<RadColorPicker>();
colorPicker.IsDropDownOpen = true;
}
private static void SplitButton_Unchecked(object sender, RoutedEventArgs e)
{
var splitButton = sender as RadSplitButton;
var colorPicker = splitButton.ParentOfType<RadColorPicker>();
colorPicker.IsDropDownOpen = false;
}
}
Hello.
In the case of colorPickerOver, I want to remove the colorpicker borderthickness. I gave the thickness as 0, but it doesn't work.
And I want to fill the Rectangle in the ContentTemplate, but the red top, bottom, left and right gray margins remain.
In the case of color picker under, a split button was created to create a ColorPicker, but it is not synchronized with the button next to it.
And can you delete the arrow buttons?
<
telerik:RadColorPicker
Grid.Row
=
"1"
x:Name
=
"colorPickerOver"
VerticalAlignment
=
"Center"
SelectedColor
=
"{Binding OverColor, Mode=TwoWay}"
AutomaticColor
=
"{Binding OverColor}"
IsRecentColorsActive
=
"True"
NoColorText
=
"Default"
Background
=
"Transparent"
BorderBrush
=
"Transparent"
BorderThickness
=
"0"
>
<
telerik:RadColorPicker.ContentTemplate
>
<
DataTemplate
>
<
Rectangle
Width
=
"30"
Height
=
"30"
Fill="{Binding RelativeSource={RelativeSource
Mode
=
FindAncestor
,
AncestorType={x:Type telerik:RadColorPicker}},
Path
=
SelectedColor
, Converter={StaticResource mediaToBrushConverter}}"/>
</
DataTemplate
>
</
telerik:RadColorPicker.ContentTemplate
>
<
telerik:RadColorPicker.AdditionalContent
>
<
ContentControl
HorizontalContentAlignment
=
"Stretch"
ContentTemplate
=
"{StaticResource MoreColorsTemplate}"
Content
=
"{Binding}"
/>
</
telerik:RadColorPicker.AdditionalContent
>
</
telerik:RadColorPicker
>
<
telerik:RadColorPicker
Grid.Row
=
"2"
x:Name
=
"colorPickerUnder"
VerticalAlignment
=
"Center"
SelectedColor
=
"{Binding UnderColor, Mode=TwoWay}"
AutomaticColor
=
"{Binding UnderColor}"
IsRecentColorsActive
=
"True"
NoColorText
=
"Default"
Background
=
"Transparent"
BorderBrush
=
"Transparent"
BorderThickness
=
"0"
>
<
telerik:RadColorPicker.ContentTemplate
>
<
DataTemplate
>
<
telerik:RadDropDownButton
Padding
=
"0"
Height
=
"30"
Width
=
"30"
BorderThickness
=
"0"
DropDownIndicatorVisibility
=
"Collapsed"
>
<
telerik:RadDropDownButton.Content
>
<
Rectangle
Width
=
"{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:RadColorPicker}}"
Height
=
"{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=telerik:RadColorPicker}}"
>
<
Rectangle.Fill
>
<
SolidColorBrush
Color
=
"{Binding }"
/>
</
Rectangle.Fill
>
</
Rectangle
>
</
telerik:RadDropDownButton.Content
>
<
telerik:RadDropDownButton.DropDownContent
>
<
telerik:RadColorSelector
/>
</
telerik:RadDropDownButton.DropDownContent
>
</
telerik:RadDropDownButton
>
</
DataTemplate
>
</
telerik:RadColorPicker.ContentTemplate
>
Thanks.
Hello.
First of all, please check the image.
My question is this.
1. The textbox in the splitbutton has no function. Can the ColorPicker be displayed in the same way as the arrow function?
Arrow button down when clicking text box.
2. Can I change the location of Themes colors and Standard Colors?
MainPalette and StandardPalette properties exist, but cannot be reversed.
Is there a solution?
Thanks.
I was hoping the RadColorPicker would have built in functionality to support the RadColorEditor which is common in just about all applications from Adobe to MS Paint ... something like the attached image.
Telerik doesn't seem to provide a "one stop shop" for this functionality. My expectation was the RadColorPicker would include the functionaltiy of the RadColorEditor, but it does not.
I can code my own solution using a new RadWindow and adding the RadColorEditor but the reason I bought Telerik is so that I wouldn't have to do this work, part of the rapid application development process.
Am I missing some simple functionality available in the RadColorPicker or is this just how it is?
Cheers, Rob.
Hi,
I have my own popup (class that inherits from System.Windows.Controls.Primivites.Popup) that contains textbox, close button and a RadColorPicker.
The problem is when DropDownContent of RadColorPicker shows, I select color and DropDownContent hides, also with my Popup. It looks like MouseDown event is responsible for color selection, it hides DropDownContent and then MouseUp event hides my popup because mouse is actually out of Popup bounds.
Is there any possibility to not pass this event higher when color is selected and just simply close DropDownContent without any further event handling or something?
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