- XAML Studio ви позволява да редактирате и преглеждате XAML на живо, с реално взаимодействие в интерфейса.
- Включва разширени инструменти като Binding Debugger, Data Context Editor и визуални изследователи.
- Може да бъде изтеглен от 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 дизайнерски концепции, стилове, шаблони и визуални състояния, без да се налага да изграждате цялостно решение всеки път.
За разлика от Visual Studio, което е по-ориентирано към пълния цикъл на разработка, XAML Studio действа като лаборатория за идеи за визуалния слой : копирате XAML фрагмент, поставяте го, коригирате го, виждате резултата мигновено, експериментирате с данните, проверявате обвързванията и когато сте доволни, прилагате кода към реалния си проект.
Освен това, тъй като е проект с отворен код, неговата еволюция е отворена за общността: всеки разработчик може да прегледа кода, да предложи промени , да изпрати подобрения и да участва в обсъждането на нови функции чрез публичното хранилище.
Ключови характеристики на XAML Studio за създаване на прототипи на интерфейси
Една от силните страни на XAML Studio е, че обединява набор от инструменти в едно приложение, предназначено за тестване на дизайни, създаване на оформления на екрани и отстраняване на грешки в връзки с минимално време на престой. Това не е просто XAML визуализатор, а интерактивна среда за бързо превъртане на потребителския интерфейс.
Сред най-важните му възможности е редактирането на живо: можете да пишете или променяте XAML код в редактора и незабавно да виждате напълно функционален преглед . Този прозорец за преглед позволява реално взаимодействие: натискане на бутони, промяна на състояния, преместване на плъзгачи или тестване на поведение, точно както бихте направили в крайното приложение.
Друга забележителна функция е възможността за експериментиране с XAML навигация, използвайки breadcrumb trail. Това ви позволява лесно да се придвижвате през сложни структури, да виждате точно къде в дървото работите и бързо да намирате елементите, които искате да коригирате.
В допълнение, XAML Studio включва набор от преки пътища и опции за бърз преглед: презареждане на съдържание, активиране на мрежи за подравняване, прилагане на изрязване или промяна на теми, всичко това от меню за бърз достъп, предназначено да рационализира цикъла на проба-грешка.
Редактиране на живо и взаимодействие с предварителен преглед
Основата на XAML Studio е неговата система Live Edit and Interaction – функция за редактиране на живо, която елиминира необходимостта от компилиране на цялото решение всеки път, когато промените цвят, разстояние или шаблон. Пишете код, запазвате го или дори го оставяте незапазен и интерфейсът се обновява, така че можете да видите резултата незабавно.
Този преглед е напълно интерактивен, което означава, че можете да тествате поведението на интерфейса в реалния свят : да навигирате в контролите, да задействате събития и да виждате как се държат елементите, когато стилове, тригери и визуални състояния се комбинират. Това е спасение за прототипирането, защото ви помага да решите много по-бързо какво изглежда добре и какво не.
Освен това, XAML Studio включва водачи за подравняване в повърхността за проектиране , което улеснява последователното позициониране на елементите и откриването на несъответствия, които иначе биха могли да останат незабелязани. Това ви позволява да постигнете по-чисто оформление, без да се налага да правите безброй корекции на слепи полета.
В сложни дизайнерски системи, където WinUI и Fluent предлагат много възможности със сенки, заоблени ръбове и адаптивни оформления, наличието на добре интегриран интерактивен преглед ви помага да избегнете голяма част от чувството на неудовлетвореност, типично за фина настройка в производството.
Отстраняване на грешки при свързване и изследване на визуалното дърво
Едно от истинските главоболия в WPF, UWP или WinUI са тихите грешки при обвързване на данни . Когато обвързването се провали, често виждате само празна стойност и малко друго, което затруднява разбирането какво се случва. XAML Studio включва Binding Debugger, предназначен да хвърли светлина върху този вид проблеми.
С Binding Debugger можете визуално да прегледате как свойствата на вашия модел се свързват с контролите в интерфейса. Инструментът показва състоянието на всяко свързване, последните използвани стойности и ви помага бързо да определите кое свързване е неуспешно и защо. За сложни макети с големи количества данни това спестява значително време.
Във връзка с това, XAML Studio интегрира визуални дървовидни инструменти и визуални състояния , достъпни от панела „Свойства“. Визуалният дървовиден инструмент ви показва пълната йерархия от контроли и елементи, които съставляват екрана, позволявайки ви да изберете всеки възел и да видите неговите свойства, стилове и взаимоотношения.
Визуалният изследовател на състояния, от друга страна, улеснява преглеждането и превключването между различните състояния на изгледа (например, нормално, насочено, натиснато, деактивирано), което е от решаващо значение при работа с персонализирани контроли или разширени шаблони. Това ви позволява бързо да тествате как всяко състояние влияе на вашия дизайн, без да се налага ръчно да налагате всяка ситуация в реалното приложение.
Управление на данни с редактора на контекст на данни
Тестването на интерфейс без реални данни е като проектиране на сляпо. Ето защо XAML Studio включва редактор на контекст на данни – инструмент, който ви позволява лесно да дефинирате контекста на данните на вашия изглед, за да го попълните с тестова информация.
От този редактор можете да свържете потребителския си интерфейс както със статични, така и с динамични източници на данни: например, да заредите JSON от локален файл или REST API и да го използвате като DataContext за вашите контроли. Това ви позволява да видите как оформлението се държи с дълъг текст, големи колекции или гранични стойности, което е от решаващо значение за надеждния дизайн.
Тази възможност за смесване на XAML с тестови данни, без да е необходимо да настройвате цялата си инфраструктура на приложението, ви позволява да извършвате по-бързи итерии върху визуалния вид и разпределението на информацията и ви спестява настройването на ad hoc примерни проекти, само за да видите как изглежда даден формуляр с реални данни.
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, за да стартирате приложението в режим на дебъгване и да го стартирате от вашата собствена среда за разработка.
Проект с отворен код, лицензи и кодекс за поведение
Тъй като е публикуван като проект на .NET Foundation , XAML Studio се разпространява под лиценза 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 представлява значителна промяна в начина, по който подхождате към прототипирането , дебъгването на сложни обвързвания и валидирането на дизайни, преди да ги интегрирате в големи проекти – всичко това с гъвкавостта на проект с отворен код и спокойствието, че можете да контролирате какви данни се споделят и как се използват.
