borderthickness '0' and ContentTemplate fill do not work.

[Psyduck]

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]

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

[Psyduck]

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')

[Dilyan Traykov]

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

[Psyduck]

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.

[Dilyan Traykov]

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