Edytor kodu XAML

Edytor kodu XAML w środowisku IDE programu Visual Studio zawiera wszystkie narzędzia potrzebne do tworzenia aplikacji WPF i UWP dla platformy Windows oraz platformy Xamarin.Forms lub .NET MAUI. W tym artykule opisano zarówno rolę, jaką odgrywa edytor kodu podczas opracowywania aplikacji opartych na języku XAML, jak i funkcji unikatowych dla edytora kodu XAML w programie Visual Studio 2019.

Aby rozpocząć, przyjrzyjmy się środowisku IDE (zintegrowanemu środowisku projektowemu) z otwartym projektem WPF. Na poniższej ilustracji przedstawiono kilka kluczowych narzędzi IDE używanych wraz z edytorem kodu XAML.

W lewym dolnym rogu obrazu w kierunku wskazówek zegara kluczowe narzędzia IDE są następujące:

• Okno edytora kodu XAML — temat tego artykułu — w którym tworzysz i edytujesz kod.
• Okno projektanta XAML , w którym projektujesz interfejs użytkownika.
• Okno narzędziowe dokujące, w którym można dodawać kontrolki do interfejsu użytkownika.
• Przycisk Debuguj , w którym uruchamiasz kod i debugujesz go.
  (Możesz również edytować kod w czasie rzeczywistym podczas debugowania za pomocą przeładowywania kodu XAML na gorąco).
• Okno Eksplorator rozwiązań , w którym zarządzasz plikami, projektami i rozwiązaniami.
• Okno Właściwości , w którym zmieniasz sposób wyglądu interfejsu użytkownika i sposób działania kontrolek interfejsu użytkownika.

Aby kontynuować, dowiedzmy się więcej o edytorze kodu XAML.

Interfejs użytkownika edytora kodu XAML

Chociaż okno edytora kodu dla aplikacji XAML udostępnia niektóre elementy interfejsu użytkownika (interfejs użytkownika), które są również wyświetlane w naszym standardowym środowisku IDE, zawiera również kilka unikatowych funkcji, które ułatwiają tworzenie aplikacji XAML.

Oto spojrzenie na okno edytora kodu XAML.

Następnie przyjrzyjmy się funkcjom poszczególnych elementów interfejsu użytkownika w edytorze kodu.

Pierwszy wiersz

W pierwszym wierszu w górnej części okna kodu XAML po lewej stronie znajduje się karta Projekt, przycisk Zamiana paneli, karta XAML i przycisk Otwórz w nowym oknie XAML.

Oto jak działają:

• Karta Projektowanie zmienia fokus z edytora kodu XAML na projektanta XAML.
• Przycisk Zamień okienka zamienia miejscami projektanta XAML i edytor kodu XAML w środowisku IDE.
• Karta XAML zmienia fokus z powrotem na edytor kodu XAML.
• Przycisk Wyodrębnij XAML tworzy oddzielne okno edytora kodu XAML, które znajduje się poza środowiskiem IDE.

Po prawej stronie znajduje się przycisk Podział pionowy , przycisk Podział poziomy i przycisk Zwiń okienka .

Oto jak działają:

• Przycisk Podział pionowy zmienia lokalizację projektanta XAML i edytora kodu XAML w środowisku IDE z wyrównania poziomego do wyrównania w pionie.
• Przycisk Podział poziomy zmienia lokalizację projektanta XAML i edytora kodu XAML w środowisku IDE z wyrównania w pionie do wyrównania w poziomie.
• Przycisk Zwiń okienko umożliwia zwinięcie tego, co znajduje się w dolnym okienku, niezależnie od tego, czy jest to edytor kodu, czy projektant. (Aby przywrócić dolne okienko, ponownie wybierz ten sam przycisk, który ma teraz nazwę rozwiń okienko ).

Drugi wiersz

W drugim wierszu w górnej części okna kodu XAML znajdują się dwie listy rozwijane Okna. Jeśli jednak wyświetlisz etykietkę narzędzia dla tych elementów interfejsu użytkownika, będzie ona dalej identyfikować je jako "Element: Okno" i "Członek: Okno".

Listy rozwijane okna mają różne funkcje, jak poniżej:

