Template to X-axis labels

4 posts, 0 answers
  1. Anton
    Anton avatar
    3 posts
    Member since:
    Aug 2011

    Posted 09 Aug 2011 Link to this post

    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
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 12 Aug 2011 Link to this post

    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 >>

  3. DevCraft banner
  4. Anatoly Chekh
    Anatoly Chekh avatar
    86 posts
    Member since:
    Apr 2010

    Posted 18 Jan 2012 Link to this post

    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,
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 23 Jan 2012 Link to this post

    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 >>
Back to Top