Telerik Forums
UI for WPF Forum
0 answers
54 views

how to change the background color of a color picker control when expanded (black theme) to a customized color ? 

 

 

Wael
Top achievements
Rank 1
Iron
 asked on 18 Sep 2023
1 answer
159 views

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?

Stenly
Telerik team
 answered on 15 Mar 2022
2 answers
129 views

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;
        }
    }



 

 

Psyduck
Top achievements
Rank 5
Bronze
Bronze
Bronze
 answered on 30 Apr 2021
5 answers
213 views

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.

Dilyan Traykov
Telerik team
 answered on 13 Apr 2021
5 answers
192 views

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.

Dilyan Traykov
Telerik team
 answered on 07 Apr 2021
2 answers
105 views

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.

 

Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 11 Nov 2020
1 answer
118 views

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?

Ivan Petrov
Telerik team
 answered on 03 Jun 2020
3 answers
132 views
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 
Dilyan Traykov
Telerik team
 answered on 13 Nov 2019
3 answers
88 views
Is it still not possible to localize RadColorPicker?
Vladimir Stoyanov
Telerik team
 answered on 23 Mar 2018
9 answers
260 views

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
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 21 Feb 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?