• Element: Okno po lewej stronie ułatwia wyświetlanie i przechodzenie do elementów równorzędnych lub nadrzędnych.

  W szczególności pokazuje on widok podobny do konspektu, który ujawnia strukturę tagów kodu. Po wybraniu z listy fokus w edytorze kodu jest przyciągany do wiersza kodu zawierającego wybrany element.

  

• Członek: okno po prawej stronie ułatwia wyświetlanie i przechodzenie do atrybutów lub elementów podrzędnych.

  Specyficznie, pokazuje listę właściwości w twoim kodzie. Po wybraniu z listy fokus w edytorze kodu jest przyciągany do wiersza kodu zawierającego wybraną właściwość.

  

Środkowe okienko, edytor kodu

Środkowe okienko jest częścią "kodu" edytora kodu XAML. Zawiera większość funkcji, które można znaleźć w edytorze kodu IDE. Omówimy kilka uniwersalnych funkcji środowiska IDE, które mogą pomóc w opracowaniu kodu XAML. Wyróżnimy również unikatowe funkcje XAML w środowisku IDE.

Szybkie akcje

Szybkie akcje umożliwiają refaktoryzację, generowanie lub modyfikowanie kodu za pomocą jednej akcji.

Na przykład jednym z przydatnych zadań, które można wykonać za pomocą funkcji Szybkie akcje, jest usunięcie niepotrzebnych poleceń z kodu języka C# na karcie MainWindow.xaml.cs .

Oto, jak to zrobić:

1. Umieść kursor na instrukcji using, wybierz ikonę żarówki, a następnie wybierz pozycję Usuń niepotrzebne użycie z listy rozwijanej.

   

2. Wybierz, czy chcesz naprawić wszystkie wystąpienia w dokumencie, projekcie, czy rozwiązaniu.

3. Wyświetl okno dialogowe Podgląd , a następnie wybierz pozycję Zastosuj.

Dostęp do tej funkcji można również uzyskać na pasku menu. W tym celu wybierz pozycję Edytuj>IntelliSense>Usuń i posortuj usingi.

Aby uzyskać więcej informacji na temat używania ustawień, zobacz stronę Sortuj przy użyciu. Aby uzyskać więcej informacji na temat funkcji IntelliSense, zobacz stronę IntelliSense w programie Visual Studio . Aby uzyskać więcej informacji na temat niektórych typowych sposobów korzystania przez deweloperów z funkcji Szybkie akcje, zobacz stronę Typowe szybkie akcje .

Śledzenie zmian

Kolor lewego marginesu umożliwia śledzenie zmian wprowadzonych w pliku. Oto jak kolory odnoszą się do akcji, które podejmujesz:

• Zmiany wprowadzone od czasu otwarcia pliku, ale nie zostały zapisane, są oznaczone żółtym paskiem na lewym marginesie (znanym jako margines zaznaczenia).

  

• Po zapisaniu zmian (ale przed zamknięciem pliku) pasek zmieni kolor na zielony.

  

Tę funkcję można wyłączyć i włączyć w okienku Opcje narzędzi>. Rozwiń sekcjęOgólne> tekstu > i zaznacz lub wyczyść pole wyboru Śledź zmiany.

Aby uzyskać więcej informacji na temat śledzenia zmian — w celu uwzględnienia falistych wierszy (nazywanych również "zygzakami"), które są wyświetlane w obszarze ciągów kodu, zobacz sekcję Funkcje edytora na stronie Funkcje edytora programu Visual Studio Code .

Menu kontekstowe kliknij prawym przyciskiem myszy

Podczas edytowania kodu w edytorze kodu XAML istnieje kilka funkcji, do których można uzyskać dostęp, korzystając z menu kontekstowego dostępnego po kliknięciu prawym przyciskiem myszy. Większość z tych funkcji jest dostępna powszechnie w środowisku IDE programu Visual Studio, a niektóre są specyficzne dla korzystania z edytora kodu wraz z oknem Projekt.

Oto, co robi każda funkcja i jak jest przydatna:

