- Dzięki XAML Studio możesz edytować i podglądać pliki XAML na żywo, korzystając z interfejsu użytkownika.
- Zawiera zaawansowane narzędzia, takie jak Binding Debugger, Data Context Editor i wizualne eksploratory.
- Można go pobrać ze sklepu Microsoft Store lub skompilować z jego otwartego repozytorium źródłowego na licencji MIT.
- Umożliwia kontrolę nad danymi telemetrycznymi i ma na celu złagodzenie frustracji projektantów korzystających z programu Visual Studio.
Jeśli tworzysz interfejsy w systemie Windows przy użyciu języka XAML , prawdopodobnie napotkałeś problemy z projektantem w programie Visual Studio, niekończący się czas kompilacji lub niemożliwe do zlokalizowania błędy wiązania danych. Właśnie tutaj pojawia się XAML Studio – aplikacja zaprojektowana specjalnie po to, aby umożliwić szybkie i bezproblemowe testowanie, debugowanie i eksperymentowanie z językiem XAML .
W tym artykule szczegółowo przyjrzymy się, czym jest XAML Studio, jak pomaga w tworzeniu prototypów interfejsów WinUI i UWP w ciągu kilku minut, jakie narzędzia oferuje do debugowania linków, zarządzania danymi testowymi, nawigacji po drzewie wizualnym i wiele więcej. Zobaczysz również, jak pobrać XAML Studio ze sklepu Microsoft Store, jakie są wymagania, jeśli chcesz skompilować je z kodu źródłowego, i jak to wszystko wpisuje się w obecny kontekst programistów, którzy mają już dość projektantów w Visual Studio.
Czym jest XAML Studio i dla kogo jest przeznaczone?
XAML Studio to aplikacja dla systemu Windows, skupiająca się na programowaniu w języku XAML , pierwotnie stworzona jako projekt Microsoft Garage, a obecnie udostępniona jako projekt open source w ramach platformy .NET Foundation. Jej głównym celem jest umożliwienie pisania kodu XAML, obserwowania go w działaniu i interakcji z interfejsem tak, jakby był częścią własnej aplikacji.
Jest on skierowany przede wszystkim do deweloperów pracujących z aplikacjami WinUI XAML i UWP , choć może okazać się również bardzo przydatny, jeśli wcześniej pracowałeś z WPF i chciałeś poeksperymentować z nowoczesnymi koncepcjami projektowania Fluent, stylami, szablonami i stanami wizualnymi bez konieczności tworzenia za każdym razem kompletnego rozwiązania.
W przeciwieństwie do programu Visual Studio, który jest bardziej nastawiony na kompletny cykl rozwoju, XAML Studio działa jak laboratorium pomysłów dla warstwy wizualnej : kopiujesz fragment XAML, wklejasz go, dostosowujesz, od razu widzisz wynik, bawisz się danymi, sprawdzasz powiązania, a gdy jesteś zadowolony, przenosisz kod do swojego rzeczywistego projektu.
Co więcej, jako że jest to projekt typu open source, jego rozwój jest otwarty dla społeczności: każdy programista może przejrzeć kod, zaproponować zmiany , przesłać ulepszenia i wziąć udział w dyskusji na temat nowych funkcji za pośrednictwem publicznego repozytorium.
Kluczowe cechy XAML Studio do prototypowania interfejsów
Jedną z zalet XAML Studio jest to, że łączy zestaw narzędzi w jednej aplikacji, przeznaczonej do testowania projektów, tworzenia układów ekranów i debugowania linków, przy minimalnym przestoju. To nie tylko przeglądarka XAML, ale interaktywne środowisko do szybkiej iteracji interfejsu użytkownika.
Jedną z jego najważniejszych możliwości jest edycja na żywo: możesz pisać lub modyfikować kod XAML w edytorze i od razu zobaczyć w pełni funkcjonalny podgląd . To okno podglądu umożliwia rzeczywistą interakcję: naciskanie przycisków, zmianę stanów, przesuwanie suwaków lub testowanie zachowań, tak jak w finalnej aplikacji.
Kolejną wyróżniającą się funkcją jest możliwość eksperymentowania z nawigacją XAML za pomocą ścieżki nawigacyjnej (breadcrumb path). Pozwala to na łatwe poruszanie się po złożonych strukturach, dokładne sprawdzenie, w którym miejscu drzewa pracujesz, i szybkie odnalezienie elementów, które chcesz dostosować.
Ponadto XAML Studio zawiera zestaw skrótów i opcji szybkiego podglądu: ponowne załadowanie zawartości, aktywacja siatek wyrównania, stosowanie przycinania lub zmiana motywu — wszystko z menu szybkiego dostępu zaprojektowanego w celu usprawnienia cyklu prób i błędów.
Edycja na żywo i interakcja podglądu
Podstawą XAML Studio jest system edycji na żywo i interakcji – funkcja edycji na żywo, która eliminuje konieczność kompilowania całego rozwiązania za każdym razem, gdy zmieniasz kolor, odstępy lub szablon. Piszesz kod, zapisujesz go, a nawet go nie zapisujesz, a interfejs odświeża się, dzięki czemu natychmiast widzisz rezultat.
Ten podgląd jest w pełni interaktywny, co oznacza, że możesz testować rzeczywiste zachowania interfejsu : nawigować po elementach sterujących, wyzwalać zdarzenia i obserwować, jak elementy zachowują się po połączeniu stylów, wyzwalaczy i stanów wizualnych. To prawdziwy ratunek podczas prototypowania, ponieważ pozwala znacznie szybciej decydować, co wygląda dobrze, a co nie.
Co więcej, XAML Studio zawiera prowadnice wyrównania na powierzchni projektu , ułatwiające spójne pozycjonowanie elementów i wykrywanie niewspółosiowości, które w innym przypadku mogłyby pozostać niezauważone. Pozwala to uzyskać bardziej przejrzysty układ bez konieczności wprowadzania niezliczonych korekt marginesów.
W złożonych systemach projektowych, w których WinUI i Fluent oferują mnóstwo możliwości w zakresie cieni, zaokrąglonych krawędzi i adaptacyjnych układów, dobrze zintegrowany interaktywny podgląd pomaga uniknąć wielu frustracji typowych dla precyzyjnego dostrajania w środowisku produkcyjnym.
Debugowanie powiązań i eksploracja drzewa wizualnego
Jednym z prawdziwych problemów w WPF, UWP i WinUI są błędy cichego wiązania danych . W przypadku niepowodzenia wiązania często widoczna jest tylko pusta wartość i nic więcej, co utrudnia zrozumienie, co się dzieje. XAML Studio zawiera debuger wiązania, który pomaga w rozwiązaniu tego typu problemów.
Dzięki Debugerowi Wiązań (Binding Debugger) możesz wizualnie sprawdzić, jak właściwości modelu łączą się z kontrolkami w interfejsie. Narzędzie wyświetla status każdego powiązania, ostatnio użyte wartości i pomaga szybko zidentyfikować, które powiązanie nie działa i dlaczego. W przypadku złożonych makiet z dużą ilością danych pozwala to zaoszczędzić znaczną ilość czasu.
W związku z tym, XAML Studio integruje eksploratory drzewa wizualnego i stany wizualne , dostępne z panelu Właściwości. Eksplorator drzewa wizualnego prezentuje pełną hierarchię kontrolek i elementów tworzących ekran, umożliwiając wybór dowolnego węzła i wyświetlenie jego właściwości, stylów i relacji.
Z kolei wizualny eksplorator stanu ułatwia przeglądanie i przełączanie się między różnymi stanami widoku (na przykład normalnym, wskazanym, naciśniętym, wyłączonym), co jest kluczowe podczas pracy z niestandardowymi kontrolkami lub zaawansowanymi szablonami. Pozwala to szybko przetestować, jak każdy stan wpływa na projekt, bez konieczności ręcznego wymuszania każdej sytuacji w aplikacji.
Zarządzanie danymi za pomocą Edytora kontekstu danych
Testowanie interfejsu bez rzeczywistych danych przypomina projektowanie w ciemno. Dlatego XAML Studio zawiera Edytor Kontekstu Danych – narzędzie, które pozwala łatwo zdefiniować kontekst danych widoku i wypełnić go informacjami testowymi.
Za pomocą tego edytora możesz połączyć interfejs użytkownika zarówno ze statycznymi, jak i dynamicznymi źródłami danych: na przykład załadować dane JSON z pliku lokalnego lub interfejsu API REST i użyć ich jako kontekstu danych dla kontrolek. Pozwala to zobaczyć, jak układ zachowuje się w przypadku długiego tekstu, dużych kolekcji lub wartości granicznych, co jest kluczowe dla solidnego projektu.
Możliwość łączenia kodu XAML z danymi testowymi bez konieczności konfigurowania całej infrastruktury aplikacji pozwala na szybsze iterowanie wyglądu wizualnego i dystrybucji informacji oraz eliminuje konieczność konfigurowania doraźnych projektów przykładowych tylko po to, by zobaczyć, jak formularz wygląda z rzeczywistymi danymi.
Dzięki systemowi automatycznego zapisywania XAML Studio może również przywrócić dokumenty i ich kontekst danych po ponownym otwarciu aplikacji. Dzięki temu nie musisz konfigurować ponownie źródła danych za każdym razem, gdy chcesz kontynuować testowanie określonego projektu.
Narzędzia do zwiększania produktywności: IntelliSense, automatyczne zapisywanie i wiele więcej
Oprócz funkcji czysto wizualnych, XAML Studio integruje szereg narzędzi zwiększających produktywność, które ułatwiają codzienną pracę podczas intensywnego pisania kodu XAML . Jednym z najprzydatniejszych jest obsługa IntelliSense, która sugeruje właściwości, typy, nazwy kontrolek i przestrzenie nazw podczas pisania.
Technologia IntelliSense nie tylko przyspiesza pisanie kodu, ale także pomaga zapobiegać literówkom w powiązaniach, ścieżkach i atrybutach , zwłaszcza w długich strukturach stylów, szablonów lub współdzielonych zasobach. Jeśli znasz już technologię IntelliSense w programie Visual Studio, poczujesz się jak w domu.
Kolejną bardzo praktyczną funkcją jest automatyczne zapisywanie i przywracanie dokumentów . XAML Studio może automatycznie zapisywać Twoją pracę i po ponownym otwarciu aplikacji przywracać używane karty i dokumenty, dzięki czemu możesz kontynuować pracę dokładnie od miejsca, w którym ją przerwałeś, bez konieczności otwierania plików jeden po drugim.
Interfejs zawiera Skrzynkę z narzędziami do dokumentacji, która służy jako skrót do przykładów, pomocy i odnośników do kontrolek i właściwości. Pozwala to na zapoznanie się z dokumentacją bez opuszczania narzędzia , co jest szczególnie wygodne podczas testowania mniej znanych interfejsów API lub właściwości specyficznych dla WinUI.
Pomoce projektowe: płynny interfejs użytkownika, przewodniki i przestrzenie nazw
Najnowsze wersje projektu wprowadziły odświeżony interfejs oparty na Fluent UI , nowoczesnym systemie projektowania firmy Microsoft. Ta aktualizacja jest zauważalna zarówno w wyglądzie narzędzia, jak i w sposobie integracji obecnych kontrolek, motywów i układów.
Aby ułatwić Ci układ, XAML Studio zawiera linie pomocnicze i siatki wyrównania na powierzchni podglądu. Linie te ułatwiają wyrównywanie marginesów, odstępów i układów, a są szczególnie przydatne, gdy chcesz odtworzyć projekty z dokładnością co do piksela lub gdy chcesz upewnić się, że elementy są prawidłowo wyrównane bez konieczności ręcznego mierzenia.
Kolejnym obszarem, w którym narzędzie to przydaje się, jest zarządzanie przestrzeniami nazw XAML. Dzięki narzędziom pomocniczym przestrzeni nazw można wydajniej dodawać i poprawiać pliki XML, unikając częstego problemu niekompletnych lub zduplikowanych deklaracji, które psują kod znaczników lub generują irytujące ostrzeżenia.
Wprowadzono także drobne usprawnienia ułatwiające codzienne użytkowanie, takie jak możliwość duplikowania otwartych kart z poziomu menu kontekstowego , co jest przydatne, gdy chcesz poeksperymentować z dwiema wersjami tego samego układu bez utraty pierwotnej wersji lub konieczności tworzenia nowego pliku od podstaw.
Obsługa folderów i zarządzanie zasobami
Jednym z głównych udoskonaleń w XAML Studio jest obsługa zewnętrznych folderów i zasobów . Oznacza to, że można pracować z zestawem powiązanych plików, a nie tylko z pojedynczym, odizolowanym plikiem XAML.
Dzięki tej funkcji aplikacja może obsługiwać ładowanie obrazów z folderów, plików danych projektowych i innych zasobów dodatkowych, które zazwyczaj towarzyszą rzeczywistym interfejsom. Na przykład, możesz mieć zestaw obrazów testowych dla karuzeli, ikony dla przycisków lub pliki JSON, które pełnią funkcję źródła danych.
Obsługa folderów znacznie przybliża XAML Studio do rzeczywistego przepływu pracy, zamiast być jedynie prostą piaskownicą. Pozwala ona na konfigurowanie małych scenariuszy testowych, które naśladują strukturę zasobów pełnej aplikacji , ale z lekkością środowiska zaprojektowanego wyłącznie do prototypowania.
Wszystko to w połączeniu z pozostałymi narzędziami podglądu, wiązania i nawigacji sprawia, że XAML Studio jest bardzo atrakcyjną opcją dla tych, którzy chcą udoskonalić ekrany przed ich zintegrowaniem z rozbudowanym rozwiązaniem.
Pobierz ze sklepu Microsoft Store i zainstaluj ręcznie
Dla większości użytkowników najłatwiejszym sposobem na rozpoczęcie pracy jest pobranie XAML Studio bezpośrednio ze sklepu Microsoft Store . Jest ono dostępne jako bezpłatna aplikacja, więc wystarczy je wyszukać, zainstalować i zacząć eksperymentować z XAML w kilka minut.
Wersja sklepowa, według dostępnych informacji, nadal znajduje się na gałęzi 1.1, podczas gdy najbardziej aktywny rozwój odbywa się na gałęzi dev repozytorium projektu. Jest to istotne, jeśli chcesz uzyskać dostęp do najnowszych funkcji lub uczestniczyć w rozwoju, ponieważ mogą występować różnice między tym, co widzisz w sklepie, a tym, co znajduje się w kodzie źródłowym.
Jeśli wolisz zainstalować program ręcznie z repozytorium lub skompilować go samodzielnie, musisz pamiętać o kilku minimalnych wymaganiach programu Visual Studio, aby mieć pewność, że wszystko będzie działać poprawnie.
Kompilacja XAML Studio z kodu źródłowego
Jeśli chcesz pójść o krok dalej i skompilować XAML Studio z jego kodu źródłowego , musisz przygotować środowisko w programie Visual Studio przy użyciu określonych komponentów ukierunkowanych na tworzenie nowoczesnych aplikacji systemu Windows.
Najpierw musisz zainstalować pakiet roboczy do tworzenia aplikacji dla systemu Windows w programie Visual Studio. Pakiet ten obejmuje wszystkie elementy związane z aplikacjami UWP, WinUI i innymi nowoczesnymi technologiami XAML na platformie Windows.
Dodatkowo musisz mieć zainstalowane narzędzia Universal Windows Platform , a także specjalny zestaw Windows SDK 17763. Bez tego zestawu SDK niektóre części projektu mogą nie kompilować się poprawnie, dlatego zaleca się sprawdzenie tego w instalatorze programu Visual Studio przed otwarciem rozwiązania.
Gdy masz już wszystkie komponenty, otwierając repozytorium, upewnij się, że projekt o nazwie XAMLStudio jest oznaczony jako projekt startowy w rozwiązaniu. Następnie naciśnij klawisz F5, aby uruchomić aplikację w trybie debugowania i uruchomić ją z własnego środowiska programistycznego.
Projekt Open Source, licencje i kodeks postępowania
Ponieważ XAML Studio jest publikowane jako projekt .NET Foundation , jest rozpowszechniane na licencji MIT, jednej z najbardziej liberalnych licencji open source. Oznacza to, że możesz przeglądać, modyfikować, ponownie wykorzystywać i współtworzyć kod całkiem swobodnie, pod warunkiem przestrzegania standardowych zasad atrybucji.
Repozytorium zawiera plik NOTICE.json z informacjami o autorach stron trzecich , który jest zgodny z informacjami wyświetlanymi w samej aplikacji dotyczącymi używanych bibliotek zewnętrznych. Jeśli martwisz się o zgodność z licencją w środowiskach korporacyjnych, ten plik będzie przydatnym źródłem informacji, które komponenty zostały uwzględnione.
W projekcie przyjęto Kodeks Postępowania Microsoft Open Source , dlatego uczestnictwo w zgłoszeniach, żądaniach ściągnięcia (pull request) lub dyskusjach wymaga przestrzegania jasnych zasad postępowania: szacunku, profesjonalizmu i zerowej tolerancji dla nękania. Dostępna jest również strona FAQ dotycząca kodeksu postępowania oraz adres kontaktowy ( [email protected] ) w przypadku pytań lub problemów.
Dla osób chcących aktywnie współpracować, plik CONTRIBUTING.md opisuje, jak proponować zmiany, przesyłać materiały i zgłaszać problemy . Szczegółowo opisuje zalecany sposób pracy z gałęziami, przepływ pracy podczas przeglądu kodu oraz inne praktyczne aspekty współpracy w projekcie.
Telemetria, prywatność i gromadzenie danych
Podobnie jak wiele innych nowoczesnych aplikacji, XAML Studio zawiera mechanizmy telemetryczne służące do zbierania informacji o użytkowaniu . Ich celem jest zrozumienie, które funkcje są najczęściej używane, jak aplikacja działa w przypadku dokumentów o różnych rozmiarach, a także jakie typy błędów występują najczęściej.
Dobra wiadomość jest taka, że sama aplikacja oferuje wyraźną kontrolę nad tymi danymi telemetrycznymi: na stronie ustawień, w sekcji Opinie , można zmienić opcję Dane diagnostyczne na „Nie”, aby wyłączyć zbieranie danych przez samą rozproszoną aplikację.
Warto zauważyć, że zgodnie z informacjami o projekcie App Center — platforma stanowiąca podstawę telemetrii — została wycofana, a w chwili obecnej aktywna telemetria nie jest używana w wersji v2, podczas gdy podejmowane są decyzje dotyczące alternatywnego rozwiązania w zakresie diagnostyki.
W każdym przypadku Microsoft oświadcza, że oprogramowanie może gromadzić informacje o korzystaniu z aplikacji, które mogą być wykorzystywane do ulepszania usług i produktów . Jeśli jako deweloper korzystasz z funkcji, które mogą gromadzić dane użytkowników końcowych (na przykład integracji usług we własnych aplikacjach), musisz przestrzegać obowiązującego prawa i udostępniać odpowiednie informacje i zasady dotyczące prywatności, podając w stosownych przypadkach odnośnik do oświadczenia o ochronie prywatności firmy Microsoft.
Marka, logo i używanie znaków towarowych
Repozytorium i sama aplikacja mogą zawierać znaki towarowe i logo firmy Microsoft lub innych podmiotów zewnętrznych. Projekt wyraźnie zaznacza, że korzystanie z tych znaków towarowych podlega oficjalnym wytycznym firmy Microsoft dotyczącym marki.
Jeśli zdecydujesz się na stworzenie zmodyfikowanych wersji projektu lub alternatywnych dystrybucji, musisz to zrobić w sposób, który nie będzie wprowadzał w błąd ani nie będzie sugerował oficjalnego sponsorowania przez firmę Microsoft, gdy taka relacja nie istnieje. Zasada ta jest szczególnie ważna w przypadku redystrybucji plików binarnych lub integracji części projektu z produktami komercyjnymi.
Podobnie wszelkie loga i znaki towarowe stron trzecich użyte w kodzie podlegają zasadom tych stron trzecich, dlatego zaleca się zapoznanie się z tymi kwestiami, jeśli zamierzasz wykorzystać duże fragmenty aplikacji we własnych publicznych projektach.
Kontekst: Frustracja projektantami Visual Studio i wartość XAML Studio
Udostępnienie XAML Studio jako projektu open source nastąpiło w momencie, gdy wielu programistów wyrażało niezadowolenie z wizualnych możliwości Visual Studio . Problemy z wydajnością, awarie, niespójne działanie i trudności z debugowaniem złożonych kodów XAML były powracającymi skargami.
W tym scenariuszu XAML Studio jest postrzegane jako swego rodzaju zawór bezpieczeństwa: lekkie narzędzie, skoncentrowane na projektowaniu i testowaniu XAML, które redukuje część tarcia tradycyjnego cyklu edycji-kompilacji-uruchomienia. Nie ma ono na celu zastąpienia Visual Studio, a raczej uzupełnienia jego kompetencji w obszarze, w którym jest ono najbardziej problematyczne: szybkiej iteracji interfejsu.
To podejście jest również zgodne z oczekiwaniami osób uczących się technologii takich jak WinUI, WPF czy UWP. Dla wielu osób łączenie plików .sln, złożonych konfiguracji i pakowanie ich w pliki wykonywalne może być prawdziwym bólem głowy, zwłaszcza na początku. Samodzielne narzędzie skupiające się wyłącznie na warstwie XAML znacznie ułatwia naukę i eksperymentowanie.
Krótko mówiąc, XAML Studio znalazło swoją niszę jako wysoko ceniona aplikacja dla tych, którzy poświęcają znaczną część swojego czasu na tworzenie i udoskonalanie interfejsów użytkownika w ekosystemie Windows. Oferuje ono bardziej elastyczne i mniej kłopotliwe środowisko do codziennego manipulowania językiem XAML.
Dla każdego, kto zaczyna przygodę z C#, WPF, UWP lub WinUI, albo dla tych, którzy mają już siwe włosy w XAML, ale wciąż zmagają się z powolnym testowaniem i niejasnym debugowaniem, posiadanie pod ręką narzędzia takiego jak XAML Studio oznacza znaczącą zmianę w podejściu do prototypowania , debugowania złożonych powiązań i walidacji projektów przed ich zintegrowaniem z dużymi projektami — wszystko to z elastycznością projektu open source i spokojem ducha wynikającym z możliwości kontrolowania tego, jakie dane są współdzielone i jak są wykorzystywane.