Remove Stagger in Silverlight Chart X-Axis Labels

I created a Silverlight Column chart and rotated the X-Axis, following the guidelines of this MSDN Blog. The labels are rotated correctly, but I end up with staggered labels in my X-Axis, which does not fit well. I would like to remove the stagger from the labels.

Here is the XAML:

<toolkit:Chart Name="theColumnChart" BorderThickness="0" Margin="5"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Chart}"
Template="{StaticResource ChartTemplate}" TitleStyle="{StaticResource ChartTitleStyle}">
<toolkit:Chart.Palette>
  <visualizationToolkit:ResourceDictionaryCollection>
    <ResourceDictionary>
      <Style x:Key="DataPointStyle" TargetType="toolkit:ColumnDataPoint" BasedOn="{StaticResource ColumnDataPointStyle}">
        <Setter Property="Background" Value="Goldenrod"/>
      </Style>
    </ResourceDictionary>
    <ResourceDictionary>
      <Style x:Key="DataPointStyl开发者_StackOverflow社区e" TargetType="toolkit:ColumnDataPoint" BasedOn="{StaticResource ColumnDataPointStyle}">
        <Setter Property="Background" Value="SaddleBrown"/>
      </Style>
    </ResourceDictionary>
  </visualizationToolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
<toolkit:Chart.Axes>
  <toolkit:LinearAxis Minimum="0" Orientation="Y" />
</toolkit:Chart.Axes>
<toolkit:Chart.Series>
  <toolkit:ColumnSeries DependentValueBinding="{Binding ItemValue}" IndependentValueBinding="{Binding ItemKey}"
    ItemsSource="{Binding Statistics1}" Title="{Binding SeriesTitle}">
    <toolkit:ColumnSeries.IndependentAxis>
      <toolkit:CategoryAxis Orientation="X">
        <toolkit:CategoryAxis.AxisLabelStyle>
          <Style TargetType="toolkit:AxisLabel">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="toolkit:AxisLabel">
                  <layout:LayoutTransformer>
                    <layout:LayoutTransformer.LayoutTransform>
                      <RotateTransform Angle="-45"/>
                    </layout:LayoutTransformer.LayoutTransform>
                    <TextBlock Text="{TemplateBinding FormattedContent}"/>
                  </layout:LayoutTransformer>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </toolkit:CategoryAxis.AxisLabelStyle>
      </toolkit:CategoryAxis>
    </toolkit:ColumnSeries.IndependentAxis>
  </toolkit:ColumnSeries>
</toolkit:Chart.Series>
</toolkit:Chart>

Here is a picture of the problem:

When the labels are rotated by 90°, even with visually sufficient space between them, the stagger occurs, not sure why. So I end up with vertical staggered labels with plenty of space between them!

I came across the problem today, and I found a slightly hacky solution which does not require the modification of the control itself, but only involves a custom control template.

The following code shows the date labels vertically, and remove the stagger.

Every label is wrapped into a Canvas, which, as explained here, does not clip its content. I had to modify the labels' margins to align them with axis marks.

<toolkit:DateTimeAxis.AxisLabelStyle>
            <Style TargetType="toolkit:DateTimeAxisLabel">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:DateTimeAxisLabel">
                            <Canvas Height="55">
                                <sdk:Label Content="{Binding StringFormat=\{0:dd/MM/yyyy\}}" Margin="-30,30,0,0" >
                                    <sdk:Label.RenderTransform>
                                        <RotateTransform Angle="-90" />
                                    </sdk:Label.RenderTransform>
                                    <sdk:Label.RenderTransformOrigin>
                                        <Point>0.5, 0.5</Point>
                                    </sdk:Label.RenderTransformOrigin>
                                </sdk:Label>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:DateTimeAxis.AxisLabelStyle>

here is the result:

Rachel Martin,

The labels above are still wide enough that there's not enough room to fit them all next to each other. You could choose to rotate the text more (which will narrow each label) or make the chart wider (which will provide more room for the labels). If you don't like either of those options, you can also remove the stagger behavior, but it's necessary to modify the Data Visualization code to do so; I explain how here: http://blogs.msdn.com/b/delay/archive/2010/03/06/turn-your-head-and-check-out-this-post-how-to-easily-rotate-the-axis-labels-of-a-silverlight-wpf-toolkit-chart.aspx#10083036

Hope this helps!