silverlight chart demo
<UserControl x:Class="SilverlightChart.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="1024" d:DesignWidth="768" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<UserControl.Resources>
<ControlTemplate x:Key="LineNoTransition" TargetType="toolkit:LineDataPoint">
<Grid x:Name="Root" Opacity="1">
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</ToolTipService.ToolTip>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFDF00"/><!--add-->
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverHighlight">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.24"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionHighlight">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.18"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates"><!--change-->
<VisualState x:Name="Shown" />
<VisualState x:Name="Hidden" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/>
<Ellipse RenderTransformOrigin="0.661,0.321">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.681,0.308">
<GradientStop Color="#00FFFFFF"/>
<GradientStop Color="#FF3D3A3A" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Ellipse x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
</ControlTemplate>
<Style x:Key="LineDataPointStyleBlue" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFB9D6F7"/>
<GradientStop Color="#FF284B70" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleRed" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFBB7B5"/>
<GradientStop Color="#FF702828" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleLightGreen" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFB8C0AC"/>
<GradientStop Color="#FF5F7143" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleYellow" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFDE79C"/>
<GradientStop Color="#FFF6BC0C" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleIndigo" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFA9A3BD"/>
<GradientStop Color="#FF382C6C" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleMagenta" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFB1A1B1"/>
<GradientStop Color="#FF50224F" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleDarkGreen" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF9DC2B3"/>
<GradientStop Color="#FF1D7554" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStylegrayShade" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFB5B5B5"/>
<GradientStop Color="#FF4C4C4C" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleBlue2" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF98C1DC"/>
<GradientStop Color="#FF0271AE" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleBrown" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFC1C0AE"/>
<GradientStop Color="#FF706E41" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleCyan" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFADBDC0"/>
<GradientStop Color="#FF446A73" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleSpecialBlue" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF2F8CE2"/>
<GradientStop Color="#FF0C3E69" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleGrayShare2" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFDCDCDC"/>
<GradientStop Color="#FF757575" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleGrayShare3" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFB7B7B7" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
<Style x:Key="LineDataPointStyleGrayShare4" TargetType="toolkit:LineDataPoint">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/>
<TranslateTransform X="-0.425" Y="-0.486"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFA3A3A3" Offset="1"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Template" Value="{StaticResource LineNoTransition}"/>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:Chart Name="chart1" Title="Chart Title">
</toolkit:Chart>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="23,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</UserControl>
<!--
LineDataPointStyleBlue
LineDataPointStyleRed
LineDataPointStyleLightGreen
LineDataPointStyleYellow
LineDataPointStyleIndigo
LineDataPointStyleMagenta
LineDataPointStyleDarkGreen
LineDataPointStylegrayShade
LineDataPointStyleBlue2
LineDataPointStyleBrown
LineDataPointStyleCyan
LineDataPointStyleSpecialBlue
LineDataPointStyleGrayShare2
LineDataPointStyleGrayShare3
LineDataPointStyleGrayShare4
-->
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.DataVisualization.Charting;
namespace SilverlightChart
{
public partial class MainPage : UserControl
{
public List<KeyValuePair<int, double>> values = new List<KeyValuePair<int, double>>();
public MainPage()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
Random rd = new Random();
values.Clear();
for (int i = 0; i < 1000; i++)
{
values.Add(new KeyValuePair<int, double>(i, rd.NextDouble()));
}
LineSeries lss = new LineSeries();
lss.ItemsSource = values;
lss.IndependentValuePath = "Key";
lss.DependentValuePath = "Value";
lss.DataPointStyle = this.Resources["LineDataPointStyleSpecialBlue"] as Style;
lss.TransitionDuration = new TimeSpan(0);
chart1.Series.Add(lss);
}
}
}
