Style Item Tooltip

7 posts, 0 answers
  1. James
    James avatar
    136 posts
    Member since:
    Nov 2008

    Posted 12 Jul 2010 Link to this post

    Hello,

    I would like to change the font of the item tool tip on a line series definition.

    Do I need to provide a style for property SeriesItemTooltipStyle to achieve this? If so can you please advise how to find this style in Blend 4 so I can copy it into Visual Studio and modify - I can't seem to style a series definition or find the ItemToolTip style on the RadChart inside Blend. Or alternatively could you just please copy and paste the style for me, whatever's easiest! :)

    Thanks,

    James.

  2. Sia
    Admin
    Sia avatar
    766 posts

    Posted 14 Jul 2010 Link to this post

    Hello James,

    Here is the default style for the Tooltips in the "Office Black" theme:
    <SolidColorBrush x:Key="ToolTip2DForeground" Color="Black" />
    <Thickness x:Key="ToolTip2DPadding">1</Thickness>
    <LinearGradientBrush x:Key="ToolTip2DBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#FFDEDEDE" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ToolTip2DOuterBorder" Color="Transparent" />
    <Thickness x:Key="ToolTip2DOuterBorderThickness">0</Thickness>
    <mscorlib:Double x:Key="ToolTip2DOuterBorderOpacity">0</mscorlib:Double>
    <CornerRadius x:Key="ToolTip2DOuterCornerRadius">0</CornerRadius>
    <SolidColorBrush x:Key="ToolTip2DInnerBorder" Color="#FF848484" />
    <Thickness x:Key="ToolTip2DInnerBorderThickness">1</Thickness>
    <CornerRadius x:Key="ToolTip2DInnerCornerRadius">3</CornerRadius>
                 
    <Style  TargetType="charting:ItemToolTip2D" >
        <Setter Property="BorderThickness" Value="{StaticResource ToolTip2DOuterBorderThickness}" />
        <Setter Property="InnerBorderThickness" Value="{StaticResource ToolTip2DInnerBorderThickness}" />
        <Setter Property="BorderBrush" Value="{StaticResource ToolTip2DOuterBorder}" />
        <Setter Property="InnerBorderBrush" Value="{StaticResource ToolTip2DInnerBorder}" />
        <Setter Property="Foreground" Value="{StaticResource ToolTip2DForeground}" />
        <Setter Property="Background" Value="{StaticResource ToolTip2DBackground}" />
        <Setter Property="BorderOpacity" Value="{StaticResource ToolTip2DOuterBorderOpacity}" />
        <Setter Property="Padding" Value="{StaticResource ToolTip2DPadding}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:ItemToolTip2D">
                    <charting:ClipPanel>
                        <Border x:Name="ToolTipBorder"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{StaticResource ToolTip2DOuterCornerRadius}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Opacity="{TemplateBinding BorderOpacity}">
                            <Border
                            BorderThickness="{TemplateBinding InnerBorderThickness}"
                            CornerRadius="{StaticResource ToolTip2DInnerCornerRadius}"
                            BorderBrush="{TemplateBinding InnerBorderBrush}"
                            Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}">
                                <ContentControl Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" />
                            </Border>
                            <Border.Triggers>
                                <EventTrigger RoutedEvent="Border.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard >
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.6" Storyboard.TargetName="ToolTipBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                    <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Border.Triggers>
                        </Border>
                    </charting:ClipPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    In your project you can set a CustomTooltip style in your resources as follows:
    xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">
       <UserControl.Resources>
            <Style x:Key="CustomTooltip" TargetType="charting:ItemToolTip2D" >
                <Setter Property="Foreground" Value="Green" />
                <Setter Property="FontSize" Value="50" />
            </Style>
        </UserControl.Resources>

    and apply it in your code-behind:
    series1.Definition.SeriesItemTooltipStyle = this.Resources["CustomTooltip"] as Style;
    where series1 is your Line series.

    Sincerely yours,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Anatoly Chekh
    Anatoly Chekh avatar
    86 posts
    Member since:
    Apr 2010

    Posted 04 Jan 2011 Link to this post

    Hello!

    Thanks, for answer. It's almost work.
    1) Foreground style doesn't apply. How I can appply foreground property?
    2) How I can set brush for the tooltip? (InnerBorderBrush and OuterBorderBrush doesn't work)
    3) How can I apply TextDecorations style (underline)?

    Thanks, Anatoly Chekh.
  4. Sia
    Admin
    Sia avatar
    766 posts

    Posted 06 Jan 2011 Link to this post

    Hi James,

    You need to use the following style:
    <Style x:Key="CustomTooltip" TargetType="charting:ItemToolTip2D" >
        <Setter Property="Foreground" Value="Green" />
        <Setter Property="FontSize" Value="50" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="InnerBorderBrush" Value="Red" />
    </Style>

    Maybe you are using a different version of our controls and this causes your problem. Can you please tell us which is the version of the Telerik binaries in your application?

    Try to upgrade with the latest official version and check again whether everything works as expected.

    Kind regards,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  5. Anatoly Chekh
    Anatoly Chekh avatar
    86 posts
    Member since:
    Apr 2010

    Posted 06 Jan 2011 Link to this post

    Hello!

    It's work! Thanks.

    And how about underline style and text align (by center for multiple line tooltip) - does it supported?

    Thanks, Anatoly Chekh.
  6. Sia
    Admin
    Sia avatar
    766 posts

    Posted 06 Jan 2011 Link to this post

    Hi Anatoly Chekh,

    There is a ContentControl in the Tooltip template. That is why in your case you need to add a Textblock as its content . In that way you will be able to play with properties as TextDecorations. Here is a possible solution how to do that:
    RadChart1.DefaultView.ChartArea.ItemToolTipOpening += this.ChartItemToolTipOpening;

    private void ChartItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs args)
    {
        tooltip.Foreground = new SolidColorBrush(Colors.Red);
     
        TextBlock t = new TextBlock();
        t.TextDecorations = TextDecorations.Underline;
        t.TextWrapping = TextWrapping.Wrap;
        t.Text = "dkdoskd dksodskodsk dksodkso dks";
        t.Width = 50d;
     
        tooltip.Content = t;
    }

    Hope this helps.

    Regards,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  7. Anatoly Chekh
    Anatoly Chekh avatar
    86 posts
    Member since:
    Apr 2010

    Posted 06 Jan 2011 Link to this post

    Thaks. It's work fine!
    Anatoly Chekh.
Back to Top