Click here to Skip to main content
15,886,199 members
Articles / Desktop Programming / WPF

How to create stock charts using the Silverlight Toolkit

Rate me:
Please Sign up or sign in to vote.
4.70/5 (15 votes)
16 Feb 2009CPOL2 min read 142K   2.7K   65  
An article on how to create a Candlestick stock chart using the Silverlight Toolkit.
<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:samples="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    x:Class="Microsoft.Windows.Controls.Samples.OverviewSample">
    <StackPanel>

        <StackPanel.Resources>

            <!-- Style for the Grid wrapper around each sample item -->
            <Style x:Key="OverviewWrapperStyle" TargetType="Grid">
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="Margin" Value="1,4,4,1"/>
                <Setter Property="MinWidth" Value="450"/>
                <Setter Property="MinHeight" Value="300"/>
            </Style>

        </StackPanel.Resources>

        <!-- Typical -->
        <ContentControl Content="Typical" Style="{StaticResource Header}"/>

        <controls:WrapPanel>

            <!-- Column (Multiple) -->
            <Grid Style="{StaticResource OverviewWrapperStyle}">
                <charting:Chart
                    Title="Column (Multiple)"
                    LegendTitle="Legend">
                    <charting:Chart.Series>
                        <charting:ColumnSeries Title="Series A">
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>1</sys:Int32>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>5</sys:Int32>
                                    <sys:Int32>2</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                        <charting:ColumnSeries Title="Series B">
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>2</sys:Int32>
                                    <sys:Int32>4</sys:Int32>
                                    <sys:Int32>6</sys:Int32>
                                    <sys:Int32>3</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                        <charting:ColumnSeries Title="Series C">
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>4</sys:Int32>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>2</sys:Int32>
                                    <sys:Int32>5</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                    </charting:Chart.Series>
                    <charting:Chart.Axes>
                        <charting:LinearAxis Orientation="Vertical" Minimum="0" ShowGridLines="True"/>
                    </charting:Chart.Axes>
                </charting:Chart>
            </Grid>

            <!-- Pie -->
            <Grid Style="{StaticResource OverviewWrapperStyle}">
                <charting:Chart
                    Title="Pie">
                    <charting:Chart.Series>
                        <charting:PieSeries
                            IndependentValueBinding="{Binding Species}"
                            DependentValueBinding="{Binding Count}">
                            <charting:PieSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <samples:Pet Species="Dogs" Count="3"/>
                                    <samples:Pet Species="Cats" Count="4"/>
                                    <samples:Pet Species="Birds" Count="2"/>
                                    <samples:Pet Species="Mice" Count="3"/>
                                </controls:ObjectCollection>
                            </charting:PieSeries.ItemsSource>
                        </charting:PieSeries>
                    </charting:Chart.Series>
                </charting:Chart>
            </Grid>      
        </controls:WrapPanel>


        <!-- Styling -->
        <ContentControl Content="Styling" Style="{StaticResource Header}"/>

        <controls:WrapPanel>

            <!-- Custom Colors -->
            <Grid Style="{StaticResource OverviewWrapperStyle}">
                <charting:Chart Title="Custom Colors">
                    <charting:Chart.StylePalette>
                        <datavis:StylePalette>
                            <Style TargetType="Control">
                                <Setter Property="Background" Value="{StaticResource DefaultEnhancedChartDarkBlue}"/>
                            </Style>
                            <Style TargetType="Control">
                                <Setter Property="Background" Value="{StaticResource ShinyYellowBrush}"/>
                            </Style>
                        </datavis:StylePalette>
                    </charting:Chart.StylePalette>
                    <charting:Chart.Series>
                        <charting:ColumnSeries>
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>5</sys:Int32>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>4</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                        <charting:ColumnSeries>
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>2</sys:Int32>
                                    <sys:Int32>4</sys:Int32>
                                    <sys:Int32>2</sys:Int32>
                                    <sys:Int32>4</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                    </charting:Chart.Series>
                </charting:Chart>
            </Grid>

            <!-- Custom Template -->
            <Grid Style="{StaticResource OverviewWrapperStyle}">
                <charting:Chart Title="Custom Template">
                    <charting:Chart.StylePalette>
                        <datavis:StylePalette>
                            <Style TargetType="charting:DataPoint">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFD2D2D2"/>
                                            <GradientStop Color="#FFA3A3A3" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" Value="Black"/>
                                <Setter Property="BorderThickness" Value="1"/>
                                <Setter Property="IsTabStop" Value="False"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="charting:DataPoint">
                                            <Border  Width="40" x:Name="Root" Opacity="0" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                                <vsm:VisualStateManager.VisualStateGroups>
                                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                                        <vsm:VisualStateGroup.Transitions>
                                                            <vsm:VisualTransition GeneratedDuration="0:0:0.1"/>
                                                        </vsm:VisualStateGroup.Transitions>
                                                        <vsm:VisualState x:Name="Normal"/>
                                                        <vsm:VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <DoubleAnimation
                                                                    Storyboard.TargetName="glow"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="0.6"
                                                                    Duration="0"/>
                                                            </Storyboard>
                                                        </vsm:VisualState>
                                                    </vsm:VisualStateGroup>
                                                    <vsm:VisualStateGroup x:Name="SelectionStates">
                                                        <vsm:VisualStateGroup.Transitions>
                                                            <vsm:VisualTransition GeneratedDuration="0:0:0.1"/>
                                                        </vsm:VisualStateGroup.Transitions>
                                                        <vsm:VisualState x:Name="Unselected"/>
                                                        <vsm:VisualState x:Name="Selected">
                                                            <Storyboard>
                                                                <DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="BorderThickness"
                                                                    To="4.0"
                                                                    Duration="0"/>
                                                            </Storyboard>
                                                        </vsm:VisualState>
                                                    </vsm:VisualStateGroup>
                                                    <vsm:VisualStateGroup x:Name="RevealStates">
                                                        <vsm:VisualStateGroup.Transitions>
                                                            <vsm:VisualTransition GeneratedDuration="0:0:0.5"/>
                                                        </vsm:VisualStateGroup.Transitions>
                                                        <vsm:VisualState x:Name="Shown">
                                                            <Storyboard>
                                                                <DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="1"
                                                                    Duration="0"/>
                                                            </Storyboard>
                                                        </vsm:VisualState>
                                                        <vsm:VisualState x:Name="Hidden">
                                                            <Storyboard>
                                                                <DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="0"
                                                                    Duration="0"/>
                                                            </Storyboard>
                                                        </vsm:VisualState>
                                                    </vsm:VisualStateGroup>
                                                </vsm:VisualStateManager.VisualStateGroups>
                                                <ToolTipService.ToolTip>
                                                    <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
                                                </ToolTipService.ToolTip>
                                                <Border  BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4" >
                                                    <Border Background="DarkGray" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                                        <Grid Width="40">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="10"/>
                                                                <RowDefinition Height="5"/>
                                                                <RowDefinition Height="*"/>
                                                            </Grid.RowDefinitions>
                                                            <Border Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="3" CornerRadius="4,4,4,4"  x:Name="glow" Opacity="0">
                                                                <Border.Background>
                                                                    <RadialGradientBrush GradientOrigin="0.504,0.459">
                                                                        <RadialGradientBrush.RelativeTransform>
                                                                            <TransformGroup>
                                                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="-2.516" ScaleY="-2.2"/>
                                                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                                                <TranslateTransform X="0.149" Y="0.448"/>
                                                                            </TransformGroup>
                                                                        </RadialGradientBrush.RelativeTransform>
                                                                        <GradientStop Color="#372DE6"/>
                                                                        <GradientStop Color="#EE4646" Offset="1"/>
                                                                    </RadialGradientBrush>
                                                                </Border.Background>
                                                            </Border>
                                                            <Border Grid.RowSpan="1" CornerRadius="4,4,0,0" x:Name="shine" Margin="0,0,0,0" Height="Auto" VerticalAlignment="Stretch" Grid.Row="0">
                                                                <Border.Background>
                                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                        <GradientStop Color="#99FFFFFF"/>
                                                                        <GradientStop Color="#66FFFFFF" Offset="1"/>
                                                                    </LinearGradientBrush>
                                                                </Border.Background>
                                                            </Border>
                                                            <Path Height="5" Margin="0,0,0,0" VerticalAlignment="Top" Stretch="Fill" Stroke="{x:Null}" Grid.Row="1" Data="M0.5,0.5 L189.5,0.5 L189.5,4.5 L169.85396,3.7 L133.79474,3.5 L96.989479,3.3 L58.940792,3.3 L26.114473,3.5 L0.5,4.5 z">
                                                                <Path.Fill>
                                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                        <GradientStop Color="#66FFFFFF"/>
                                                                        <GradientStop Color="#33FFFFFF" Offset="1"/>
                                                                    </LinearGradientBrush>
                                                                </Path.Fill>
                                                            </Path>
                                                        </Grid>
                                                    </Border>
                                                </Border>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </datavis:StylePalette>
                    </charting:Chart.StylePalette>
                    <charting:Chart.Series>
                        <charting:ColumnSeries>
                            <charting:ColumnSeries.ItemsSource>
                                <controls:ObjectCollection>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>5</sys:Int32>
                                    <sys:Int32>3</sys:Int32>
                                    <sys:Int32>4</sys:Int32>
                                </controls:ObjectCollection>
                            </charting:ColumnSeries.ItemsSource>
                        </charting:ColumnSeries>
                    </charting:Chart.Series>
                    <charting:Chart.PlotAreaStyle>
                        <Style TargetType="Grid">
                            <Setter Property="Background" Value="#DDDDDD"/>
                        </Style>
                    </charting:Chart.PlotAreaStyle>
                    <charting:Chart.Axes>
                        <charting:LinearAxis Orientation="Vertical" Minimum="0" ShowGridLines="True"/>
                    </charting:Chart.Axes>
                </charting:Chart>
            </Grid>

        </controls:WrapPanel>


        <src:SourceViewer xmlns:src="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples.Common" xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <src:SourceFile Path="Overview.xaml">
    <src:SourceFile.Source>
      <sys:String>&lt;!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
