- XAML Studio позволяет редактировать и просматривать XAML-код в режиме реального времени, обеспечивая непосредственное взаимодействие с интерфейсом.
- В него входят такие передовые инструменты, как отладчик привязки, редактор контекста данных и визуальные средства просмотра.
- Его можно загрузить из Microsoft Store или скомпилировать из его репозитория с открытым исходным кодом под лицензией MIT.
- Она обеспечивает контроль над телеметрией и призвана уменьшить неудобства для дизайнеров Visual Studio.
Если вы работаете с XAML для создания интерфейсов в Windows , вы, вероятно, сталкивались с трудностями при работе с конструктором Visual Studio, бесконечным временем компиляции или неуловимыми ошибками привязки данных. Именно здесь на помощь приходит XAML Studio — приложение, разработанное специально для быстрого и беспроблемного тестирования, отладки и экспериментирования с XAML .
В этой статье мы подробно рассмотрим, что такое XAML Studio, как он помогает создавать прототипы интерфейсов WinUI и UWP за считанные минуты, какие инструменты он предлагает для отладки ссылок, управления тестовыми данными, навигации по визуальному дереву и многого другого. Вы также узнаете, как загрузить его из Microsoft Store, какие требования предъявляются для компиляции из исходного кода и как все это вписывается в современный контекст разработчиков, которые несколько устали от дизайнеров Visual Studio.
Что такое XAML Studio и для кого он предназначен?
XAML Studio — это приложение для Windows, ориентированное на разработку на XAML , первоначально созданное как проект Microsoft Garage, а теперь выпущенное как проект с открытым исходным кодом в рамках .NET Foundation. Его основная цель — позволить вам писать код на XAML, мгновенно видеть его работу и взаимодействовать с интерфейсом так, как если бы он был частью вашего собственного приложения.
Он особенно ориентирован на разработчиков, работающих с приложениями WinUI XAML и UWP , хотя он также очень полезен, если вы пришли из WPF и хотите поэкспериментировать с современными концепциями Fluent Design, стилями, шаблонами и визуальными состояниями, не создавая каждый раз целое решение.
В отличие от Visual Studio, которая больше ориентирована на полный цикл разработки, XAML Studio выступает в роли лаборатории идей для визуального слоя : вы копируете фрагмент XAML, вставляете его, корректируете, мгновенно видите результат, экспериментируете с данными, проверяете привязки, и когда вас все устраивает, вы переносите код в свой реальный проект.
Кроме того, будучи проектом с открытым исходным кодом, его развитие открыто для сообщества: любой разработчик может просмотреть код, предложить изменения , внести улучшения и принять участие в обсуждении новых функций через публичный репозиторий.
Основные возможности XAML Studio для прототипирования интерфейсов.
Одно из преимуществ XAML Studio заключается в том, что оно объединяет набор инструментов в одном приложении, предназначенном для тестирования дизайна, создания макетов экранов и отладки ссылок с минимальным временем простоя. Это не просто средство просмотра XAML-кода, а интерактивная среда для быстрой итерации в разработке пользовательского интерфейса.
Среди наиболее важных возможностей — редактирование в реальном времени: вы можете писать или изменять код XAML в редакторе и мгновенно видеть полностью функциональный предварительный просмотр . Это окно предварительного просмотра позволяет взаимодействовать с приложением по-настоящему: нажимать кнопки, изменять состояния, перемещать ползунки или тестировать поведение точно так же, как и в финальном приложении.
Еще одна примечательная особенность — возможность экспериментировать с навигацией по XAML с помощью «хлебных крошек». Это позволяет легко перемещаться по сложным структурам, точно видеть, где именно в дереве вы работаете, и быстро находить элементы, которые хотите изменить.
Кроме того, XAML Studio включает в себя набор сочетаний клавиш и быстрых параметров предварительного просмотра: перезагрузка содержимого, активация сеток выравнивания, применение обрезки или изменение тем — все это доступно через меню быстрого доступа, разработанное для упрощения процесса проб и ошибок.
Редактирование в реальном времени и интерактивный предварительный просмотр
Основой XAML Studio является система редактирования в реальном времени и взаимодействия , функция редактирования в реальном времени, которая избавляет от необходимости компилировать все решение каждый раз, когда вы меняете цвет, отступы или шаблон. Вы пишете код, сохраняете его или даже не сохраняете, а интерфейс обновляется, так что вы можете мгновенно увидеть результат.
Этот предварительный просмотр полностью интерактивен, а это значит, что вы можете протестировать поведение интерфейса в реальных условиях : перемещаться по элементам управления, запускать события и видеть, как элементы ведут себя при сочетании стилей, триггеров и визуальных состояний. Это настоящая находка для прототипирования, поскольку помогает гораздо быстрее определить, что выглядит хорошо, а что нет.
Кроме того, XAML Studio включает направляющие выравнивания на рабочей области проектирования , что упрощает позиционирование элементов и позволяет обнаруживать смещения, которые в противном случае могли бы остаться незамеченными. Это позволяет добиться более аккуратной компоновки без необходимости бесчисленных корректировок скрытых полей.
В сложных системах проектирования, где WinUI и Fluent предлагают множество возможностей с тенями, закругленными краями и адаптивной компоновкой, наличие хорошо интегрированного интерактивного предварительного просмотра помогает избежать многих проблем, типичных для тонкой настройки в процессе производства.
Отладка привязок и изучение визуального дерева.
Одна из настоящих головных болей в WPF, UWP или WinUI — это скрытые ошибки привязки данных . Когда привязка не удается, вы часто видите только пустое значение и почти ничего больше, что затрудняет понимание происходящего. XAML Studio включает в себя отладчик привязки, предназначенный для выявления подобных проблем.
С помощью отладчика привязок вы можете визуально проверить, как свойства вашей модели связаны с элементами управления в интерфейсе. Инструмент отображает состояние каждой привязки, последние использованные значения и помогает быстро определить, какая привязка не работает и почему. Для сложных макетов с большими объемами данных это значительно экономит время.
В связи с этим, XAML Studio интегрирует визуальные древовидные обозреватели и визуальные состояния , доступные из панели «Свойства». Визуальный древовидный обозреватель отображает полную иерархию элементов управления, составляющих экран, позволяя выбрать любой узел и просмотреть его свойства, стили и взаимосвязи.
Визуальный обозреватель состояний, в свою очередь, позволяет легко просматривать и переключаться между различными состояниями представления (например, обычное, направленное, нажатое, отключенное), что крайне важно при работе с пользовательскими элементами управления или расширенными шаблонами. Это позволяет быстро проверить, как каждое состояние влияет на ваш дизайн, без необходимости вручную создавать каждую ситуацию в реальном приложении.
Управление данными с помощью редактора контекста данных.
Тестирование интерфейса без реальных данных — это всё равно что проектировать вслепую. Именно поэтому XAML Studio включает в себя редактор контекста данных — инструмент, позволяющий легко определить контекст данных вашего представления и заполнить его тестовой информацией.
С помощью этого редактора вы можете подключить свой пользовательский интерфейс как к статическим, так и к динамическим источникам данных: например, загрузить JSON из локального файла или REST API и использовать его в качестве DataContext для ваших элементов управления. Это позволяет увидеть, как ведет себя макет при работе с длинным текстом, большими коллекциями или граничными значениями, что крайне важно для надежного проектирования.
Возможность смешивать XAML с тестовыми данными без необходимости настройки всей инфраструктуры приложения позволяет быстрее совершенствовать визуальное оформление и распределение информации, а также избавляет от необходимости создавать специальные тестовые проекты только для того, чтобы посмотреть, как форма выглядит с реальными данными.
Благодаря системе автосохранения XAML Studio также может восстанавливать документы и их контекст данных при повторном открытии приложения, что избавляет вас от необходимости каждый раз заново настраивать источник данных, когда вы хотите продолжить тестирование конкретного проекта.
Инструменты повышения производительности: IntelliSense, автосохранение и многое другое.
Помимо чисто визуальных функций, XAML Studio включает в себя несколько инструментов повышения производительности, которые упрощают вашу повседневную работу при интенсивном написании XAML-кода . Одним из наиболее полезных является поддержка IntelliSense, которая предлагает подсказки о свойствах, типах, именах элементов управления и пространствах имен по мере ввода текста.
Функция IntelliSense не только ускоряет написание кода, но и помогает предотвратить опечатки в привязках, путях и атрибутах , особенно в длинных структурах стилей, шаблонов или общих ресурсов. Если вы уже знакомы с IntelliSense в Visual Studio, вы сразу почувствуете себя как дома.
Еще одна очень полезная функция — автоматическое сохранение и восстановление документов . XAML Studio может автоматически сохранять вашу работу и при повторном открытии приложения восстанавливать вкладки и документы, которые вы использовали, так что вы можете продолжить работу с того места, где остановились, не открывая файлы по одному.
Интерфейс включает в себя панель инструментов документации, которая служит ярлыком для примеров, справки и справочников по элементам управления и свойствам. Это позволяет обращаться к документации, не покидая инструмент , что особенно удобно при тестировании менее знакомых API или свойств, специфичных для WinUI.
Вспомогательные средства проектирования: Fluent UI, руководства и пространства имен.
В последних версиях проекта был обновлен интерфейс на основе Fluent UI , современной системы дизайна от Microsoft. Это обновление заметно как во внешнем виде инструмента, так и в способе интеграции существующих элементов управления, тем и макетов.
Для облегчения компоновки XAML Studio включает направляющие выравнивания и сетки на поверхности предварительного просмотра. Эти направляющие упрощают выравнивание полей, отступов и компоновки и особенно полезны, когда вы пытаетесь воспроизвести дизайн с идеальной точностью до пикселя или когда хотите убедиться в правильном выравнивании элементов без необходимости измерять все вручную.
Ещё одна область, где этот инструмент может оказаться полезным, — это управление пространствами имён XAML. С помощью вспомогательных функций для пространств имён вы можете более эффективно добавлять и исправлять XML-файлы, избегая распространённой проблемы неполных или дублирующихся объявлений, которые нарушают разметку или генерируют надоедливые предупреждения.
Также были внесены небольшие улучшения для повседневного использования, например, возможность дублировать открытые вкладки из контекстного меню , что очень удобно, когда вы хотите поэкспериментировать с двумя вариантами одного и того же макета, не теряя исходную версию и не создавая новый файл с нуля.
Поддержка папок и управление ресурсами
Одним из главных нововведений в XAML Studio стала поддержка внешних папок и ресурсов . Это означает, что вы можете работать с набором связанных файлов, а не только с одним изолированным XAML-файлом.
Благодаря этой функции приложение может загружать изображения из папок, файлов данных дизайна и других дополнительных ресурсов, которые обычно сопровождают сами интерфейсы. Например, у вас может быть набор тестовых изображений для карусели, значки для кнопок или файлы JSON, которые выступают в качестве источника данных.
Поддержка папок значительно приближает XAML Studio к реальному рабочему процессу, а не просто к простой песочнице. Она позволяет создавать небольшие тестовые сценарии, имитирующие структуру ресурсов полноценного приложения , но при этом сохраняя легковесность среды, разработанной исключительно для прототипирования.
Всё это, в сочетании с остальными инструментами предварительного просмотра, привязки и навигации, делает XAML Studio очень привлекательным вариантом для тех, кто хочет доработать свои экраны перед интеграцией их в ресурсоёмкое решение.
Загрузите из Microsoft Store и установите вручную.
Для большинства пользователей самый простой способ начать — загрузить XAML Studio непосредственно из Microsoft Store . Там оно доступно как бесплатное приложение, поэтому все, что вам нужно сделать, это найти его, установить и начать экспериментировать с XAML за считанные минуты.
Согласно имеющейся информации, версия для магазина по-прежнему находится в ветке 1.1, в то время как наиболее активная разработка ведется в ветке dev репозитория проекта. Это важно, если вы хотите получить доступ к новейшим функциям или внести свой вклад в разработку, поскольку могут быть различия между тем, что вы видите в магазине, и тем, что находится в исходном коде.
Если вы предпочитаете установить его вручную из репозитория или скомпилировать самостоятельно, следует учитывать ряд минимальных требований к Visual Studio, чтобы обеспечить корректную работу системы.
Скомпилируйте XAML Studio из исходного кода.
Если вы хотите пойти дальше и скомпилировать XAML Studio из исходного кода , вам потребуется подготовить среду в Visual Studio со специальными компонентами, ориентированными на разработку современных приложений для Windows.
Для начала необходимо установить пакет разработки приложений Windows для Visual Studio. Этот пакет включает в себя все необходимое для работы с приложениями UWP, WinUI и другими современными технологиями XAML на платформе Windows.
Кроме того, вам потребуется установить инструменты универсальной платформы Windows , а также специальный Windows SDK 17763. Без этого SDK некоторые части проекта могут скомпилироваться некорректно, поэтому рекомендуется проверить это в установщике Visual Studio перед открытием решения.
После того, как у вас будут все компоненты, при открытии репозитория убедитесь, что проект с именем XAMLStudio отмечен как проект запуска в решении. Затем просто нажмите F5, чтобы запустить приложение в режиме отладки, и запустите его из своей среды разработки.
Проект с открытым исходным кодом, лицензии и кодекс поведения
Поскольку XAML Studio является проектом .NET Foundation , он распространяется под лицензией MIT, одной из самых либеральных лицензий с открытым исходным кодом. Это означает, что вы можете свободно просматривать, изменять, повторно использовать и вносить свой вклад в код, если будете соблюдать обычные условия указания авторства.
В репозитории содержится файл NOTICE.json с указанием авторства сторонних разработчиков , который соответствует информации, отображаемой в самом приложении относительно используемых внешних библиотек. Если вас беспокоит соответствие лицензионным требованиям в корпоративной среде, этот файл послужит полезным справочником для определения того, какие компоненты были включены.
Проект принял Кодекс поведения Microsoft для проектов с открытым исходным кодом , поэтому участие в обсуждении проблем, запросов на слияние или дискуссиях требует соблюдения четких правил поведения: уважения, профессионализма и нулевой терпимости к домогательствам. Также есть страница с часто задаваемыми вопросами о кодексе поведения и контактный адрес ( [email protected] ) для вопросов или проблем.
Для тех, кто хочет активно участвовать в проекте, файл CONTRIBUTING.md описывает, как предлагать изменения, вносить свой вклад и сообщать о проблемах . В нем подробно описан рекомендуемый способ работы с ветками, рабочий процесс проверки кода и другие практические аспекты совместной работы над проектом.
Телеметрия, конфиденциальность и сбор данных
Как и многие другие современные приложения, XAML Studio включает в себя механизмы телеметрии для сбора информации об использовании с целью понимания того, какие функции используются чаще всего, как приложение работает с документами разных размеров и какие типы ошибок возникают наиболее часто.
Хорошая новость в том, что само приложение предоставляет четкий контроль над этой телеметрией: на странице настроек, в разделе «Обратная связь », вы можете изменить параметр «Диагностические данные» на «Нет», чтобы отключить сбор данных самим распределенным приложением.
Стоит отметить, что, согласно информации проекта, платформа App Center, используемая в качестве основы для телеметрии, устарела, и в данный момент активная телеметрия в версии v2 не используется , пока не будет принято решение о поиске альтернативного решения для диагностики.
В любом случае, Microsoft заявляет, что программное обеспечение может собирать информацию об использовании приложения, которая может быть использована для улучшения услуг и продуктов . Если вы, как разработчик, используете функции, которые могут собирать данные конечных пользователей (например, интеграция сервисов в ваши собственные приложения), вы должны соблюдать действующее законодательство и предоставлять соответствующие уведомления и политики конфиденциальности, ссылаясь на заявление о конфиденциальности Microsoft, где это уместно.
Фирменный стиль, логотипы и использование товарных знаков.
В репозитории и самом приложении могут содержаться товарные знаки и логотипы Microsoft или других третьих лиц. В проекте четко указано, что использование этих товарных знаков регулируется официальными правилами брендинга Microsoft.
Если вы решите создать модифицированные версии проекта или альтернативные дистрибутивы, вы должны сделать это таким образом, чтобы не вызывать путаницу и не создавать впечатление официальной поддержки со стороны Microsoft, если таких отношений нет. Это правило особенно важно, если вы распространяете бинарные файлы или интегрируете части проекта в коммерческие продукты.
Аналогичным образом, любые логотипы или товарные знаки третьих лиц, используемые в коде, подпадают под действие политики этих третьих лиц, поэтому рекомендуется ознакомиться с этими аспектами, если вы планируете повторно использовать значительные части приложения в своих собственных публичных проектах.
Контекст: Недовольство дизайнерами Visual Studio и ценность XAML Studio.
Выпуск XAML Studio в качестве проекта с открытым исходным кодом совпал с периодом, когда многие разработчики выражали недовольство визуальными редакторами Visual Studio . Проблемы с производительностью, сбои, непоследовательное поведение и трудности с отладкой сложного XAML-кода были одними из повторяющихся жалоб.
В этом сценарии XAML Studio воспринимается как своего рода предохранительный клапан: легковесный инструмент, специально ориентированный на проектирование и тестирование XAML, который снижает некоторые сложности традиционного цикла «редактирование-компиляция-запуск». Он не стремится заменить Visual Studio, а скорее дополнить его опыт в той области, где он наиболее неэффективен: быстрая итерация в разработке интерфейса.
Такой подход также соответствует задачам тех, кто изучает такие технологии, как WinUI, WPF или UWP. Для многих сочетание файлов .sln, сложных конфигураций и упаковки в исполняемые файлы может стать настоящей головной болью, особенно на начальном этапе. Наличие автономного инструмента, ориентированного исключительно на слой XAML, значительно упрощает процесс обучения и экспериментирования.
Вкратце, XAML Studio нашла свою нишу как высоко ценимое приложение для тех, кто посвящает значительную часть своего времени созданию и совершенствованию пользовательских интерфейсов в экосистеме Windows, предлагая более гибкую и менее громоздкую среду для ежедневной работы с XAML.
Для тех, кто только начинает работать с C#, WPF, UWP или WinUI, или для тех, кто уже хорошо разбирается в XAML, но всё ещё сталкивается с медленным тестированием и запутанной отладкой, наличие такого инструмента, как XAML Studio, представляет собой значительное изменение в подходе к прототипированию , отладке сложных привязок и проверке дизайна перед его интеграцией в крупные проекты — и всё это с гибкостью проекта с открытым исходным кодом и уверенностью в том, что данные передаются и как они используются.
