Template to X-axis labels

[Anton]

Is it possible to apply a template to the label of X-axis? For example add a picture after the label. Or perhaps there is a workaround?

Thanks

[Sia]

Hello Anton,

You need to add a custom label style with target type "TextBlock" in your application's resources. Below you can find the default template of all axes' labels for Silverlight. So if you need to have them replaced with an image, you need to set custom template:

<telerik:LabelFormatConverter x:Key="labelFormatConverter"/>
<Style x:Key="CustomLabel" TargetType="telerik: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="telerik:AxisLabel2D">
                    <Border Background="{TemplateBinding Background}">
                    <telerik:LayoutTransformControl x:Name="PART_LayoutTransformControl"
                                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                        <telerik:LayoutTransformControl.Content>
                            <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                Text="{Binding Converter={StaticResource labelFormatConverter}}" />
                        </telerik:LayoutTransformControl.Content>
                        <telerik:LayoutTransformControl.LayoutTransform>
                            <RotateTransform x:Name="PART_RotateTransform" />
                        </telerik:LayoutTransformControl.LayoutTransform>
                    </telerik:LayoutTransformControl>
                </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

and apply it 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 have modified the template with additional border with red background to make the difference visible.
Greetings,
Sia
the Telerik team

[Anatoly Chekh]

Hello.
If I need template with some dynamic data?
I.e. I get data from the server (get X Axis categories and icon for each category).
I need template like this:

<Grid>

<TextBlock Text="{Binding Converter={StaticResource labelFormatConverter}}" />
                     <Image Source="" />
</Grid>

How can I use this template? I can add converter (like labelFormatConverter). But In converter I don't have any access to the any additional data (only tickpoint). So I can find my images dictionary.

It will be fine If I can set some property like DataContext to the TickPoint and use in formatter. But I can't.

So the question is - how can I get additional data for the tick point?

Thanks, Anatoly Chekh,

[Petar Marchev]

Hi,

Unfortunately there is no out-of-the-box feature to allow such a complex styling. If it is possible to place the images in the item label instead - you can examine this example that demonstrates the suggested approach. 

Regards,
Petar Marchev
the Telerik team