Автор: Махеш Чанд (Mahesh Chand) 

В этой статье показывается, как рисовать гистограммы с помощью WPF и C#.

Гистограммы в WPF

Набор средств WPF, выпущенный в июне 2009 года, поставляется со сборкой визуализации данных с именем System.Windows.Controls.DataVisualization.Toolkit.dll, в которой размещается функциональность для построения диаграмм в WPF. В этой статье показывается, как рисовать гистограммы с помощью набора средств WPF.

Примечание. Эта статья написана с использованием набора средств WPF, выпущенного в июне 2009 года, который можно загрузить здесь: Набор средств WPF - выпуск: набор средств WPF июнь 2009 г. Этот набор средств может стать частью WPF в ближайшем будущем.

Добавление ссылки на набор средств WPF

Прежде чем использовать в приложении WPF какую-либо функциональность, связанную с созданием диаграмм, необходимо загрузить набор средств WPF. Затем следует добавить ссылку на сборку.

Чтобы добавить ссылку, щелкните правой кнопкой мыши папку References проекта в обозревателе решений и выберите в меню пункт "Add Reference" ("Добавить ссылку"). Откроется диалоговое окно "Add Reference" ("Добавление ссылки"), которое можно видеть на рисунке 1. В этом диалоговом окне выберите вкладку "Browse" ("Обзор") и перейдите к сборке System.Windows.Controls.DataVisualization.Toolkit.dll из папки, в которой установлен набор средств WPF. Эта сборка находится в папке Binaries.  

Совет. Если нежелательно загружать набор средств WPF, то можно загрузить присоединенный проект, скопировать сборки WPFToolkit.dll и System.Windows.Controls.DataVisualization.Toolkit.dll из этого проекта в папку bin вашего проекта и добавить ссылку.

Рисунок 1

После добавления ссылки в разделе References диалогового окна появится элемент System.Windows.Controls.DataVisualization.Toolkit, как показано на рисунке 2.

Рисунок 2

На следующем этапе необходимо выполнить импорт пространств имен System.Windows.Controls.DataVisualization.toolkit и System.Windows.Controls.DataVisualization.Charting на страницу. После ввода на странице "xmlns=" эти пространства имен буду показаны в Intellisense. Выберите и добавьте оба эти пространства имен на страницу, как показано на рисунке 3.

Рисунок 3

Последняя ссылка, добавленная на страницу, выглядит следующим образом. Как можно видеть, я добавил имя этой ссылки в ToolkitRef.

Теперь на странице можно видеть DVC, и если его выбрать, то появится уведомление, что все элементы, связанные с построением диаграмм, добавлены в Intellisense. Чтобы добавить на страницу элемент управления Chart, достаточно выбрать его из списка. Список элементов, связанных с построением диаграмм, выглядит, как показано на рисунке 4.

Рисунок 4

Создание диаграммы

Элемент Chart представляет элемент управления Chart WPF в XAML.

< DVC:Chart></DVC:Chart>

Фрагмент кода, приведенный в листинге 1, создает элемент Chart и устанавливает его свойства ширины, высоты и фона. Свойства Title и LegendTitle представляют заголовок диаграммы и заголовок легенды.

<DVC:Chart Name="mcChart"
           Width="400" Height="250"
           Background="YellowGreen"
                   Foreground="DarkBlue"
                   Title="Area Chart"
                   LegendTitle="Month Rating" />

Листинг 1

Результат кода, приведенного в листинге 1, показан на рисунке 5.

Рисунок 5

Типы диаграмм

Для создания типа диаграммы используется атрибут Series элемента Chart. Если посмотреть на рисунок 6, можно заметить атрибуты BarSeries, ColumnSeries, LineSeries, PieSeries, AreaSeries и ScatterSeries, и на основе этих атрибутов будут создаваться диаграммы.

Рисунок 6

Гистограмма

Фрагмент кода, показанный в листинге 2, создает гистограмму путем установки атрибута Chart.Series в ColumnSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.

<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart"
   Width="400" Height="250"
   Background="LightSteelBlue">
 
    <DVC:Chart.Series>
        <DVC:ColumnSeries Title="Experience"
            IndependentValueBinding="{Binding Path=Key}"
            DependentValueBinding="{Binding Path=Value}">
        </DVC:ColumnSeries>
    </DVC:Chart.Series>
</DVC:Chart>

Листинг 2

Фрагмент кода, показанный в листинге 3, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.

private void LoadColumnChartData()

{

((ColumnSeries)mcChart.Series[0]).ItemsSource =

    new KeyValuePair<string, int>[]{

        new KeyValuePair<string, int>("Project Manager", 12),

        new KeyValuePair<string, int>("CEO", 25),

        new KeyValuePair<string, int>("Software Engg.", 5),

        new KeyValuePair<string, int>("Team Leader", 6),

        new KeyValuePair<string, int>("Project Leader", 10),

        new KeyValuePair<string, int>("Developer", 4) };

}

Листинг 3

Результат этого кода будет выглядеть аналогично показанному на рисунке 7.

Рисунок 7

Выводы

В этом руководстве рассматривалось использование набора средств WPF для создания гистограммы в WPF и C#.