Customizing Vertical Axis Template

[Boutemine]

Hello Everyone,
I'm trying to customize the Vertical Axis look so it aligns the labels on the left side, the goal here is to keep it aligned with the title of the page so it gives a better UI.
I tried using a customized LabelTemplate but it didn't work, so I want to know the basic template for a LinearAxis template if possible (I couldn't get blend to generate one)

Attached is a screenshot of what I want,
Thanks,
Oualid

[Victor]

Hello Boutemine,

You can get the LinearAxis template with the Reflector tool. Open the Telerik.Windows.Controls.Chart assembly with Reflector, navigate to the assembly's resources and there you will find the themes for every visual in the chart.

All the best,
Victor
the Telerik team

[Boutemine]

Hi Victor,
I tried as you said by applying the ControlTemplate but it seems that the Axis aligns the labels to the right with the axis line regard less the properties, I tried by enclosing the renderSurface in a stack panel and aligning it to the left but it didn't work either, I just want to know if this is possible to do.
Here is the snippet of xaml code I used

<telerikChart:LinearAxis.Template>
    <ControlTemplate >
         <StackPanel HorizontalAlignment="Left">
                <Canvas x:Name="renderSurface" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
          </StackPanel>
   </ControlTemplate>
</telerikChart:LinearAxis.Template>

Thanks for your help
Oualid

[AbdouMoumen]

Hi,

I just found a workaround for this.
Settings the HorizontalAlignment property to "Left" didn't work because it depends on the container, and the TextAlignment didn't work because the TextBlock "auto-resizes" to fit the text. Therefore, by setting the Width of the TextBlock, along with the TextAlignment, you can have the desired layout.

<telerikChart:LinearAxis.LabelTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}" TextAlignment="Left" Width="50" />
    </DataTemplate>
</telerikChart:LinearAxis.LabelTemplate>

This works well in this particular case because the width of the TextBlock can be determined beforehand (the axis shows static values between 0% and 100%). In a case where the content is more dynamic, though, it could get quite complicated.

Hope this helps

[Todor]

Hi,

Yes, you can use the LabelTemplate or the LabelStyle property of the axis to make the alignment of the text left:

<telerikChart:LinearAxis.LabelStyle>
    <Style TargetType="TextBlock">
        <Setter Property="TextAlignment" Value="Left"/>
        <Setter Property="Width" Value="50"/>
    </Style>
</telerikChart:LinearAxis.LabelStyle>

I hope this information helps.

Greetings,
Todor
the Telerik team