silverlight - Silverlight 工具包图表中的交错列标签

Question

我需要在 silverlight 工具包中设置图表控件的样式，使其看起来像这样 http://img375.imageshack.us/img375/3758/chartstyle.png

其中列标签是交错的。任何人都可以引导我找到正确的方向来完成这项任务吗？示例将不胜感激。

谢谢，基思

Silverlight 图表 http://img375.imageshack.us/img375/3758/chartstyle.png

Answer 1

我想到了。这是图表的 XAML。

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

并且继承了它的 XAML 样式

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

诀窍是在 Chart.Axes 集合中创建两个 LinearAxis 并隐藏第二个轴标签。此外，您需要设置在我的情况下固定为 1 的间隔。