--&gt;

&lt;UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
    xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
    xmlns:samples="clr-namespace:Microsoft.Windows.Controls.Samples;assembly=Microsoft.Windows.Controls.Samples"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    x:Class="Microsoft.Windows.Controls.Samples.OverviewSample"&gt;
    &lt;StackPanel&gt;

        &lt;StackPanel.Resources&gt;

            &lt;!-- Style for the Grid wrapper around each sample item --&gt;
            &lt;Style x:Key="OverviewWrapperStyle" TargetType="Grid"&gt;
                &lt;Setter Property="VerticalAlignment" Value="Top"/&gt;
                &lt;Setter Property="Margin" Value="1,4,4,1"/&gt;
                &lt;Setter Property="MinWidth" Value="450"/&gt;
                &lt;Setter Property="MinHeight" Value="300"/&gt;
            &lt;/Style&gt;

        &lt;/StackPanel.Resources&gt;

        &lt;!-- Typical --&gt;
        &lt;ContentControl Content="Typical" Style="{StaticResource Header}"/&gt;

        &lt;controls:WrapPanel&gt;

            &lt;!-- Column (Multiple) --&gt;
            &lt;Grid Style="{StaticResource OverviewWrapperStyle}"&gt;
                &lt;charting:Chart
                    Title="Column (Multiple)"
                    LegendTitle="Legend"&gt;
                    &lt;charting:Chart.Series&gt;
                        &lt;charting:ColumnSeries Title="Series A"&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;1&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;5&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;2&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                        &lt;charting:ColumnSeries Title="Series B"&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;2&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;6&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                        &lt;charting:ColumnSeries Title="Series C"&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;2&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;5&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                    &lt;/charting:Chart.Series&gt;
                    &lt;charting:Chart.Axes&gt;
                        &lt;charting:LinearAxis Orientation="Vertical" Minimum="0" ShowGridLines="True"/&gt;
                    &lt;/charting:Chart.Axes&gt;
                &lt;/charting:Chart&gt;
            &lt;/Grid&gt;

            &lt;!-- Pie --&gt;
            &lt;Grid Style="{StaticResource OverviewWrapperStyle}"&gt;
                &lt;charting:Chart
                    Title="Pie"&gt;
                    &lt;charting:Chart.Series&gt;
                        &lt;charting:PieSeries
                            IndependentValueBinding="{Binding Species}"
                            DependentValueBinding="{Binding Count}"&gt;
                            &lt;charting:PieSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;samples:Pet Species="Dogs" Count="3"/&gt;
                                    &lt;samples:Pet Species="Cats" Count="4"/&gt;
                                    &lt;samples:Pet Species="Birds" Count="2"/&gt;
                                    &lt;samples:Pet Species="Mice" Count="3"/&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:PieSeries.ItemsSource&gt;
                        &lt;/charting:PieSeries&gt;
                    &lt;/charting:Chart.Series&gt;
                &lt;/charting:Chart&gt;
            &lt;/Grid&gt;      
        &lt;/controls:WrapPanel&gt;


        &lt;!-- Styling --&gt;
        &lt;ContentControl Content="Styling" Style="{StaticResource Header}"/&gt;

        &lt;controls:WrapPanel&gt;

            &lt;!-- Custom Colors --&gt;
            &lt;Grid Style="{StaticResource OverviewWrapperStyle}"&gt;
                &lt;charting:Chart Title="Custom Colors"&gt;
                    &lt;charting:Chart.StylePalette&gt;
                        &lt;datavis:StylePalette&gt;
                            &lt;Style TargetType="Control"&gt;
                                &lt;Setter Property="Background" Value="{StaticResource DefaultEnhancedChartDarkBlue}"/&gt;
                            &lt;/Style&gt;
                            &lt;Style TargetType="Control"&gt;
                                &lt;Setter Property="Background" Value="{StaticResource ShinyYellowBrush}"/&gt;
                            &lt;/Style&gt;
                        &lt;/datavis:StylePalette&gt;
                    &lt;/charting:Chart.StylePalette&gt;
                    &lt;charting:Chart.Series&gt;
                        &lt;charting:ColumnSeries&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;5&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                        &lt;charting:ColumnSeries&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;2&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;2&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                    &lt;/charting:Chart.Series&gt;
                &lt;/charting:Chart&gt;
            &lt;/Grid&gt;

            &lt;!-- Custom Template --&gt;
            &lt;Grid Style="{StaticResource OverviewWrapperStyle}"&gt;
                &lt;charting:Chart Title="Custom Template"&gt;
                    &lt;charting:Chart.StylePalette&gt;
                        &lt;datavis:StylePalette&gt;
                            &lt;Style TargetType="charting:DataPoint"&gt;
                                &lt;Setter Property="Background"&gt;
                                    &lt;Setter.Value&gt;
                                        &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                                            &lt;GradientStop Color="#FFD2D2D2"/&gt;
                                            &lt;GradientStop Color="#FFA3A3A3" Offset="1"/&gt;
                                        &lt;/LinearGradientBrush&gt;
                                    &lt;/Setter.Value&gt;
                                &lt;/Setter&gt;
                                &lt;Setter Property="BorderBrush" Value="Black"/&gt;
                                &lt;Setter Property="BorderThickness" Value="1"/&gt;
                                &lt;Setter Property="IsTabStop" Value="False"/&gt;
                                &lt;Setter Property="Template"&gt;
                                    &lt;Setter.Value&gt;
                                        &lt;ControlTemplate TargetType="charting:DataPoint"&gt;
                                            &lt;Border  Width="40" x:Name="Root" Opacity="0" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"&gt;
                                                &lt;vsm:VisualStateManager.VisualStateGroups&gt;
                                                    &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt;
                                                        &lt;vsm:VisualStateGroup.Transitions&gt;
                                                            &lt;vsm:VisualTransition GeneratedDuration="0:0:0.1"/&gt;
                                                        &lt;/vsm:VisualStateGroup.Transitions&gt;
                                                        &lt;vsm:VisualState x:Name="Normal"/&gt;
                                                        &lt;vsm:VisualState x:Name="MouseOver"&gt;
                                                            &lt;Storyboard&gt;
                                                                &lt;DoubleAnimation
                                                                    Storyboard.TargetName="glow"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="0.6"
                                                                    Duration="0"/&gt;
                                                            &lt;/Storyboard&gt;
                                                        &lt;/vsm:VisualState&gt;
                                                    &lt;/vsm:VisualStateGroup&gt;
                                                    &lt;vsm:VisualStateGroup x:Name="SelectionStates"&gt;
                                                        &lt;vsm:VisualStateGroup.Transitions&gt;
                                                            &lt;vsm:VisualTransition GeneratedDuration="0:0:0.1"/&gt;
                                                        &lt;/vsm:VisualStateGroup.Transitions&gt;
                                                        &lt;vsm:VisualState x:Name="Unselected"/&gt;
                                                        &lt;vsm:VisualState x:Name="Selected"&gt;
                                                            &lt;Storyboard&gt;
                                                                &lt;DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="BorderThickness"
                                                                    To="4.0"
                                                                    Duration="0"/&gt;
                                                            &lt;/Storyboard&gt;
                                                        &lt;/vsm:VisualState&gt;
                                                    &lt;/vsm:VisualStateGroup&gt;
                                                    &lt;vsm:VisualStateGroup x:Name="RevealStates"&gt;
                                                        &lt;vsm:VisualStateGroup.Transitions&gt;
                                                            &lt;vsm:VisualTransition GeneratedDuration="0:0:0.5"/&gt;
                                                        &lt;/vsm:VisualStateGroup.Transitions&gt;
                                                        &lt;vsm:VisualState x:Name="Shown"&gt;
                                                            &lt;Storyboard&gt;
                                                                &lt;DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="1"
                                                                    Duration="0"/&gt;
                                                            &lt;/Storyboard&gt;
                                                        &lt;/vsm:VisualState&gt;
                                                        &lt;vsm:VisualState x:Name="Hidden"&gt;
                                                            &lt;Storyboard&gt;
                                                                &lt;DoubleAnimation
                                                                    Storyboard.TargetName="Root"
                                                                    Storyboard.TargetProperty="Opacity"
                                                                    To="0"
                                                                    Duration="0"/&gt;
                                                            &lt;/Storyboard&gt;
                                                        &lt;/vsm:VisualState&gt;
                                                    &lt;/vsm:VisualStateGroup&gt;
                                                &lt;/vsm:VisualStateManager.VisualStateGroups&gt;
                                                &lt;ToolTipService.ToolTip&gt;
                                                    &lt;ContentControl Content="{TemplateBinding FormattedDependentValue}"/&gt;
                                                &lt;/ToolTipService.ToolTip&gt;
                                                &lt;Border  BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4" &gt;
                                                    &lt;Border Background="DarkGray" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"&gt;
                                                        &lt;Grid Width="40"&gt;
                                                            &lt;Grid.RowDefinitions&gt;
                                                                &lt;RowDefinition Height="10"/&gt;
                                                                &lt;RowDefinition Height="5"/&gt;
                                                                &lt;RowDefinition Height="*"/&gt;
                                                            &lt;/Grid.RowDefinitions&gt;
                                                            &lt;Border Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="3" CornerRadius="4,4,4,4"  x:Name="glow" Opacity="0"&gt;
                                                                &lt;Border.Background&gt;
                                                                    &lt;RadialGradientBrush GradientOrigin="0.504,0.459"&gt;
                                                                        &lt;RadialGradientBrush.RelativeTransform&gt;
                                                                            &lt;TransformGroup&gt;
                                                                                &lt;ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="-2.516" ScaleY="-2.2"/&gt;
                                                                                &lt;SkewTransform CenterX="0.5" CenterY="0.5"/&gt;
                                                                                &lt;RotateTransform CenterX="0.5" CenterY="0.5"/&gt;
                                                                                &lt;TranslateTransform X="0.149" Y="0.448"/&gt;
                                                                            &lt;/TransformGroup&gt;
                                                                        &lt;/RadialGradientBrush.RelativeTransform&gt;
                                                                        &lt;GradientStop Color="#372DE6"/&gt;
                                                                        &lt;GradientStop Color="#EE4646" Offset="1"/&gt;
                                                                    &lt;/RadialGradientBrush&gt;
                                                                &lt;/Border.Background&gt;
                                                            &lt;/Border&gt;
                                                            &lt;Border Grid.RowSpan="1" CornerRadius="4,4,0,0" x:Name="shine" Margin="0,0,0,0" Height="Auto" VerticalAlignment="Stretch" Grid.Row="0"&gt;
                                                                &lt;Border.Background&gt;
                                                                    &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                                                                        &lt;GradientStop Color="#99FFFFFF"/&gt;
                                                                        &lt;GradientStop Color="#66FFFFFF" Offset="1"/&gt;
                                                                    &lt;/LinearGradientBrush&gt;
                                                                &lt;/Border.Background&gt;
                                                            &lt;/Border&gt;
                                                            &lt;Path Height="5" Margin="0,0,0,0" VerticalAlignment="Top" Stretch="Fill" Stroke="{x:Null}" Grid.Row="1" Data="M0.5,0.5 L189.5,0.5 L189.5,4.5 L169.85396,3.7 L133.79474,3.5 L96.989479,3.3 L58.940792,3.3 L26.114473,3.5 L0.5,4.5 z"&gt;
                                                                &lt;Path.Fill&gt;
                                                                    &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                                                                        &lt;GradientStop Color="#66FFFFFF"/&gt;
                                                                        &lt;GradientStop Color="#33FFFFFF" Offset="1"/&gt;
                                                                    &lt;/LinearGradientBrush&gt;
                                                                &lt;/Path.Fill&gt;
                                                            &lt;/Path&gt;
                                                        &lt;/Grid&gt;
                                                    &lt;/Border&gt;
                                                &lt;/Border&gt;
                                            &lt;/Border&gt;
                                        &lt;/ControlTemplate&gt;
                                    &lt;/Setter.Value&gt;
                                &lt;/Setter&gt;
                            &lt;/Style&gt;
                        &lt;/datavis:StylePalette&gt;
                    &lt;/charting:Chart.StylePalette&gt;
                    &lt;charting:Chart.Series&gt;
                        &lt;charting:ColumnSeries&gt;
                            &lt;charting:ColumnSeries.ItemsSource&gt;
                                &lt;controls:ObjectCollection&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;5&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;3&lt;/sys:Int32&gt;
                                    &lt;sys:Int32&gt;4&lt;/sys:Int32&gt;
                                &lt;/controls:ObjectCollection&gt;
                            &lt;/charting:ColumnSeries.ItemsSource&gt;
                        &lt;/charting:ColumnSeries&gt;
                    &lt;/charting:Chart.Series&gt;
                    &lt;charting:Chart.PlotAreaStyle&gt;
                        &lt;Style TargetType="Grid"&gt;
                            &lt;Setter Property="Background" Value="#DDDDDD"/&gt;
                        &lt;/Style&gt;
                    &lt;/charting:Chart.PlotAreaStyle&gt;
                    &lt;charting:Chart.Axes&gt;
                        &lt;charting:LinearAxis Orientation="Vertical" Minimum="0" ShowGridLines="True"/&gt;
                    &lt;/charting:Chart.Axes&gt;
                &lt;/charting:Chart&gt;
            &lt;/Grid&gt;

        &lt;/controls:WrapPanel&gt;
    &lt;/StackPanel&gt;
&lt;/UserControl&gt;
</sys:String>
    </src:SourceFile.Source>
  </src:SourceFile>
  <src:SourceFile Path="Overview.xaml.cs">
    <src:SourceFile.Source>
      <sys:String>// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.

using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Windows.Controls.DataVisualization.Charting;
using System.ComponentModel;

namespace Microsoft.Windows.Controls.Samples
{
    /// &lt;summary&gt;
    /// Sample page demonstrating the Chart.
    /// &lt;/summary&gt;
    [Sample("(1)Overview", DifficultyLevel.Basic)]
    [Category("DataVisualization")]
    public partial class OverviewSample : UserControl
    {
        /// &lt;summary&gt;
        /// Initializes a new instance of the OverviewSample class.
        /// &lt;/summary&gt;
        public OverviewSample()
        {
            InitializeComponent();
        }
    }
}</sys:String>
    </src:SourceFile.Source>
  </src:SourceFile>
</src:SourceViewer>
    </StackPanel>
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions