Silverlight Chart + LineSeries + DataPointStyle 方法

Silverlight Chart + LineSeries + DataPointStyle 方法

MainPage.xaml

   <UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SilverlightApplication.MainPage"
      mc:Ignorable="d">

      <Grid x:Name="LayoutRoot" Background="White">
         <toolkit:Chart x:Name="SalesChart" FontSize="16" Title="Sales Report" BorderBrush="{x:Null}" Margin="10" FontFamily="Arial Unicode MS">
            <toolkit:Chart.TitleStyle>
               <Style TargetType="toolkit:Title">
                  <Setter Property="FontSize" Value="32" />
               </Style>
            </toolkit:Chart.TitleStyle>
            <toolkit:Chart.LegendStyle>
               <Style TargetType="FrameworkElement">
                  <Setter Property="Width" Value="0" />
               </Style>
            </toolkit:Chart.LegendStyle>
            <toolkit:LineSeries
              DependentValueBinding="{Binding SalesAmt}"
              IndependentValueBinding="{Binding ProductName}"
              AnimationSequence="FirstToLast">
               <toolkit:LineSeries.DataPointStyle>
                  <Style TargetType="toolkit:DataPoint">
                     <Setter Property="Background" Value="#000000"/>
                     <Setter Property="Template">
                        <Setter.Value>
                              <ControlTemplate TargetType="toolkit:LineDataPoint">
                                 <Border
                                   Background="{Binding GasColor}"
                                   BorderBrush="{Binding GasColor}"
                                   BorderThickness="0.5">
                                    <Border BorderBrush="{x:Null}">
                                       <Border.Background>
                                          <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                             <GradientStop Color="#000000" Offset="0"/>
                                             <GradientStop Color="{Binding GasColor}" Offset="1"/>
                                          </LinearGradientBrush>
                                       </Border.Background>
                                    </Border>
                                 </Border>
                              </ControlTemplate>
                        </Setter.Value>
                     </Setter>
                  </Style>
               </toolkit:LineSeries.DataPointStyle>
            </toolkit:LineSeries>
         </toolkit:Chart>
      </Grid>
   </UserControl>

MainPage.xaml.cs

   using System;
   using System.Collections.Generic;
   using System.Windows.Controls;
   using System.Windows.Media;
   using System.Windows.Controls.DataVisualization.Charting;

   namespace SilverlightApplication
   {
      public partial class MainPage : UserControl
      {
         public MainPage()
         {
            InitializeComponent();

            List<Product> SalesList = new List<Product>
            {
               new Product
               {
                  ProductName = "Product A",
                  SalesAmt = 850.0
               },
               new Product
               {
                  ProductName = "Product B",
                  SalesAmt = 700.0
               },
               new Product
               {
                  ProductName = "Product C",
                  SalesAmt = 820.0
               },
               new Product
               {
                  ProductName = "Product D",
                  SalesAmt = 600.0
               },
               new Product
               {
                  ProductName = "Product E",
                  SalesAmt = 910.0
               },
               new Product
               {
                  ProductName = "Product F",
                  SalesAmt = 760.0
               }
            };

            ((ColumnSeries)this.SalesChart.Series[0]).ItemsSource = SalesList;
         }

         public class Product
         {
            public string ProductName { get; set; }
            public double SalesAmt { get; set; }
         }
      }
   }