Посетитель сайта Михаил (ignatyuk71@gmail.com) прислал свою работу, за что большое спасибо ему. Он решил поделиться опытом создания красивых графических графиков на WPF. Архив проекта график на WPF
WPF Toolkit дозволяє легко и просто створювати гарні графіки,наприклад:
І багато інших графіків…
Скачайте і встановіть WPF Toolkit за посиланням http://wpf.codeplex.com/releases/view/40535
(у папці WpfApplication1\WpfApplication1\WPF35). Щоб можна було його використати, треба додати на нього посилання, для цього в Solution Explorer клацніть правою кнопкою миші по пункту посилання і виберіть додаток посилань. У вікні перейдіть на вкладку .NET, оберіть пункт WPF Toolkit і натисніть ок. Додайте також силку System.Windows.Controls.DataVisualization.Toolkit.
Выкно для графіка WPF
У вікні крім графіка буде ще знаходитися кнопка яка буде задавати нові параметри графіку (метод Random)
<Window x:Class="WpfApplication1.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="MainWindow" Height="453" Width="632">
<Grid Height="400" Width="590">
<Grid.RowDefinitions>
<RowDefinition Height="369*" />
<RowDefinition Height="45*" />
</Grid.RowDefinitions>
<charting:Chart Name="Charts" Margin="3" Grid.RowSpan="2">
<charting:LineSeries Name="ChartOne" DependentValuePath="Value"
IndependentValuePath="Time" Title="Chart One"/>
<charting:Chart.Axes>
<charting:LinearAxis Orientation="Y" Minimum="0"
Maximum="50" Title="value" />
<charting:DateTimeAxis Orientation="X"
Title="Time" ShowGridLines="True" />
</charting:Chart.Axes>
</charting:Chart>
<Button Content="Button" Height="21"
HorizontalAlignment="Left" Margin="25,18,0,0"
Name="button1" VerticalAlignment="Top" Width="533" Grid.Row="1"
Click="button1_Click" />
</Grid>
</Window>
Зверніть увагу на видалену строку ми оголошуємо пространство імен charting, в котрому містяться класи для малювання графіків
Код для графика WPF
Графік у нас буде показувати, як зміняться деяка величина в часі. Точка на графіку буде представлятися класом ToolkPoint, в якому дві властивості – Value типу int и Time типа DateTime.
public class ToolkPoint
{
public int Value{get;set;}
public DateTime Time { get; set; }
}
Самі дані для графіка будуть зберігатися в спискутипу Lisе під назвою Chardata
public List Chardata;
Додамо до властивостей свойства CurTime типа DateTime и свойство Read типа Random , вони послужить як допоміжні властивості при додаванні графіків
private Random Read;
private DateTime CurTime;
Додамо в собитія кнопки Clik ініціалізацію даних для графіка. Після List задаємо властивості itemsSource:
ChartOne.ItemsSource = Chardata;
private void button1_Click(object sender, RoutedEventArgs e)
{
Read = new Random();
Chardata = new List<ToolkPoint>()
{
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(10) },
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(20) },
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(30) },
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(40) },
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(50) },
new ToolkPoint { Value = Read.Next(5,47), Time = CurTime + TimeSpan.FromSeconds(60) }
};
ChartOne.ItemsSource = Chardata;
}
Графика WPF
Отже, дані для графіка у нас є, залишається сама малість – власне графік. Створюємо в графіку новий об’єкт LineSeries під ім'ям ChartOne
<charting:LineSeries Name="ChartOne" DependentValuePath="Value"
IndependentValuePath="Time" Title="Chart One"/>
Замість LineSeries можна записувати і інші об’єкти наприклад:
- AreaSeries
- BarSeries
- BubbleSeries
- ColumnSeries
- PieSeries
та багато інших ...
Було б краще, якщо навколо мінімальної і максимальної точки графіка було троги вільного простору, для задамо осі графіка:
<charting:Chart.Axes>
<charting:LinearAxis Orientation="Y" Minimum="0" Maximum="50" Title="value" />
<charting:DateTimeAxis Orientation="X" Title="Time" ShowGridLines="True" />
</charting:Chart.Axes>
Тепер компілюємо і запускємо програму і ми отримуємо такий результат
Тоді ми натискаємо на кнопку і у нас вибиває графік. Під час натискання кнопки у нас буде завжди міняться сам графік бо ми задаємо координати Value- Random число від 5-48;