• Wyświetl kod — otwiera okno kodu języka programowania, które jest zwykle kartowane obok widoku domyślnego, który zawiera okno Projekt i edytor kodu XAML.
• Projektant widoków — otwiera widok domyślny zawierający okno Projekt i edytor kodu XAML. (Jeśli jesteś już w widoku domyślnym, nic nie robi).
• Szybkie akcje i refaktoryzacje — refaktoryzacja, generowanie lub zmienianie kodu za pomocą jednej czynności. Po umieszczeniu wskaźnika myszy na kodzie zobaczysz ikonę żarówki, gdy dostępna jest szybka akcja lub refaktoryzacja.
  Zobacz również: Szybkie akcje i kod refaktoryzacji.
• Zmień nazwę... — Zmienia nazwy tylko przestrzeni nazw. Jeśli nie masz przestrzeni nazw do przemianowania, zostanie wyświetlony komunikat o błędzie z treścią "Można przemianować tylko prefiksy przestrzeni nazw".
• Usuń i sortuj przestrzenie nazw — usuwa nieużywane przestrzenie nazw, a następnie sortuje te przestrzenie nazw, które pozostają.
• Podgląd definicji — wyświetla podgląd definicji typu bez opuszczania bieżącej lokalizacji w edytorze.
  Zobacz również: Zobacz definicję i wyświetlanie i edytowanie kodu przy użyciu funkcji Zobacz definicję.
• Przejdź do definicji — przechodzi do źródła typu lub elementu członkowskiego i otwiera wynik na nowej karcie.
  Zobacz również: Przejdź do definicji.
• Otocz z... — Użyj fragmentów kodu, które są dodawane wokół wybranego bloku kodu.
  Zobacz również: Fragmenty kodu rozszerzenia i otaczające fragmenty kodu.
• Wstaw fragment kodu — wstawia fragment kodu w lokalizacji kursora.
• Wytnij — oczywiste
• Kopiuj - Samoobjaśniające
• Wklej — jasne samo przez się
• Zarysowanie — rozwiń i zwiń sekcje kodu.
  Zobacz również: Strukturyzowanie.
• Kontrola źródła — wyświetlanie historii współtworzenia kodu w repozytorium open source.

Okienko środkowe, pasek przewijania

Pasek przewijania może robić więcej niż tylko przewijać kod. Można go również użyć do otwarcia innego okienka edytora kodu. Możesz też użyć paska przewijania, aby wydajniej kodować, dodając do niego adnotacje lub używając różnych trybów wyświetlania.

Dzielenie okna kodu

Na pasku przewijania edytora kodu znajduje się przycisk Podziel w prawym górnym rogu. Po jego wybraniu możesz otworzyć inne okienko edytora kodu. Jest to przydatne, ponieważ działają niezależnie od siebie, dzięki czemu można ich używać do pracy nad kodem w różnych lokalizacjach.

Aby uzyskać więcej informacji na temat dzielenia okna edytora, zobacz stronę Zarządzanie oknami edytora .

Używanie adnotacji lub trybu mapy

Możesz również zmienić wygląd paska przewijania i inne funkcje, które zawiera. Przykładowo wiele osób lubi dołączać adnotacje na pasku przewijania, które zapewniają wskazówki wizualne, takie jak zmiany kodu, punkty przerwania, zakładki, błędy i pozycja kursora.

Inni doceniają korzystanie z trybu mapy, który wyświetla wiersze kodu w miniaturze na pasku przewijania. Deweloperzy, którzy pracują z dużymi plikami kodu, mogą stwierdzić, że tryb mapy śledzi wiersze kodu wydajniej niż domyślny pasek przewijania.

Aby uzyskać więcej informacji na temat zmieniania domyślnych ustawień paska przewijania, zobacz stronę Dostosowywanie paska przewijania .

Funkcje specyficzne dla języka XAML

Większość poniższych funkcji jest powszechnie dostępna w środowisku IDE programu Visual Studio, ale do niektórych z nich są dodawane wymiary, które ułatwiają kodowanie deweloperom XAML.

Fragmenty kodu XAML

