Wednesday, 22 September 2010

WPF Toolkit DataGrid & Chart example

  • Download WPF Toolkit
  • Create new WPF Project
  • Add References to WPFTookit, WPFTookit.Design (DataGrid)
  • Add Reference to System.Windows.Controls.DataVisualization.Toolkit (Chart)

image

This is XAML

<Window x:Class="WpfDataGrid.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    Title="WPF Toolkit DataGrid &amp; Chart" Height="357" Width="590">
    <DockPanel LastChildFill="True">                        
            <toolkit:DataGrid ItemsSource="{Binding Path=Data}" Height="118" AutoGenerateColumns="False" DockPanel.Dock="Top">
                <toolkit:DataGrid.Columns>
                    <toolkit:DataGridTextColumn Binding="{Binding Date}" Header="Date"/>
                    <toolkit:DataGridTextColumn Binding="{Binding Value}" Header="Value"/>
                </toolkit:DataGrid.Columns>
            </toolkit:DataGrid>
                    <charting:Chart DockPanel.Dock="Bottom">
                <charting:LineSeries
                    ItemsSource="{Binding Path=Data}"
                    IndependentValuePath="Date"
                    DependentValuePath="Value"/>
                <charting:AreaSeries
                    ItemsSource="{Binding Path=Data}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Value}"/>
        </charting:Chart>                
    </DockPanel>
</Window>

And the Code Behind

namespace WpfDataGrid
{
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();
            DataContext = this;
            Init();
        }
        private void Init()
        {
            _data.Add(new Point(new DateTime(2010, 1, 1), 20));
            _data.Add(new Point(new DateTime(2010, 2, 1), 32));
            _data.Add(new Point(new DateTime(2010, 3, 1), 55));
            _data.Add(new Point(new DateTime(2010, 4, 1), 84));
            _data.Add(new Point(new DateTime(2010, 5, 1), 68));
        }
        ObservableCollection<Point> _data = new ObservableCollection<Point>();
        public ObservableCollection<Point> Data
        {
            get{ return _data;}
        }
        public class Point : DependencyObject
        {
            public static readonly DependencyProperty _date = DependencyProperty.Register("Date", typeof(DateTime), typeof(Point));
            public Point(DateTime date, double value)
            {
                Date = date;
                Value = value;
            }
            public DateTime Date
            {
                get { return (DateTime)GetValue(_date); }
                set { SetValue(_date, value); }
            }
            public static readonly DependencyProperty _value = DependencyProperty.Register("Value", typeof(double), typeof(Point));
            public double Value
            {
                get { return (double)GetValue(_value); }
                set { SetValue(_value, value); }
            }
        }
    }
}

2 comments:

Anonymous said...

ObservableCollection????????????????????????

Anonymous said...

Yes, ObservableCollection, Fool!

Post a Comment