Примеры данных в интерфейсе конструктора и для создания прототипов

Маловероятно или нежелательно (возможно, по соображениям конфиденциальности или производительности), чтобы ваше приложение отображало актуальные данные в рабочей области разработки в Microsoft Visual Studio или Blend для Visual Studio. Для заполнения элементов управления данными (чтобы вы могли работать с макетом приложения, шаблонами и другими визуальными свойствами), существуют различные способы использования примеров данных во время разработки. Примерные данные также могут быть очень полезными и экономящими время, если вы создаете эскизное приложение или прототип. Примеры данных можно использовать в эскизе или прототипе во время выполнения, чтобы иллюстрировать свои идеи, не подключаясь к реальным, динамическим данным.

Примеры приложений, демонстрирующих {Binding}

• Скачайте приложение Bookstore1.
• Скачайте приложение Bookstore2.

Настройка DataContext в разметке

Это довольно распространенная практика разработчика использовать императивный код (в коде позади), чтобы задать элемента управления пользователем DataContext для экземпляра модели представления.

public MainPage()
{
    InitializeComponent();
    this.DataContext = new BookstoreViewModel();
}

Но если вы сделаете это, ваша страница не будет так легко оформляться, как могла бы. Причина заключается в том, что при открытии страницы XAML в Visual Studio или Blend для Visual Studio императивный код, который назначает значение DataContext никогда не выполняется (на самом деле ни один из кодовых компонентов не выполняется). Средства XAML, конечно, анализируют вашу разметку и создают экземпляры объявленных в ней объектов, но на самом деле не создают экземпляр самого типа страницы. Результатом является то, что вы не увидите никаких данных в элементах управления или в диалоговом окне Создание привязки данных, и ваша страница станет сложнее для оформления и размещения.

Первое, что нужно сделать, это закомментировать назначение DataContext и задать DataContext в разметке вашей страницы. Таким образом, динамические данные отображаются во время разработки, а также во время выполнения. Для этого откройте страницу XAML. Затем в окне Обзор документа щелкните корневой элемент дизайна (обычно с меткой [Страница]), чтобы выбрать его. В окне "Свойства" найдите свойство DataContext (внутри общей категории) и измените его. Выберите тип модели представления в диалоговом окне Выбор объекта и нажмите кнопку ОК.

Вот как выглядит результирующая разметка.

<Page ... >
    <Page.DataContext>
        <local:BookstoreViewModel/>
    </Page.DataContext>

Итак, вот как выглядит поверхность проектирования теперь, когда ваши привязки разрешаются. Обратите внимание, что средство выбора пути в диалоговом окне создания привязки данных теперь заполняется на основе типа DataContext и свойств, к которым можно привязаться.

В диалоговом окне Создание привязки данных требуется только тип для работы, однако для привязок необходимо установить значения свойств. Если вы не хотите обращаться к облачной службе во время разработки (из-за производительности, оплаты за передачу данных, проблемы конфиденциальности, такие проблемы), то код инициализации может проверить, работает ли ваше приложение в средстве разработки (например, Visual Studio или Blend для Visual Studio) и в этом случае загрузите образец данных для использования только во время разработки.

if (Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
    // Load design-time books.
}
else
{
    // Load books from a cloud service.
}

Если вам нужно передать параметры в код инициализации, можно использовать локатор модели представления. Указатель модели представления — это класс, который можно поместить в ресурсы приложения. У него есть свойство, которое возвращает модель представления, и DataContext страницы привязывается к этому свойству. Другой шаблон, который может использовать локатор или модель представления, — это внедрение зависимостей, которое может создавать поставщика данных для разработки или выполнения (каждый из которых реализует общий интерфейс) в зависимости от необходимости.

Примеры данных из класса и атрибуты времени разработки

Если по какой-либо причине ни один из вариантов в предыдущем разделе не работает, вы по-прежнему имеете много вариантов данных во время разработки, доступных с помощью функций инструментов XAML и атрибутов времени разработки. Одним из хороших вариантов является функция Создать пример данных из класса в Blend для Visual Studio. Эту команду можно найти на одной из кнопок в верхней части панели данных.

Все, что необходимо сделать, — указать класс для используемой команды. Затем команда выполняет две важные задачи. Во-первых, он создает XAML-файл, содержащий пример данных, подходящих для инициализации экземпляра выбранного класса и всех его членов, рекурсивно (на самом деле программный инструмент работает одинаково эффективно как с XAML, так и с JSON файлами). Во-вторых, он заполняет панель данных схемой выбранного класса. Затем можно перетащить элементы из панели данных на область конструктора для выполнения различных задач. В зависимости от того, что вы перетаскиваете и где вы это отпускаете, можно добавить привязки к существующим элементам управления (с помощью {Binding}), или создать новые элементы управления и одновременно привязать их. В любом случае операция также задает контекст данных во время разработки (d:DataContext) для вас (если он еще не задан) в корне макета страницы. Этот контекст данных во время разработки использует атрибут d:DesignData для получения своих примеров данных из созданного ФАЙЛА XAML (который, кстати, вы можете найти в проекте и изменить, чтобы он содержал нужные данные).

