Hello, I want to add a custom palette with its own names and colors in WPF. But seems like I can only work with built-in MainPalette, HeaderPalette, AdditionalContent
The image below shows my intention. I want to add not only 2 of them, but as many as I want.
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?