ToolTip on Mouse hover on Categorical Axcis Label

8 posts, 1 answers
  1. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 01 Aug Link to this post

    Hi,

    I have a Telerik Rad Cartesian Spline Curve Chart where X axis Categorical axis and Y Axis is numerical. Currently the values of X Axis Labels are like eg 0,1,2,3....

    On Mouse hover over the labels on Categorical X Axis I want to display a tool tip which represent some string corresponding to 0,1,2 accordingly.

    eg: 0=> Apple

           1=> Orange etc

    How do I acheive this?

     

    Regards,

    Shilpa

  2. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 01 Aug Link to this post

    <Style x:Key="CategoricalAxisStyle" TargetType="telerik:CategoricalAxis" BasedOn="{StaticResource AxisStyle}" />
       <Style x:Key="AxisStyle" TargetType="telerik:Axis">
            <Setter Property="LabelStyle" Value="{StaticResource ItemLabelStyle}" />
            <Setter Property="TitleTemplate" Value="{StaticResource AxisTitleTemplate}" />
        </Style>
       <Style x:Key="ItemLabelStyle"
               TargetType="TextBlock">
            <Setter Property="FontFamily" Value="{DynamicResource FontFamilyDefault}" />
            <Setter Property="FontSize" Value="{DynamicResource TextSizeDefault}" />
            <Setter Property="FontStyle" Value="{DynamicResource FontStyleDefault}" />
            <Setter Property="FontWeight" Value="{DynamicResource FontWeightDefault}" />
            <Setter Property="ToolTip" Value="Hello"></Setter>
    I am able to set a static text as tooltip, but how will I bind the value of tooltip to a string property with X & Y Value which defines the point. 
  3. UI for WPF is Visual Studio 2017 Ready
  4. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 02 Aug in reply to Shilpa Link to this post

    Hi,

    I want to know how to get to the dataPoint DataContext so that i can set the tooltip to the property in my DataItem. Please hlep me

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Aug Link to this post

    Hello Shilpa,

    In order to achieve your requirement you can use the LabelTemplate and Categories collection of the CategoricalAxis class. Basically, you can define a label template and bind its label visual to the string that comes as a DataContext of the template. As there is only a single string passed in the template, you can use a multi value converted to get the corresponding data point from the Categories collection.

    For example:
    <telerik:CategoricalAxis.LabelTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}">
                <telerik:RadToolTipService.ToolTipContent>
                    <MultiBinding Converter="{StaticResource textToDataPointInfoConverter}">
                        <Binding />
                        <Binding ElementName="categoricalAxis" Path="Categories" />
                    </MultiBinding>
                </telerik:RadToolTipService.ToolTipContent>
            </TextBlock>
        </DataTemplate>
    </telerik:CategoricalAxis.LabelTemplate>

    public class TextToDataPointInfoConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var text = (string)values[0];
            var categories = (IEnumerable<ChartAxisCategoryInfo>)values[1];
            var categoryMatch = categories.FirstOrDefault(x => x.Category.Equals(text));
            var dp = categoryMatch.DataPoints[0];
            var plotInfo = (MyPlotInfo)dp.DataItem;
            return string.Format("Data point: X={0}; Y={1}", plotInfo.XValue, plotInfo.YValue);
        }
     
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    You can find this approach also in the attached project. I hope it helps.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 02 Aug Link to this post

    Dear Martin,

    I am using version 2014.3.1410.45 of Telerik.Windows.Controls.Chart. Unfortunately I cannot upgrade the version, could you please suggest a solution with my version of dll ? Please help me !

    Thanks,

    Shilpa

  7. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Aug Link to this post

    Hi Shilpa,

    In this case, you can use similar approach, but instead using the axis' Categories collection, you can define a collection or a method in the view model that returns all the categories. I updated my project to demonstrate this.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 02 Aug Link to this post

    Dear Martin,

    Yes the solution you provided works, but I do not want to use RadTooltip service. I am using normal tool tip textblock but using the multibinding I am not able to get the DataContext in the converter. Below is my xaml.

    <telerik:CategoricalAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="FontFamily" Value="{DynamicResource FontFamilyDefault}"/>
                                        <Setter Property="FontSize" Value="{DynamicResource TextSizeDefault}"/>
                                        <Setter Property="FontStyle" Value="{DynamicResource FontStyleDefault}"/>
                                        <Setter Property="FontWeight" Value="{DynamicResource FontWeightDefault}"/>
                                    </Style>
                                </TextBlock.Style>
     
                                <TextBlock.ToolTip>
                                    <ToolTip>
                                        <ToolTip.Style>
                                            <Style TargetType="ToolTip">
                                                <Style.Setters>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate>
                                                                <Grid Background="{DynamicResource BRUSH_TOOLTIP}" HorizontalAlignment="Right" Width="120" Height="70">
                                                                    <StackPanel Margin="5" Orientation="Vertical">
                                                                        <TextBlock >
                                                                            <TextBlock.Text>
                                                                                <MultiBinding Converter="{StaticResource TextToDataPointInfoConverter}">
                                                                                    <Binding></Binding>
                                                                                    <Binding ElementName="Axis" Path="DataContext"></Binding>
                                                                                </MultiBinding>
                                                                            </TextBlock.Text>
                                                                        </TextBlock>
                                                                    </StackPanel>
                                                                </Grid>
                                                            </ControlTemplate>
                                                        </Setter.Value>
     
                                                    </Setter>
                                                </Style.Setters>
                                            </Style>
                                        </ToolTip.Style>
                                    </ToolTip>
                                </TextBlock.ToolTip>
      </TextBlock>
                        </DataTemplate>
                    </telerik:CategoricalAxis.LabelTemplate>

    Could you please help me resolve this issue?

     

    Thanks,

    Shilpa

  9. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 03 Aug in reply to Shilpa Link to this post

    Hi Martin,

    I achieved it through passing the datacontext of axis as relative source binding in Multi Binding. 

    Thanks a lot for the solution!

    Regards,

    Shilpa

Back to Top
UI for WPF is Visual Studio 2017 Ready