Échelonnement dans Silverlight Étiquettes colonne Toolkit graphique

Question

je dois le style du contrôle graphique dans boîte à outils silverlight pour ressembler à ce http://img375.imageshack.us/img375/3758/chartstyle.png

dans laquelle les étiquettes de colonne sont décalés. Quelqu'un peut-il me conduire à la bonne direction sur la façon d'accomplir cette tâche? Des exemples seraient grandement appréciés.

Merci, Keith

Silverlight Chart http://img375.imageshack.us/img375/3758/chartstyle.png

Answer 1

I figured it out. Heres le XAML pour le graphique.

    <toolkit:Chart 
        x:Name="barStyledChart" 
        Foreground="#FF579ED4" 
        Style="{StaticResource GreenFxChartStyle}" 
        FontSize="8" 
        Width="290" 
        Height="170" 
        BorderThickness="0"> 
        <toolkit:Chart.Axes> 
         <toolkit:LinearAxis ShowGridLines="True" Orientation="X" Interval="1"> 
          <toolkit:LinearAxis.GridLineStyle> 
           <Style TargetType="Line"> 
            <Setter Property="Stroke" Value="#FF579ED4"></Setter> 
           </Style> 
          </toolkit:LinearAxis.GridLineStyle> 
         </toolkit:LinearAxis> 
         <toolkit:LinearAxis ShowGridLines="True" Orientation="Y" Location="Left" Minimum="0" Maximum="200"> 
          <toolkit:LinearAxis.GridLineStyle> 
           <Style TargetType="Line"> 
            <Setter Property="Stroke" Value="#FF032F50"></Setter> 
           </Style> 
          </toolkit:LinearAxis.GridLineStyle> 
         </toolkit:LinearAxis> 
        </toolkit:Chart.Axes> 
        <toolkit:ColumnSeries Background="#FF53C023" 
      AnimationSequence="FirstToLast" 
      DependentValuePath="X" IndependentValuePath="Y"> 
      <toolkit:ColumnSeries.ItemsSource> 
       <PointCollection> 
        <Point>100,2000</Point> 
        <Point>105,2001</Point> 
        <Point>98,2002</Point> 
        <Point>88,2003</Point> 
        <Point>150,2004</Point> 
        <Point>125,2005</Point> 
        <Point>93,2006</Point> 
        <Point>112,2007</Point> 
        <Point>145,2008</Point> 
        <Point>165,2009</Point> 
        <Point>173,2010</Point> 
        <Point>168,2011</Point> 
        <Point>160,2012</Point> 
        <Point>164,2013</Point> 
        <Point>158,2014</Point>                  
       </PointCollection> 
      </toolkit:ColumnSeries.ItemsSource> 
         <toolkit:ColumnSeries.DataPointStyle> 
          <Style TargetType="toolkit:ColumnDataPoint"> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="toolkit:ColumnDataPoint"> 
              <Grid Width="10"> 
               <Border BorderBrush="White" BorderThickness="1"> 
                <Rectangle Fill="#FF53C023" Opacity=".8"></Rectangle> 
               </Border> 
              </Grid> 
             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
         </toolkit:ColumnSeries.DataPointStyle> 
        </toolkit:ColumnSeries> 
       </toolkit:Chart> 

et Heres le style XAML pour elle

<Application 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization" 
xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 
xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.ProgressionSequenceData" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 
x:Class="SilverlightChartScratchpad.App"> 
<Application.Resources> 
    <SampleData:ProgressionSequenceData x:Key="ProgressionSequenceData" d:IsDataSource="True"/> 

    <Style x:Key="GreenFxChartStyle" TargetType="toolkit:Chart" > 
     <Setter Property="BorderBrush" Value="Black" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Padding" Value="10" /> 

     <Setter Property="Background"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0.352,1.144" StartPoint="0.352,-0.161"> 
        <GradientStop Color="#FF0585D6" Offset="0.268"/> 
        <GradientStop Color="#FF01336E" Offset="0.847"/> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter>   

     <Setter Property="TitleStyle"> 
     <Setter.Value> 
      <Style TargetType="toolkit:Title"> 
          <Setter Property="Margin" Value="0" /> 
          <Setter Property="Width" Value="0"/> 
          <Setter Property="Height" Value="0"/> 
      </Style> 
     </Setter.Value> 
     </Setter> 
     <Setter Property="LegendStyle"> 
     <Setter.Value> 
      <Style TargetType="toolkit:Legend"> 
          <Setter Property="Margin" Value="0" /> 
          <Setter Property="Width" Value="0"/> 
          <Setter Property="Height" Value="0"/> 
      </Style> 
     </Setter.Value> 
     </Setter> 
     <Setter Property="ChartAreaStyle"> 
     <Setter.Value> 
      <Style TargetType="Panel"> 
      <Setter Property="MinWidth" Value="100" /> 
      <Setter Property="MinHeight" Value="75" /> 
      </Style> 
     </Setter.Value> 
     </Setter> 
     <Setter Property="PlotAreaStyle"> 
     <Setter.Value> 
      <Style TargetType="Grid"> 
      <Setter Property="Background" Value="Transparent"></Setter> 
      </Style> 
     </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="toolkit:Chart"> 
      <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"> 
       <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 
       <toolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" /> 
       <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto --> 
       <Grid Grid.Row="1" Margin="0,0,0,0"> 
        <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="Auto" /> 
        </Grid.ColumnDefinitions> 
        <toolkit:Legend x:Name="Legend" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Column="1" /> 
        <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"> 
        <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" /> 
        <Border Canvas.ZIndex="10" BorderBrush="#FF032F50" BorderThickness="0,0,0,1" /> 
        </chartingprimitives:EdgePanel> 
       </Grid> 
       </Grid> 
      </Border> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 

</Application.Resources> 

L'astuce est de créer deux LinearAxis dans la collection Chart.Axes et cacher la seconde étiquette d'axe. En outre, vous devez définir l'intervalle qui dans mon cas est fixé à 1.