Adding a ToolTip to a custom SeriesItemLabel

5 posts, 1 answers
  1. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 29 Dec 2011 Link to this post

    Hi,

    I'm creating a chart that is based off the MeteoChart example. Specifically, I'm using the same concepts as the SplineLabelStyle in the MeteoChart to display custom icons overriding the default item label.

    The MeteoChart has the following XAML to style the SeriesItemLabel with a custom control template that contains custom icons:
    <Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:SeriesItemLabel">
                    <Canvas>
                        <Border x:Name="PART_TextContainer">
                            <Image x:Name="PART_Image"
                                  Source="{Binding DataItem.WeatherImageSource}" />
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    What I'd like to do is add a tooltip to this image to display more information, ie:
    <Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:SeriesItemLabel">
                    <Canvas>
                        <Border x:Name="PART_TextContainer">
                            <Image x:Name="PART_Image"
                                  Source="{Binding DataItem.WeatherImageSource}"
                                  ToolTip="{Binding DataItem.WeatherConditions}" />
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    The problem is that the above XAML doesn't work. While the example runs, tooltips are not displayed when hovering over the icon. I've tried shifting the tooltip to the canvas instead and even tried displaying fixed text as the tooltip, however none of these alternatives get tooltips to display.

    I would like to display the tooltip on the customized item label because:
    1. these labels are easier targets to hover over instead of point marks,
    2. the labels are displayed in a different location to the point mark, and finally
    3. I'm actually hiding the point mark in my actual scenario (I'm just displaying the icons).

    How can I define tooltips for custom item labels?

    Alternatively, how can I customize the PointMarkItemStyle to display custom icons (and then I can use the default item tooltip provided).

    Kind regards,
    Dave.

  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 30 Dec 2011 Link to this post

    Hi David,

    Both approaches can be achieved with our RadChart. For example:
    1. You should set the SeriesItemLabel to be HitTestVisible in your style. The add ToolTipService.Tooltip for the Image in the style:
     
    <Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
                <Setter Property="IsHitTestVisible" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:SeriesItemLabel">
                            <Canvas>
                                <Border x:Name="PART_TextContainer">
                                    <Image x:Name="PART_Image" 
                                          Source="{Binding DataItem.WeatherImageSource}" ToolTipService.ToolTip="{TemplateBinding Content}"/>
                                </Border>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    2. You can set custom image as PointMark by retemplating the PointMarkItemStyle as described here. You may use the following template for your case:

    <Style x:Key="PointMarkStyle" TargetType="charting:PointMark">
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="charting:PointMark">
                          <Canvas>
                              <Path x:Name="PART_PointMarkPath"
                          Stretch="Fill" Width="40" Height="40"
                          Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                          Canvas.Top="{TemplateBinding PointMarkCanvasTop}" 
                             Data="M5.5,45.5 L60.5,45.5 L60.5,95.5 L5.5,95.5z">
                                  <Path.Fill>
                                          <ImageBrush x:Name="PART_Image"  
                                        ImageSource="{Binding DataItem.WeatherImageSource}" />
                                  </Path.Fill>
                              </Path>
                          </Canvas>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>

    Now when turning on the ShowItemToolTips property of the series you will be able to have whatever tooltip you want.

    Happy holidays,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 03 Jan 2012 Link to this post

    Hi Evgenia,

    Thanks for your reply with clear code examples. I've successfully added tooltips using method 1, adding the IsHitTestVisible=True property and setting the ToolTip in the image control. Great work!

    Kind regards,
    Dave.
  5. Brian
    Brian avatar
    58 posts
    Member since:
    Jul 2011

    Posted 04 Apr 2012 Link to this post

    I am trying to add tooltips to my SeriesItemLabel style using method 1.  My chart is a bar chart.  I would like the tool tip for the SeriesItemLabel to be the same as the tool tip for the bar.  I have been able to get the content of the SeriesItemLabel to show up as its tool tip using this style:

    <Setter Property="IsHitTestVisible" Value="True"/>
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" ToolTipService.ToolTip="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>

    I don't know how to alter the binding statement for the ToolTip so that it shows the same tool tip that I am using for the bar.  I am currently using ItemMappings to set the bar's tool tip to a property on my view model for the bar.

    Thanks,
    Brian
  6. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 06 Apr 2012 Link to this post

    Hello Brian,

    You may bind to the same property of your view model, the bar has bound to using the DataItem property as shown in my previous post:
     
    <Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel"
                <Setter Property="IsHitTestVisible" Value="True"/> 
                <Setter Property="Template"
                    <Setter.Value
                        <ControlTemplate TargetType="charting:SeriesItemLabel"
                            <Canvas
                                <Border x:Name="PART_TextContainer"
                                    <Image x:Name="PART_Image" 
                                          Source="{Binding DataItem.WeatherImageSource}" ToolTipService.ToolTip="{TemplateBinding Content}"/> 
                                </Border
                            </Canvas
                        </ControlTemplate
                    </Setter.Value
                </Setter
            </Style>

    It allows that you obtain the value from the underlying DataPoint object's properties without any additional bindings.

    Greetings,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready