Remove Palette Item Tooltip

[Andrew]

Hello,

I'd like to get rid of the tooltip that shows the hex ARGB values when you hover over a color in the palette. I think many business users would not know or care what #FFFF0000 means.

In the RadControls installation folder, I looked in Themes\ExpressionDark\Themes\Expression\Dark\ColorPicker.xaml. I see ToolTipService.ToolTip="{Binding }" in the ControlTemplate for RadColorPaletteViewItem. I thought maybe I could copy this ControlTemplate, remove the tooltip from it, and then use my copy in whatever style I set the RadColorPicker's MainPaletteItemsStyle property to.

This seems like a bit more trouble than it's worth. Am I going down the right path, or is there a better way to do this?

Thanks,
-Andrew

[Andrew]

Update: I just got this to work, once I further modified the ControlTemplate to use my own brushes wherever there was a StaticResource. I'm still curious if there's another way to do this though.

[Viktor Tsvetkov]

Hello Andrew,

Unfortunately currently there is no other easier way of solving your problem. I have added this issue in our PITS under the name "ColorPicker: Add a possibility to change the tooltip of the palette items easier" and it will be ready for tracking and voting tomorrow the latest.

Kind regards,
Viktor Tsvetkov
the Telerik team

[Tony]

Hi Andrew

Could you share the xaml code for fixing this. I am facing the same issue while using RadColorPaletteView inside which there are RadColorPaletteViewItems for different custom colors.

[Andrew]

Hi Tony,

First I defined this namespace:
xmlns:Telerik_Input="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

Then, I copied the RadColorPaletteViewItem style from ColorPicker.xaml (as mentioned in my original post) and tweaked it. I think the main differences are:

• I made each item bigger, which you may or may not want (see MinHeight and MinWidth in the 3rd and 4th line).
• I removed the tooltip on the Rectangle named "color".
• I changed the StaticResources so that they reference brush resources in my application. You will have to replace these and either hard-code some brushes or reference brush resources in your application.

<Style TargetType="Telerik_Input:RadColorPaletteViewItem" x:Key="DefaultColorPaletteViewItemStyle">
        <Setter Property="Color" Value="Black" />
        <Setter Property="MinHeight" Value="25" />
        <Setter Property="MinWidth" Value="25" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Telerik_Input:RadColorPaletteViewItem">
                    <Grid
                        x:Name="RootElement"
                        Margin="0"
                        >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="Focused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Visibility"
                                            Storyboard.TargetName="border"
                                            >
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="Visible"
                                                />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="BorderBrush"
                                            Storyboard.TargetName="border"
                                            >
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="{StaticResource ControlOuterBorder_Pressed}"
                                                />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Visibility"
                                            Storyboard.TargetName="border"
                                            >
                                            <DiscreteObjectKeyFrame
                                                KeyTime="0"
                                                Value="Visible"
                                                />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Rectangle
                            x:Name="color"
                            MinHeight="11"
                            MinWidth="11"
                            Stretch="Fill"
                            Margin="2"
                            Fill="{TemplateBinding Content}"
                            />
                        <Border
                            x:Name="borderContent"
                            MinHeight="13"
                            MinWidth="13"
                            BorderBrush="{StaticResource ControlOuterBorder_Normal}"
                            Margin="2"
                            VerticalAlignment="Stretch"
                            BorderThickness="1"
                            >
                            <Border
                                x:Name="InnerborderContent"
                                BorderThickness="1"
                                BorderBrush="{StaticResource ControlInnerBorder_Normal}"
                                />
                        </Border>

                        <Border
                            x:Name="border"
                            MinHeight="13"
                            MinWidth="13"
                            BorderBrush="{StaticResource ControlOuterBorder_MouseOver}"
                            Margin="1"
                            VerticalAlignment="Stretch"
                            BorderThickness="2"
                            Visibility="Collapsed"
                            />
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then I applied this style to the color picker like so.

<Style TargetType="Telerik_Input:RadColorPicker">
    <!-- Other setters omitted for the sake of brevity -->
    <Setter Property="MainPaletteItemsStyle" Value="{StaticResource DefaultColorPaletteViewItemStyle}" />
</Style>

Hope that helps!

[Michael]

Here's the PITS link for folks who want to vote this (currently unscheduled) bug up: http://www.telerik.com/support/pits.aspx#/public/silverlight/4486

[Richard Koslik]

How can I delete the tooltip of a RadColorPicker???

Which style do I have to change or what do I have to do if I use a ColorPicker. There I have no rectangle for setting the Tooltip, the ColorPicker uses the style of the ColorSelector and he uses the style of the ColorPallete View.

Thanks for your help,

regards Richard Koslik

[Petar Mladenov]

Hi Richard Koslik,

 You need to edit the style of RadColorPaletteViewItem too and remove the ToolTip from the Rectangle inside the RootElementGrid:

  <!--  RadcolorPaletteViewItem  -->
        <Style TargetType="telerik:RadColorPaletteViewItem" x:Name="itemsStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadColorPaletteViewItem">
                        <Grid x:Name="RootElement" Margin="0">
.....
                              ...visual state groups....
......
<Rectangle MinWidth="11"
                                       MinHeight="11"
                                       Margin="2 0"
                                       Fill="{TemplateBinding Content}"
                                       Stretch="Fill"
                                        />
                            <Border x:Name="borderContent"
                                    MinWidth="13"
                                    MinHeight="13"
                                    Margin="2 0"
                                    VerticalAlignment="Stretch"
                                    BorderBrush="{StaticResource ColorPaletteViewItem_Border}"
                                    BorderThickness="1">
                                <Border x:Name="InnerborderContent" BorderThickness="1" />
                            </Border>

                            <Border x:Name="border"
                                    MinWidth="13"
                                    MinHeight="13"
                                    Margin="2 0"
                                    VerticalAlignment="Stretch"
                                    BorderBrush="{StaticResource ColorPaletteViewItem_OuterBorder_MouseOver}"
                                    BorderThickness="1"
                                    Visibility="Collapsed">
                                <Border x:Name="Innerborder"
                                        BorderBrush="{StaticResource ColorPaletteViewItem_InnerBorder_MouseOver}"
                                        BorderThickness="1" />
                            </Border>
                        </Grid>

You can find this realized in the attached solution. Please let us know if you need further assistance. Regards,
Petar Mladenov
the Telerik team

[Richard Koslik]

Thank you very much, I removed now the tooltip of the mainpalette. This works fine!
How can I now remove the tooltips of the standardpalette and the headerpalette, in your example this works .. there are no tooltips in any palette.

Regards, Richard Koslik

[Petar Mladenov]

Hello Richard Koslik,

 Isn't it possible for you to use all the Style/Template definitions from my attached project. The key thing is actually that you need to have extracted all deinitions : "colorpickerStyle",the style for RadColorSelector, the Style for RadColorPaletteView, the two Styles for RadColorPaletteViewItem ("defaultStyle" and "itemsStyle") and etc.

Greetings,
Petar Mladenov
the Telerik team