Визуализируем данные в приложении LightSwitch.

У топ-менеджеров как правило нет ни времени, ни желания работать с данными. Да и не царское это дело. Им необходима информация - то, что они способны понять. Разумеется, в объеме их понимания поставленных задач.
В этой статье я попробую превратить данные в информацию путем создания интерактивной диаграммы в приложении LightSwitch используя SilverLight 4 Toolkit. Изложение подробное, в картинках. Вопрос нетривиален.
Ladies and gentlemen, let's get ready to rumble :).

Запускаем Visual Studio 2010, создаем проект LightSwitch, назовем его MyChart. В качестве источника данных используем всем известную базу данных Northwind.
Открываем обозреватель решений, добавляем источник данных.

Выбираем "База данных".

В свойствах подключения выбираем имя сервера. Я использовал MS SQL SERVER 2008 Express.
Проверяем подключение и выбираем из списка базу данных Northwind.

В списке объектов выберем таблицу Products.

В результате мы получили сущность по имени ProductsItem.
Создадим запрос для выбора первых десяти продуктов - для нашей диаграммы их будет достаточно.
Нажимаем иконку создания запроса в верхней части экрана.

Назовем запрос Top10Products и добавим фильтр.

Добавляем экран поиска данных на основе нашего запроса.

Создание экрана поиска данных завершено. Назовем его SearchTop10Products.

Добавим в наше решение новый проект - библиотеку классов SilverLight и назовем ее PieChart.
Удалим созданный по умолчанию файл Class1.vb, добавим пользовательский элемент управления SilverLight и назовем его PieChartControl.

Далее необходимо добавить ссылку на библиотеку System.Windows.Controls.Toolkit.dll, которая находится в каталоге установки SilverLight 4 Toolkit.

В панели элементов должны появиться новые элементы управления. Нас интересуют Chart и PieSeries.
Разместим на форме PieChartControl.xaml элемент Chart. Удалим свойства макета диаграммы и ColumnSeries, созданные по умолчанию.
Изменим заголовок контейнера Chart и добавим в коллекцию Series элемент PieSeries.

Свойства элемента PieSeries в XAML-коде:

- ItemsSource - привязывает элемент управления к коллекции сущностей экрана
- IndependentValueBinding - свойство сущности, отраженное в диаграмме по оси X
- DependentValueBinding - свойство сущности, отраженное в диаграмме по оси Y

Компилируем библиотеку. Открываем конструктор экрана SearchTop10Products и создаем пользовательский элемент управления.

Добавим ссылку на проект PieChart.

Выберем PieChartControl и добавим его на экран.

Начинаем отладку...

Манагерам подобная картинка сможет донести гораздо больше информации, чем таблицы. Правда до заявленного выше интерактива нам еще далеко.
Спустя некоторое время у пользователя непременно возникнет желание манипулировать данными, отраженными в диаграмме, и мы с вами подготовимся к такому повороту событий :). Для примера реализуем редактирование элемента списка в диалоговом окне.
Открываем PieChartControl.xaml, изменяем размер элемента Chart - на мой взгляд наш пирог выглядит слишком скромно. Добавим еще пару свойств элементу PieSeries:
- IsSelectionEnabled="True" - разрешает выбор элемента
- SelectionChanged="PieSeries1_SelectionChanged" - добавляет обработку события выбора элемента
В итоге наш XAML-код выглядит следующим образом:

Открываем обозреватель решений и для проекта MyChart выбираем вид "Представление файлов".

Добавим в проект Common каталог UserCode, в который, в свою очередь, добавим класс и назовем его UserInterface.

Пишем нехитрый код интерфейса.

Перейдем к конструктору MyChart и добавим код для этого экрана.

В коде экрана реализуем созданный в проекте Common интерфейс IUserInterface.

Вернемся к обозревателю решений и добавим в проект PieChart ссылки на библиотеки Microsoft.LightSwitch.dll и Microsoft.LightSwitch.Client.dll, которые находятся в каталоге установки Visual Studio LightSwitch, а также на проект Common.

Наконец, переходим к PieChartControl.xaml, выбираем элемент PieSeries.
В окне свойств выберем вкладку "События", после чего перейдем к коду обработчика события PieSeries1_SelectionChanged.

Запускаем, щелкаем мышью в область диаграммы...

Топы довольны, внушительная премия, Рио де Жанейро, белые парусиновые штаны, креолки и мулатки... :)