This is a migrated thread and some comments may be shown as answers.

borderthickness '0' and ContentTemplate fill do not work.

5 Answers 14 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Psyduck asked on 05 Apr 2021, 10:42 AM

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.

5 Answers, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 06 Apr 2021, 01:40 PM

Hello KIM,

Thank you for the provided image and code snippet.

The border in question is actually coming from the FocusVisual element and is controlled by the MaterialAssist.FocusBrush property. You can set this property to Transparent to remove the undesired border. As for the extra gray margins around the color rectangle, you can remove these by setting the Padding of the RadColorPicker to 0.

        <Style TargetType="telerik:RadColorPicker" BasedOn="{StaticResource RadColorPickerStyle}">
            <Setter Property="Padding" Value="0" />
            <Setter Property="SplitButtonStyle">
                <Setter.Value>
                    <Style TargetType="telerik:RadSplitButton" BasedOn="{StaticResource RadSplitButtonStyle}">
                        <Setter Property="mat:MaterialAssist.FocusBrush" Value="Transparent"/>
                        <Setter Property="local:CustomColorPickerOpenBehavior.IsEnabled" Value="True" />
                        <Setter Property="IsChecked" Value="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType=telerik:RadColorPicker}}" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

As for the arrows, you can set the Visibility of the RadToggleButton portion of the control to hide them:

        private static void Button_Loaded(object sender, RoutedEventArgs e)
        {
            var splitButton = sender as RadSplitButton;
            var dropDownPart = splitButton.ChildrenOfType<RadToggleButton>().First(x => x.Name == "DropDownPart");
            var rectangle = splitButton.ChildrenOfType<Rectangle>().First(x => x.Name == "Separator");
            dropDownPart.Visibility = Visibility.Collapsed;
            rectangle.Visibility = Visibility.Collapsed;

Please find attached a sample project with the proposed modifications and let me know if it provides the desired result.

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
answered on 07 Apr 2021, 05:28 AM

Hello.

 

Thanks for the result I want.

However, there is one problem. It fails in arrow visibility.

 

private static void Button_Loaded(object sender, RoutedEventArgs e)
{
       var splitButton = sender as RadSplitButton;
       var dropDownPart = splitButton.ChildrenOfType<RadToggleButton>().First(x => x.Name == "DropDownPart");
       var rectangle = splitButton.ChildrenOfType<Rectangle>().First(x => x.Name == "Separator"); // ★ Exception
       dropDownPart.Visibility = Visibility.Collapsed;
       rectangle.Visibility = Visibility.Collapsed;
}

 

Could you check for this error? (System.InvalidOperationException: 'Sequence contains no matching element')

0
Dilyan Traykov
Telerik team
answered on 08 Apr 2021, 02:07 PM

Hello Kim,

Can you please specify whether the exception is fired in your original project or in the sample project I provided as he sample project seems to run as expected at my end?

If the exception is thrown in your actual project, can you please specify which theme you're using as the Separator element in the Fluent theme may have a different name or type in another theme?

Thanks in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
answered on 09 Apr 2021, 04:19 AM

Hello.

 

I ran it on my project and fired an exception for it.

And it was a theme issue. Fluent Theme has no problem.

I used OfficeBlack, Office2019, and Windows7 themes.

 

I haven't finalized the theme yet. so it seems limited to use only Fluent Theme.

Should I use different things for each theme?

Is there any way I know it?

In my opinion, mat:MaterialAssist.FocusBrush is also specific to Fluent Theme.

 

Thanks.

0
Dilyan Traykov
Telerik team
answered on 13 Apr 2021, 10:15 AM

Hello KIM,

Indeed, if you're using multiple themes, the best approach would be to extract the template for each of the themes and modify it accordingly as there are some subtle differences from one theme to another. You can use the approach from the following article to achieve this in a structured manner: Switching Custom Styles with Themes at Runtime.

I hope you find this helpful.

Regards,
Dilyan Traykov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ColorPicker
Asked by
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Answers by
Dilyan Traykov
Telerik team
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Share this question
or