This is a migrated thread and some comments may be shown as answers.

Template to X-axis labels

3 Answers 93 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Anton
Top achievements
Rank 1
Anton asked on 09 Aug 2011, 08:35 PM
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

3 Answers, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 12 Aug 2011, 04:06 PM
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

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

0
Anatoly Chekh
Top achievements
Rank 1
answered on 18 Jan 2012, 03:50 PM
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,
0
Petar Marchev
Telerik team
answered on 23 Jan 2012, 09:40 AM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Tags
Chart
Asked by
Anton
Top achievements
Rank 1
Answers by
Sia
Telerik team
Anatoly Chekh
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or