XAML Studio: Пълно ръководство за създаване на прототипи на XAML интерфейси в Windows

Информатек Дигитал » Ресурси » XAML Studio: Пълно ръководство за създаване на прототипи на XAML интерфейси в Windows

Ако работите с 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 навигация използване на пътеводител с навигационни трохички. Благодарение на това можете лесно да се ориентирате в сложни структури, да виждате точно къде в дървото работите и бързо да намирате елементите, които искате да коригирате.

В допълнение, XAML Studio включва набор от преки пътища и опции за бърз преглед: презареждане на съдържание, активиране на мрежи за подравняване, прилагане на изрязване или промяна на теми, всичко това от меню за бърз достъп, предназначено да рационализира цикъла на проба-грешка.

Редактиране на живо и взаимодействие с предварителен преглед

Основата на XAML Studio е неговата система от Редактиране и взаимодействие на живоТова е редактор на живо, който елиминира необходимостта от компилиране на цялото решение всеки път, когато промените цвят, разстояние или шаблон. Пишете код, запазвате го или дори го оставяте незапазен и интерфейсът се обновява, така че можете да видите резултата мигновено.

Този преглед е напълно интерактивен, което означава, че можете тестване на поведението на реалния интерфейсНавигирайте в контролите, задействайте събития и вижте как се държат елементите, когато стилове, тригери и визуални състояния се комбинират. Това е спасение за прототипирането, защото ви помага да решите много по-бързо кое изглежда добре и кое не.

В допълнение, 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 FoundationXAML Studio се разпространява под лиценза MIT, един от най-либералните лицензи за отворен код. Това означава, че можете да преглеждате, променяте, използвате повторно и да допринасяте за кода съвсем свободно, стига да спазвате обичайните условия за посочване на авторството.

Хранилището включва файл NOTICE.json с приписвания на трети страниТази информация съответства на данните, показани в самото приложение относно използваните външни библиотеки. Ако сте загрижени за съответствието с лицензите в корпоративни среди, този файл е полезен справочник, за да видите кои компоненти са включени.

Проектът е приел Кодекс за поведение на Microsoft с отворен кодСледователно, участието в проблеми, заявки за изтегляне или дискусии изисква спазване на ясни правила за поведение: уважение, професионализъм и нулева толерантност към тормоз. Има и страница с често задавани въпроси относно кодекса за поведение, както и адрес за контакт (opencode@microsoft.com) за въпроси или проблеми.

За тези, които искат активно да допринесат, файлът CONTRIBUTING.md описва Как да предлагате промени, да изпращате приноси и да докладвате проблемиВ него се описва подробно препоръчителният начин за работа с клонове, работният процес за преглед на кода и други практически аспекти на сътрудничеството по проекта.

Телеметрия, поверителност и събиране на данни

Подобно на много други съвременни приложения, XAML Studio по това време е включвал механизми за Телеметрия за събиране на информация за употреба, с цел да се разбере кои функции се използват най-много, как приложението работи с документи с различни размери и какви видове грешки възникват най-често.

Добрата новина е, че самото приложение предлага ясен контрол върху тази телеметрия: от страницата с настройки, в секцията на Обратна връзка или коментариМожете да промените опцията „Диагностични данни“ на „Не“, за да деактивирате събирането на данни от самото разпределено приложение.

Струва си да се отбележи, че според информацията за проекта, App Center – платформата, използвана като основа за телеметрия – е остаряла и към момента... Активната телеметрия не се използва във версия v2, докато се решава алтернативно решение за диагностика.

Във всеки случай, Microsoft съобщава, че софтуерът може да събира информация за използването на приложението, която би могла да бъде използвана за подобряване на услугите и продуктитеАко вие, като разработчик, използвате функции, които могат да събират данни от крайни потребители (например, интеграции на услуги във вашите собствени приложения), трябва да спазвате приложимото законодателство и да предоставите подходящи известия и политики за поверителност, като по целесъобразност предоставяте връзки към декларацията за поверителност на Microsoft.

Марка, лога и използване на търговски марки

В хранилището и самото приложение може да се появи следното Търговски марки и лога на Microsoft или други трети страни. Проектът ясно посочва, че използването на тези търговски марки е предмет на официалните насоки на Microsoft за търговски марки и брандиране.

Ако решите да създадете модифицирани версии на проекта или алтернативни дистрибуции, трябва да го направите по начин, който Не създавайте объркване и не внушавайте официално спонсорство от Microsoft, когато не съществува такава връзка. Това правило е особено важно, ако разпространявате двоични файлове или интегрирате части от проекта в търговски продукти.

По подобен начин, всички лога или търговски марки на трети страни, използвани в кода, са предмет на политиките на тези трети страни, така че е препоръчително да прегледате тези аспекти, ако възнамерявате да използвате повторно големи части от приложението в собствените си публични проекти.

Контекст: Разочарование от дизайнерите на Visual Studio и стойността на XAML Studio

Пускането на XAML Studio като проект с отворен код се случи в контекст, в който много разработчици показваха известно недоволство от визуалните дизайнери на Visual StudioПроблеми с производителността, сривове, непоследователно поведение и трудности при дебъгване на сложен XAML са доста чести оплаквания.

В този сценарий XAML Studio се възприема като вид авариен клапан: лек инструмент, специално фокусиран върху XAML дизайна и тестването, който Това намалява част от триенето на традиционния цикъл. edit-compile-run. Не е предназначен да замени Visual Studio, а по-скоро да допълни експертния му опит в областта, където е най-вреден: бърза итерация на интерфейса.

Този подход е в съответствие и с опасенията на технологиите за обучение като WinUI, WPF или UWP. За мнозина комбинацията от .sln файлове, сложни конфигурации и пакетиране в изпълними файлове може да бъде истинско главоболие, особено в началото. Наличието на самостоятелен инструмент, фокусиран единствено върху XAML слоя, опростява процеса. ученето и експериментирането са много по-лесни за управление.

Накратко, XAML Studio е намерило своята ниша като високо ценено приложение за тези, които посвещават значителна част от времето си на изграждане и усъвършенстване на потребителски интерфейси в екосистемата на Windows, предлагайки по-гъвкава и по-малко тромава среда за ежедневно манипулиране на XAML.

За всеки, който започва с C#, WPF, UWP или WinUI, или за тези, които вече са опитни с XAML, но все още се борят с бавното тестване и объркващото дебъгване, наличието на инструмент като XAML Studio под ръка означава... забележима промяна в начина, по който се разработват прототипиОтстранявайте грешки в сложни обвързвания и валидирайте дизайни, преди да ги интегрирате в големи проекти, всичко това с гъвкавостта на проект с отворен код и спокойствието, че можете да контролирате какви данни се споделят и как се използват.