WPF Toolkit ve Linechart

Merhaba arkadaşlar;

Bu yazımda WPF serimin devamı olarak WPF'te Toolkit kurulumu ve basit bir linechart'ın nasıl çizileceğini anlatacağım. Bilindiği üzere Visual Studio'da WPF projemizi açtığımızda chart kontrolü Toolbox'ta mevcut bulunmamaktadır. Bunu ve diğer birçok kontrolü kullanabilmek için Toolkit kurmamız gerekli. Peki nasıl indirebiliriz ve kullanabiliriz? Toolkit'i buradan kolayca ve ücretsiz indirebilir ve kurabilirsiniz. Sonra da açtığınız her projede bunu references kısmından .Net'e girip "WPFToolkit" olarak bulun ve seçin. Sonra da şunu xaml kısmınıza ekleyin:
xmlns:charting="clrnamespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" Bundan sonra her çizeceğimiz chart, "charting"le başlayacak. Şimdi chart oluşturmanız kolay. Fakat yapacağınız chart'lar oldukça ilkel olacaktır. Bense bu ilkellikten nasıl kurtulacağınızı adım adım anlatacağım. Öncelikle X ve Y eksenlerini düzenlemeyi tercih ediyorum:

            <charting:Chart.Axes>

                <charting:LinearAxis

                    Orientation="Y"

                    Interval="10"

                    FontFamily="Times New Roman"

                    FontSize="14"

                    FontWeight="Bold" ShowGridLines="True" />

            </charting:Chart.Axes>

Burada Y eksenini düzenledim ve gelecek veriler eğer sayı ise aralıklarını Interval ile değiştiriyoruz. FontFamily ile verinin yazı tipini ayarlıyoruz. Verinin yazı boyutunu FontSize ile değiştirebilirsiniz. Kalınlığı FontWeight ile ayarlayabilirsiniz. Eğer ki chart üzerinde veri aralıklarını çizgilerle göstermek istiyorsak ShowGridLines'ı "True" yapmalısınız. Şimdi size bir linechart için yazdığım kod blogunu göstereceğim:

<Window x:Class=" Elif_App1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

        Title="Merhaba" Height="334" Width="562" >

    <Grid 

        <charting:Chart

            Name="BenimChartım" Foreground="Yellow"

            Background="#FF221F1F"

            Title="İstatistikler"

            LegendTitle="Artış"

            BorderBrush="darkblue"

            BorderThickness="7" Margin="1,0,20,0">

           

                <charting:Chart.Series>

                <charting:LineSeries ItemsSource="{Binding}"                 

                                           Title="Miktar"

                                           IndependentValuePath="Key"

                                           DependentValuePath="Value"

                                           IsSelectionEnabled="True">

                    <charting:LineSeries.IndependentAxis>

                        <charting:LinearAxis Orientation="X" Title="Time(mins)"

                                             Interval="100" />

                    </charting:LineSeries.IndependentAxis>

                    <charting:LineSeries.DependentRangeAxis>

                        <charting:LinearAxis Orientation="Y" Title="Power"

                                             Interval="200"

                                             ShowGridLines="True" />

                    </charting:LineSeries.DependentRangeAxis>

                </charting:LineSeries>

                </charting:Chart.Series>

        </charting:Chart>

    </Grid>

</Window> 

Şimdi merak ettiğiniz şey ItemsSource="{Binding}" kısmı. Bu kısım xaml'le C# kısmındaki verileri bağlamamıza yarayan kısım. Yani kod tarafını tasarıma bağlıyouz. Kod kısmını ise şöyle düşündüm; siz bu chart'a verileri tek tek girecekseniz:

public MainWindow()

        {

            InitializeComponent();

            BenimChartım.DataContext = new KeyValuePair< double ,  double >[] {

                                    new KeyValuePair<double,  double >(30,20),

                                    new KeyValuePair< double ,  double >(25,30),

                                    new KeyValuePair< double ,  double >(5, 40),

                                    new KeyValuePair< double ,  double >(8,50),

                                    new KeyValuePair< double ,  double >(12,60) 

        };

yapabilirsiniz. 

• X ve Y eksenlerini  ve KeyValuePair çiftlerini nasıl mı birleştirdim?

 <charting:LineSeries ItemsSource="{Binding}"                 

                                           Title="Miktar"

                                           IndependentValuePath="Key"

                                           DependentValuePath="Value">  

diyerek IndependentValuePath'i "Key" ve DependentValuePath'i "Value" olarak ayarlıyoruz. Sonrasında da IndependentAxis'in Orientation'ını X, DependentRangeAxis'in de Orientation'ını Y olarak ayarlarsak "Key" değerleri X eksenine, Value değerleri de Y eksenine bağlanır.  

Fakat aynı anda çok fazla veriyi chart'a göndermek istiyorsanız o zaman durum değişecektir. Ben örnek olsun diye aşağıda random olarak listesini oluşturduğum 1000 tane double türünde sayıyı X eksenine, 1000 tane double türünde sayıyı da Y eksenine gönderdim:

        List<KeyValuePair<double, double>> series = new List<KeyValuePair<double, double>>();

            Random random = new Random();

            Random random1 = new Random();

            for (int i = 0; i < 1000; i+=1)

            {

                double sayi = random.Next(1, 500);

                double sayi1 = random1.Next(1, 500);

              

                series.Add(new KeyValuePair<double, double>(sayi,sayi1));

            }

            BenimChartım.DataContext = series;

İlk yazdığım C# kodundan farklı olarak KeyValuePair türünde bir liste oluşturdum ve bunun elemanlarını doldurduktan sonra, xaml'de oluşturduğum chart'ın DataContext'ine atadım. İşte bu kadar, basit bir linechart çizebilecek duruma geldiniz.

Umarım yararlı olmuştur.