Тестовые данные в SketchFlow

Сегодня поговорим о том, как в SketchFlow проекте показать тестовые данные.
Пусть необходим список сотрудников, при клике на конкретном сотруднике открывается более подробная информация.


Что то вроде вот такого:

Для этого проведем небольшую подготовительную работу: Подготовим 5-6 аватарок и сохраним их в папку Документы\Аватары.

Теперь собственно к тестовым данным.
1. Создаем пустой проект SketchFlow.
2. Выбираем вкладку Data:

3. Кликаем на Add sample data source и выбираем как показано на рисунке:

4. Задаем параметры набора данных:

  

5. Настраиваем поля нашего набора не забывая указывать правильные типы

 

 6. Отдельно настраиваем Фото, указав путь к папке с аватарками:

7.  Выбираем Фамилию, Имя и Должность и перетаскиваем их в рабочую область. Получется нечто:

8. Единственно, элементы нашей записи собраны в StackPanel причем с вертикальной ориентацией. Поэтому в контекстном меню компонента выбираем:

9. Настраиваем способ отображения элементов, я например сделал так:

      <DataTemplate x:Key="ItemTemplate9">
        <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100"></ColumnDefinition>
          <ColumnDefinition Width="100"></ColumnDefinition>
          <ColumnDefinition Width="100"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Rectangle Stroke="Black" StrokeThickness="1" />
        <TextBlock Text="{Binding Должность}"/>         
        <Rectangle Stroke="Black" StrokeThickness="1" Grid.Column="1" />
        <TextBlock Text="{Binding Имя}" Grid.Column="1"/>         
        <Rectangle Stroke="Black" StrokeThickness="1" Grid.Column="2" />
        <TextBlock Text="{Binding Фамилия}" Grid.Column="2"/>                 
        </Grid>
      </DataTemplate>

* This source code was highlighted with Source Code Highlighter.

10. Получаем что-то похожее:

11. Осталось разместить фото, должность и краткое инфо о выбранном сотруднике. Для этого размещаем на форме (в правой части Image и два TextBox-а).

12. В панели Data переключаем режим в Detail Mode

13.Чтобы при изменении выбранного в списке элемента происходило изменение фото, должности и описания, необходимо объединить их например в Grid (через контекстное меню Group Intro -> Grid).  И для этого Grid-а установить свойство DataContext (для этого необходимо выбрав элемент перейти во вкладку Property и установить DataContext в Data Binding

Для открытия приведенного меню необходимо кликнуть на маленьком квадратике.

14. В открывшемся окне выбираем ListBox и его свойство SelectedItem, не забыв направление задать в две стороны:

После чего перетягиваем соответствующие поля (из вкладки Data) на визуальные элементы Фото на Image и т.д. 

15. Запускам:

 

Вот, собственно, и все.