Диаграммы с областями в WPF
Автор: Махеш Чанд (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. xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows. xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly= Теперь на странице можно видеть DVC, и если его выбрать, то появится уведомление, что все элементы, связанные с построением диаграмм, добавлены в Intellisense. Чтобы добавить на страницу элемент управления Chart, достаточно выбрать его из списка. Список элементов, связанных с построением диаграмм, выглядит, как показано на рисунке 4. Рисунок 4 Создание диаграммы Элемент Chart представляет элемент управления Chart WPF в XAML. < DVC:Chart></DVC:Chart> Фрагмент кода, приведенный в листинге 1, создает элемент Chart и устанавливает его свойства ширины, высоты и фона. Свойства Title и LegendTitle представляют заголовок диаграммы и заголовок легенды.
Листинг 1 Результат кода, приведенного в листинге 1, показан на рисунке 5. Рисунок 5 Типы диаграмм Для создания типа диаграммы используется атрибут Series элемента Chart. Если посмотреть на рисунок 6, можно заметить атрибуты BarSeries, ColumnSeries, LineSeries, PieSeries, AreaSeries и ScatterSeries, и на основе этих атрибутов будут создаваться диаграммы. Рисунок 6 Диаграмма с областями Фрагмент кода, показанный в листинге 2, создает диаграмму с областями путем установки атрибута Chart.Series в AreaSeries. Как можно видеть, привязка возникает в полях Key и Value источника данных.
Листинг 2 Фрагмент кода, показанный в листинге 3, создает коллекцию в форме KeyValuePair и устанавливает свойство ItemsSource атрибута Series диаграммы. Те же данные можно использовать для других типов диаграмм.
Листинг 3 Результат показан на рисунке 7. Рисунок 7 Оси диаграммы Свойство Axes элемента Chart используется для добавления в диаграмму осей x и y. Фрагмент кода, приведенный в листинге 4, добавляет в диаграмму линейную ось со свойствами ориентации, заголовка, шрифта и другими.
Листинг 4 Новый результат показан на рисунке 8, где можно видеть заголовок с левой стороны диаграммы и форматирование. Рисунок 8 Создание диаграммы с областями из коллекции Теперь приступим к созданию линейчатой диаграммы из коллекции. У меня есть класс Fruit, показанный в листинге 5. В нем имеется два элемента, Name и Share.
Листинг 5 В листинге 6 показан класс коллекции Fruit, который добавляет некоторые объекты Fruit в конструктор.
Листинг 6 Теперь в нашем коде XAML я создаю ресурс с именем FruitCollection и привязываю его к AreaSeries с помощью свойства ItemsSource, как показано в листинге 7.
Листинг 7 Код XAML для привязки FruitCollection к AreaSeries приведен в листинге 8.
Листинг 8 Теперь просто построим и выполним проект. Новый результат показан на рисунке 8. Рисунок 8 Выводы В этом руководстве рассматривалось использование набора средств WPF для создания диаграммы с областями. |