Fragmenty kodu to małe bloki kodu wielokrotnego użytku, które można wstawić do pliku kodu za pomocą polecenia menu kontekstowego po kliknięciu prawym przyciskiem myszy Wstaw fragment kodu lub kombinację skrótów klawiaturowych (Ctrl+, Ctrl+X). Funkcja IntelliSense obsługuje teraz wyświetlanie fragmentów kodu XAML, które działają zarówno dla wbudowanych fragmentów kodu, jak i wszystkich niestandardowych fragmentów kodu, które zostały dodane ręcznie. Niektóre gotowe fragmenty kodu XAML obejmują #region, , Column definition, Row definition, Setteri Tag.

Aby uzyskać więcej informacji, zobacz strony Fragmenty kodu i Fragmenty kodu w języku C# .

Obsługa XAML #region

W programie Visual Studio obsługa #region jest dostępna dla deweloperów XAML w środowiskach WPF, UWP, Xamarin.Forms i .NET MAUI. W programie Visual Studio 2019 nadal wprowadzamy stopniowe usprawnienia w obsłudze #region. Na przykład w wersji 16.4 lub nowszej opcje #region są wyświetlane podczas wpisywania ciągu <!.

Możesz użyć regionów, gdy chcesz grupować sekcje kodu, które również chcesz rozwinąć lub zwinąć.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Aby uzyskać więcej informacji na temat regionów, zobacz stronę #region (Odniesienie do C#). Aby uzyskać więcej informacji na temat rozszerzania i zwijania sekcji kodu, zapoznaj się ze stroną Outlining.

Komentarze XAML

Deweloperzy często wolą dokumentować swój kod przy użyciu komentarzy. Komentarze można dodać do kodu XAML znajdującego się na karcie MainWindow.xaml w następujący sposób:

• Wprowadź <!-- przed komentarzem, a następnie dodaj --> po komentarzu.

• Wprowadź <! i wybierz !-- z listy opcji.

  

• Wybierz kod, który chcesz otaczać komentarzem, a następnie wybierz przycisk Komentarz na pasku narzędzi w środowisku IDE. Aby cofnąć akcję, wybierz przycisk Usuń komentarz .

  

• Wybierz kod, który chcesz otaczać komentarzem, a następnie naciśnij Ctrl+, Ctrl+C. Aby usunąć komentarz z zaznaczonego kodu, naciśnij Ctrl+K, Ctrl+U.

Aby uzyskać więcej informacji na temat używania komentarzy w kodzie języka C#, który znajduje się na karcie MainWindow.xaml.cs , zobacz stronę Komentarze do dokumentacji .

Żarówki XAML

Ikony żarówki wyświetlane w kodzie XAML są częścią szybkich akcji , których można użyć do refaktoryzacji, generowania lub modyfikowania kodu w inny sposób.

Oto kilka przykładów, w jaki sposób mogą one przynieść korzyści środowisku kodowania XAML:

• Usuń niepotrzebne przestrzenie nazw. W edytorze kodu XAML niepotrzebne przestrzenie nazw są wyświetlane jako przyciemniony tekst. Jeśli umieścisz kursor na niepotrzebnym użyciu, pojawi się żarówka. Po wybraniu opcji Usuń niepotrzebne przestrzenie nazw z listy rozwijanej zostanie wyświetlony podgląd elementów, które można usunąć.

  

• Zmień nazwę przestrzeni nazw. Ta funkcja, dostępna w menu kontekstowym po kliknięciu prawym przyciskiem myszy po zaznaczeniu przestrzeni nazw, ułatwia zmianę wielu wystąpień ustawienia w tym samym czasie. Dostęp do tej funkcji można również uzyskać, używając paska menu, Edytuj>Refaktoryzuj>Zmień nazwę, lub naciskając Ctrl+R, a następnie ponownie Ctrl+R.

  

  Aby uzyskać więcej informacji, zobacz stronę Zmienianie nazwy symbolu kodu (refaktoryzacja).

Warunkowy kod XAML dla platformy UWP

Warunkowy kod XAML umożliwia użycie metody ApiInformation.IsApiContractPresent w znaczniku XAML. Dzięki temu można ustawić właściwości i zainicjować obiekty w znacznikach w oparciu o obecność interfejsu API, bez konieczności używania kodu.

Aby uzyskać więcej informacji, zobacz stronę Warunkowe XAML oraz stronę Hostuj kontrolki XAML platformy UWP w aplikacjach klasycznych (Wyspy XAML).