<Page ...
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid ... d:DataContext="{d:DesignData /SampleData/RecordingViewModelSampleData.xaml}"/>
        <ListView ItemsSource="{Binding Recordings}" ... />
        ...
    </Grid>
</Page>

Различные объявления xmlns означают, что атрибуты с префиксом d: интерпретируются только на этапе разработки и игнорируются при выполнении. Поэтому атрибут d:DataContext влияет только на значение свойства DataContext во время разработки; Он не действует во время выполнения. В разметке можно даже задать и d:DataContext, и DataContext. d:DataContext переопределяется во время разработки, а DataContext переопределяется во время выполнения. Эти же правила переопределения применяются ко всем атрибутам времени разработки и времени выполнения.

Атрибут d:DataContext и все остальные атрибуты времени разработки описаны в разделе атрибутовDesign-Time , который по-прежнему действителен для приложений универсальной платформы Windows (UWP).

CollectionViewSource не имеет свойства DataContext , но имеет свойство Source . Следовательно, существует свойство d:Source, которое можно использовать для задания образцовых данных, предназначенных только для времени разработки, в CollectionViewSource.

    <Page.Resources>
        <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
            d:Source="{d:DesignData /SampleData/RecordingsSampleData.xaml}"/>
    </Page.Resources>

    ...

        <ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}" ... />
    ...

Для этого у вас будет класс с именем Recordings : ObservableCollection<Recording>, и вы измените файл примера данных XAML, чтобы он содержал только объект записи (с объектами записи внутри), как показано здесь.

<Quickstart:Recordings xmlns:Quickstart="using:Quickstart">
    <Quickstart:Recording ArtistName="Mollis massa" CompositionName="Cubilia metus"
        OneLineSummary="Morbi adipiscing sed" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Vulputate nunc" CompositionName="Parturient vestibulum"
        OneLineSummary="Dapibus praesent netus amet vestibulum" ReleaseDateTime="01/01/1800 15:53:17"/>
    <Quickstart:Recording ArtistName="Phasellus accumsan" CompositionName="Sit bibendum"
        OneLineSummary="Vestibulum egestas montes dictumst" ReleaseDateTime="01/01/1800 15:53:17"/>
</Quickstart:Recordings>

Если вы используете пример файла данных JSON вместо XAML, необходимо задать свойство Type .

    d:Source="{d:DesignData /SampleData/RecordingsSampleData.json, Type=local:Recordings}"

До сих пор мы использовали d:DesignData для загрузки примеров данных во время разработки из XAML или JSON-файла. Альтернативой тому является расширение разметки d:DesignInstance, указывающее, что источник времени разработки основан на классе, указанном свойством типа . Вот пример.

    <CollectionViewSource x:Name="RecordingsCollection" Source="{Binding Recordings}"
        d:Source="{d:DesignInstance Type=local:Recordings, IsDesignTimeCreatable=True}"/>

Свойство IsDesignTimeCreatable указывает, что средство разработки должно фактически создать экземпляр класса, который подразумевает, что класс имеет открытый конструктор по умолчанию, и что он заполняется данными (реальными или примерами). Если вы не зададите IsDesignTimeCreatable (или если установите его в False), тогда не будет отображаться пример данных на дизайнерской поверхности. Всё, что делает средство проектирования в этом случае, это анализирует класс, чтобы найти его привязываемые свойства и отобразить их на панели данных и в диалоговом окне создания привязки данных .

Примеры данных для прототипирования

Для создания прототипов требуется выборка данных как во время разработки, так и во время выполнения. В этом случае Blend для Visual Studio имеет функцию new sample Data. Эту команду можно найти на одной из кнопок в верхней части панели данных.

Вместо указания класса можно на самом деле разработать схему примера источника данных прямо на панели данных . Вы также можете изменить примеры значений данных на панели данных : не нужно открывать и изменять файл (хотя это можно сделать, если вы предпочитаете).

Функция новые примеры данных использует DataContext, а не d:DataContext, чтобы при запуске эскиза или прототипа были доступны примеры данных, а также во время разработки. И панель данных действительно ускоряет проектирование и выполнение задач по связыванию. Например, просто перетаскивание свойства коллекции из панели данных в область конструктора создает элемент управления с привязкой к данным и необходимые шаблоны, готовые к сборке и запуску.