Customizing Vertical Axis Template

5 posts, 1 answers
  1. Boutemine
    Boutemine avatar
    7 posts
    Member since:
    Jun 2012

    Posted 12 Jun 2012 Link to this post

    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
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 13 Jun 2012 Link to this post

    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

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

  3. DevCraft banner
  4. Boutemine
    Boutemine avatar
    7 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2012 Link to this post

    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
  5. Answer
    AbdouMoumen
    AbdouMoumen avatar
    6 posts
    Member since:
    Oct 2010

    Posted 14 Jun 2012 Link to this post

    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
  6. Todor
    Admin
    Todor avatar
    778 posts

    Posted 18 Jun 2012 Link to this post

    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

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

Back to Top
DevCraft banner