Wizualizator struktury XAML

Funkcja Wizualizacji Struktury w edytorze kodu pokazuje linie prowadzące struktury, które są pionowymi liniami przerywanymi, wskazującymi pasujące elementy otwarcia i zamknięcia tagów w kodzie. Te linie pionowe ułatwiają sprawdzenie, gdzie zaczynają się i kończą bloki logiczne.

Aby uzyskać więcej informacji, zobacz stronę Nawigowanie po kodzie .

IntelliCode dla języka XAML

Po dodaniu tagu XAML do kodu zazwyczaj zaczynasz od lewego nawiasu kątowego <. Po wpisaniu tego nawiasu kątowego zostanie wyświetlone menu IntelliCode z listą kilku bardziej popularnych tagów XAML. Wybierz ten, który chcesz szybko dodać do kodu.

Możesz rozpoznać opcje IntelliCode, ponieważ są one wyświetlane w górnej części listy i są wyświetlane jako wyróżnione.

Aby uzyskać więcej informacji, zobacz stronę Omówienie funkcji IntelliCode .

Ustawienia

Aby uzyskać więcej informacji na temat wszystkich ustawień w środowisku IDE programu Visual Studio, zobacz funkcje strony edytora kodu .

Ustawienia opcjonalne XAML

Możesz użyć okienka Opcje , aby zmienić ustawienia domyślne edytora kodu XAML. Aby wyświetlić ustawienia, otwórz okienko Narzędzia>Opcje i rozwiń sekcję Wszystkie ustawienia>Języki>XAML.

Uwaga / Notatka

Skróty klawiaturowe umożliwiają również dostęp do sekcji i ustawień w okienku Opcje . Naciśnij Ctrl+Q , aby wyszukać środowisko IDE, wpisz opcje, a następnie naciśnij Enter. Aby wyszukać listę opcji, naciśnij Ctrl+E, wpisz języki, naciśnij Enter, wpisz xaml, a następnie naciśnij Enter.

Aby uzyskać więcej informacji na temat skrótów klawiaturowych, zobacz stronę Wskazówki dotyczące skrótów dla programu Visual Studio .

Opcje edytora tekstu uniwersalnego

Pierwsze trzy sekcje opcji XAML zawierają ustawienia uniwersalne dla wszystkich języków programowania obsługiwanych przez środowisko IDE programu Visual Studio. Aby dowiedzieć się więcej o tych opcjach i sposobie ich używania, zobacz połączone informacje w poniższej tabeli.

Section	Lokalizacja
General	Okienko Opcje: wszystkie ustawienia, języki, ustawienia domyślne, ogólne
Paski przewijania	Opcje, Wszystkie ustawienia, Języki, Ustawienia domyślne, Paski przewijania
Karty	Opcje, wszystkie ustawienia, języki, ustawienia domyślne, karty

Opcje edytora tekstu specyficzne dla języka XAML

Poniższe sekcje opcji XAML są specyficzne dla języka XAML. Te ustawienia mogą poprawić środowisko edycji podczas tworzenia aplikacji opartych na języku XAML. Aby dowiedzieć się więcej o tych opcjach i sposobie ich używania, zobacz połączone informacje w poniższej tabeli.

Section	Lokalizacja
Formatting	Okienko Opcje: wszystkie ustawienia, języki, XAML, formatowanie
Miscellaneous	Opcje, wszystkie ustawienia, języki, XAML, różne

Wskazówka

Ustawienie nazwy metody obsługi zdarzeń capitalize w sekcji Różne jest szczególnie przydatne dla deweloperów XAML. To ustawienie jest domyślnie wyłączone, ponieważ jest nowe, ale sugerujemy ustawić je włączone, aby obsługiwać odpowiednią wielkość liter w kodzie.

Dalsze kroki

Aby dowiedzieć się więcej na temat edytowania kodu w czasie rzeczywistym podczas uruchomienia aplikacji w trybie debugowania, odwiedź stronę XAML Hot Reload.

Zobacz także

• Funkcje edytora programu Visual Studio Code
• XAML w aplikacjach platformy UWP
• XAML w aplikacjach platformy Xamarin.Forms
• XAML w aplikacjach .NET MAUI