Template Axis item label

4 posts, 0 answers
  1. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 22 Jul 2011 Link to this post

    Hi,
     is it possible to template the XAxis item label displayed to replace them by an icon ?

    I have found 
    <telerik:ChartArea.AxisX>
      <telerik:AxisX x:Uid="telerik:AxisX_1">
        <telerik:AxisX.AxisStyles>
          <telerik:AxisStyles ItemLabelStyle="{StaticResource StrategyMinItemLabelStyle}" />
        </telerik:AxisX.AxisStyles>
      </telerik:AxisX>
    </telerik:ChartArea.AxisX>
    But what is the targettype of my   StrategyMinItemLabelStyle  style ?
    I want to display an icon in place of text .

    - Cedric -
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 27 Jul 2011 Link to this post

    Hi Cedric,

    The target type of your custom item label style should be TextBlock. Below you can find the default template of all axes' labels. So if you need to have them replaced with image, you need to set custom template and apply it to the labels you need to have customized:

    <telerikCharting:LabelFormatConverter x:Key="labelFormatConverter" />
    <Style x:Key="CustomLabel"
        TargetType="telerikCharting:AxisLabel2D">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="ItemLabelStyle">
            <Setter.Value>
                <Style TargetType="TextBlock">
                    <Setter Property="TextAlignment" Value="Center" />
                    <Setter Property="Padding" Value="1" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:AxisLabel2D">
                    <Border Background="{TemplateBinding Background}">
                        <TextBlock Style="{TemplateBinding ItemLabelStyle}" 
                                    Text="{Binding Converter={StaticResource labelFormatConverter}}">
                            <TextBlock.LayoutTransform>
                                <RotateTransform x:Name="PART_RotateTransform" />
                            </TextBlock.LayoutTransform>
                        </TextBlock>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    I have modified the template with additional border with red background and have it applied to all labels on the X axis:
    private void ChartArea_Loaded(object sender, RoutedEventArgs e)
    {
        ChartArea area = sender as ChartArea;
        HorizontalAxisLabels2D axisLabelsContainer = area.FindChildByType<HorizontalAxisLabels2D>();
        var axisLabels = axisLabelsContainer.ChildrenOfType<AxisLabel2D>();
        System.Windows.Style style = this.Resources["CustomLabel"] as System.Windows.Style;
      
        foreach(var item in axisLabels)
        {
            item.Style = style;
        }
    }

    I hope this helps.


    All the best,
    Sia
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 29 Jul 2011 Link to this post

    What is the type of value source of the labelFormatconverter ? The documentation is not usefull : "Formats the value for a chart label".

    In my case the values displayed are coming from this class in my view model:
    public class Score 
    {
        public string Library { getset; }
            public ClassificationTechnoType Techno { getset; }
            public int Number { getset; } 
    }
    And the SerieDefinition is:
    <telerik:SeriesMapping LegendLabel="SUCCESS" CollectionIndex="0">
                                <telerik:SeriesMapping.SeriesDefinition>
                                    <telerik:StackedBarSeriesDefinition ShowItemLabels="False" />
                                </telerik:SeriesMapping.SeriesDefinition>
      
                                <telerik:SeriesMapping.ItemMappings>
                                    <telerik:ItemMapping DataPointMember="YValue"
                                                         FieldName="Number" />
                                    <telerik:ItemMapping DataPointMember="XCategory"
                                                         FieldName="Library" />
                                </telerik:SeriesMapping.ItemMappings>
                            </telerik:SeriesMapping>


    The aim is to replace the text displayed (currently Library) by one of 4 icons corresponding to the values of my classificationTechnoType enumeration.
    I am missing the link between the TickPoint and my Score class to get the right Techno property in my trigger....

    - Cedric -
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 03 Aug 2011 Link to this post

    Hi Cedric,

    My idea was to remove the TextBlock and to add image and bind its Source property to a property in your view model. Something similar as the shown approach in this example but for the axis labels.

    Regards,
    Sia
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

Back to Top