Visual studio создание шаблона элемента
Обновлено: 07.07.2024
В этом модуле вы изучите структуру проекта Windows -приложения на базе JavaScript. Вы ознакомитесь с инструментами, применяемыми для создания WinRT-приложений, узнаете об особенностях шаблонов и создадите первое простое приложение .
Подготовка
В этом модуле вам не понадобится никаких заранее подготовленных файлов.
Visual Studio
Visual Studio – это основной инструмент, который вы будете использовать для написания кода на JavaScript, отладки и настройки приложений для Магазина Windows . Visual Studio имеет несколько ключевых возможностей, которыми вы будете пользоваться:
- Visual Studio предоставляет четкие и понятные редакторы кода и HTML с системой IntelliSense;
- в Visual Studio есть возможность отлаживать код, используя точки останова, и также возможен просмотр контрольных значений (Watches) для отладки нештатных ситуаций в процессе исполнения кода;
- мы можем применять редакторманифеста (описания) приложения (Application Manifest Editor) для установки некоторых свойств приложения, таких, как безопасность, ориентация устройства, иконки и настройки Магазина Windows.
Шаблоны в Visual Studio
Visual Studio по умолчанию включает в себя несколько шаблонов, которые представляют собой основу для приложений, выполненных по принципам нового дизайна для Windows . Вы можете найти эти шаблоны в меню Файл /Создать проект (File> New > Project ), выбрав в левой панели пункт "JavaScript".
Пустое приложение
Шаблон пустого приложения (Blank App) идеально подходят для создания приложений "с нуля" с уникальным пользовательским интерфейсом.
Тип: JavaScript. Одностраничный проект приложения для Магазина Windows, который не содержит предопределенные элементы управления и макет
Приложение таблицы
Этот шаблон на основе сетки (Grid App) позволяет просматривать иерархические данные в трех видах: Узлы, Разделы и Сведения. Пользователи могут легко заходить в группы и изучать данные в различном виде. Это идеальный шаблон для любых сгруппированных данных.
Тип: JavaScript. Трехстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группами элементов, расположенных в сетке. Сведения о группах и элементах отображаются на выделенных страницах
Приложение с разделением
Шаблон Приложение с разделением (Split App) похож на шаблон Приложение таблицы, с той разницей, что на одной "разделенной" странице отображается и список групп, и сведения для выбранной группы. Этот шаблон позволяет быстро просматривать несколько страниц сведений в группе без необходимости дальнейшей навигации.
Тип: JavaScript. Двухстраничный проект приложения для Магазина Windows, которое осуществляет переходы между группированными элементами. Первая страница позволяет выбрать группу, а вторая отображает список элементов вместе со сведениями о выбранном элементе
Приложение с фиксированным макетом
Шаблон приложения с фиксированным макетом (Fixed Layout App) похож на шаблон пустого приложения, но способен масштабировать содержимое под размер экрана устройства. Например, если ваш дизайн разработан под экран 800 х 600 пикселей, а у пользователя устройство с разрешением 1600 х 900, то этот шаблон автоматически масштабирует содержимое под разрешение 1600 х 900.
Этот шаблон идеален для игр.
Тип: JavaScript. Проект приложения для Магазина Windows, которое масштабируется с использованием макета с фиксированными пропорциями
Приложение навигации
Тип: JavaScript. Проект приложения для Магазина Windows, которое содержит предопределенные элементы управления для навигации
Для более подробного описания шаблонов для JavaScript воспользуйтесь ресурсом:
Пакет SDK для Visual Studio включает шаблоны проектов, которые создают пользовательский шаблон проекта и пользовательский шаблон элемента. Эти шаблоны включают некоторые общие подстановки параметров и создаются в виде ZIP-файлов. Они не развертываются автоматически и недоступны в экспериментальном экземпляре. Необходимо скопировать созданный ZIP-файл в каталог пользовательских шаблонов.
Шаблоны для создания шаблонов позволяют включать шаблоны в более крупные расширения. Это позволяет реализовать управление версиями в исходных файлах и создать группу проектов шаблонов в одном пакете VSIX.
Кроме того, можно настроить шаблон для установки пакетов NuGet. Дополнительные сведения см. в статье Пакеты NuGet в шаблонах Visual Studio.
Для основных сценариев создания шаблонов следует использовать мастер экспорта шаблонов, который сохраняет выходные данные в сжатом файле. Дополнительные сведения о создании базовых шаблонов см. в статье Создание шаблонов проектов и элементов.
Начиная с Visual Studio 2017 проверка наличия пользовательских шаблонов проектов и элементов больше не будет выполняться. Вместо этого расширение должно предоставлять файлы манифеста шаблона, в которых указано расположение установки этих шаблонов. Для обновления расширений VSIX можно использовать Visual Studio 2017. При развертывании расширения с помощью MSI необходимо создать файлы манифеста шаблона вручную. Дополнительные сведения см. в статье Обновление пользовательских шаблонов проектов и элементов для Visual Studio 2017. Схема манифеста шаблона описана в Справочнике по схемам манифестов шаблонов Visual Studio.
Создание шаблона проекта
Шаблон создает файл класса, значок, файл .vstemplate, редактируемый файл проекта с именем ProjectTemplate.vbproj или ProjectTemplate.csproj, а также некоторые файлы, которые обычно создаются в других типах проектов, такие как файл resources.resx, файл AssemblyInfo и файл .settings. Каждый файл кода содержит общие подстановки параметров, если это необходимо.
Добавьте и удалите элементы в проекте в соответствии с требованиями проекта. Не удаляйте редактируемый файл проекта, файл AssemblyInfo и файл .vstemplate.
Обновите файл .vstemplate, чтобы в нем была отражена информация о добавленных и удаленных элементах проекта. Элемент Project должен содержать элемент ProjectItem для каждого файла, который будет включен в шаблон.
Измените файлы кода и другое содержимое, доступное для пользователя, и добавьте соответствующие подстановки параметров.
Измените созданное содержимое в соответствии со своими потребностями.
Выполните построение проекта.
Visual Studio создает файл ZIP, содержащий шаблон. Он не развертывается и недоступен в экспериментальном экземпляре.
Создание шаблона элемента
Создайте проект Item Template.
Шаблон создает файл класса, значок, файл .vstemplate и файл AssemblyInfo. Файл класса содержит некоторые общие подстановки параметров.
Добавьте и удалите элементы в проекте в соответствии с требованиями проекта.
Обновите файл .vstemplate, чтобы в нем была отражена информация о добавленных и удаленных элементах проекта. Элемент Project должен содержать элемент ProjectItem для каждого файла, который будет включен в шаблон.
Измените файлы кода и другое содержимое, доступное для пользователя, и добавьте соответствующие подстановки параметров.
Измените созданное содержимое в соответствии со своими потребностями.
Выполните построение проекта.
Visual Studio создает сжатый файл, содержащий шаблон. Он не развертывается и недоступен в экспериментальном экземпляре.
Развертывание
Развертывание шаблона проекта или элемента
Создайте проект VSIX. Дополнительные сведения см. в разделе Шаблон проекта VSIX.
Задайте проект VSIX в качестве запускаемого проекта. В Обозревателе решений выберите узел проекта VSIX, щелкните его правой кнопкой мыши и выберите пункт Назначить запускаемым проектом.
Задайте проект для шаблона проекта (Project Template) в качестве ресурса для проекта VSIX. Откройте файл .vsixmanifest. Перейдите на вкладку Ресурсы и выберите Создать.
В поле Тип задайте значение Microsoft.VisualStudio.ProjectTemplate или Microsoft.VisualStudio.ItemTemplate.
В поле "Источник" выберите Проект в текущем решении, а затем проект, содержащий шаблон.
Нажмите клавишу F5, чтобы собрать решение. Откроется экспериментальный экземпляр.
Поговорим о том, как сделать шаблон самостоятельно.
Шаг первый. Создаем проект
Создаем новый проект: File -> New -> Project и выбираем там Windows Forms Application. Называем проект "MyWindowsFormsTemplate".
Шаг второй. Модификация проекта
Модифицируем проект как нам нужно. Я, например, добавил кнопку с текстом "Hello, World!" на форму.
Шаг 3. Сохраняем проект в виде шаблона
Для того, чтобы сохранять проект в виде шаблона, идем File -> Export Template.
На первой форме выбираем какой тип шаблона нам необходим: шаблон проекта (project) или шаблон файла (item) и в списке выбираем какой проект станет шаблонным.
Шаг 4. Настройки шаблона
Выбираем файл иконки, описание, название шаблона.
Я оставил иконку по умолчанию, название изменил на "My Windows Forms Template", а описание на "My Windows Forms Template Description".
Нажимаем кнопку Finish.
После того, как мы нажмем кнопку Finish файл шаблона в формате zip появится в папках
Documents and Settings\ \Мои документы\Visual Studio 2008\My Exported Templates\
Documents and Settings\ \Мои документы\Visual Studio 2008\Templates\ProjectTemplates\
Как студия знает, в какую вкладку вставлять шаблон? Очень просто. В zip файле создается XML файл MyTemplate.vstemplate с указанием всех настроек шаблона:
My Windows Forms Template
My Windows Forms Template Description
Недавно разработанное диалоговое окно New Project для Visual Studio 2019 было создано, чтобы помочь разработчикам быстрее добираться до своего кода. Используя опыт поиска и фильтрации, мы стремимся обеспечить лучшее обнаружение для конкретных шаблонов, чтобы вы могли быстрее начать разработку своего приложения.
В этом пошаговом руководстве вы научитесь:
- Созданию шаблона проекта
- Добавлению тегов или фильтров в шаблон проекта
- Развертыванию шаблона в качестве расширения с шаблоном VSIX project
Перед началом работы, пожалуйста, убедитесь, что у вас установлена Visual Studio 2019 с Visual Studio SDK.
Создание шаблона проекта
Добавление тегов/фильтров в шаблон вашего проекта
После того как вы создали шаблон проекта, можно добавить к нему тег или фильтры в шаблоне .vstemplate XML-файла.
-
Добавьте встроенные теги Visual Studio, а также любые пользовательские теги в шаблон проекта, используя элементы LanguageTag, PlatformTag, ProjectTypeTagв разделе TemplateDataи сохраните файл. Например, как выделено на скриншоте ниже:
Развертывание шаблона в качестве расширения с помощью шаблона VSIX project
Оберните шаблон проекта в шаблон VSIX project, чтобы развернуть его как расширение.
В Solution Explorer щелкните правой кнопкой мыши на VSIX project и выберите Set as StartUp Project. Ваш Solution Explorer должен теперь выглядеть примерно так (с выделенным жирным VSIX project):
- Кликните Assets и выберите New.
- Установите поле Type как Microsoft.VisualStudio.ProjectTemplate.
- Установите поле Source как A project in current solution.
- Установите поле Project в качестве шаблона проекта.
Вот так! Новый шаблон проекта появится в диалоговом окне New Project с тегами под описанием шаблона и фильтрами, включенными этими тегами. Вы также можете сделать еще один шаг и легко опубликовать свой шаблон проекта на Visual Studio Marketplace (и пока вы будете там, также попробуйте крутые фичи Visual Studio 2019 и, пожалуйста, сообщите нам, что вы об этом думаете)! Вот пример одного из существующих расширений — Textmate Grammar Template.
Есть предложения?
Мы продолжаем работать над нашими инструментами, и для этого нам нужна ваша помощь! Пожалуйста, поделитесь своими отзывами/комментариями ниже, или через Developer Community Visual Studio, или твитнув нашей команде @VisualStudio.
Читайте также: