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. 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, których będziesz używać 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 Projektant XAML, w którym projektujesz interfejs użytkownika.
- Okno Dokowania przybornika , 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ą polecenia Przeładowywanie na gorąco XAML). - 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 Projektowanie, przycisk Okienka wymiany, karta XAML i przycisk Wyskakującego kodu XAML.
Oto jak działają:
- Karta Projektowanie zmienia fokus z edytora kodu XAML na Projektant XAML.
- Przycisk Okienka wymiany odwraca lokalizację Projektant XAML i edytora kodu XAML w środowisku IDE.
- Karta XAML zmienia fokus z powrotem na edytor kodu XAML.
- Przycisk Wyskakujący kod 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ę Projektant XAML i edytora kodu XAML w środowisku IDE z wyrównania poziomego do wyrównania w pionie.
- Przycisk Podział poziomy zmienia lokalizację Projektant 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ń przycisk 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 "Element: okno".
Listy rozwijane Okna mają różne funkcje w następujący sposób:
Element: Okno po lewej stronie ułatwia wyświetlanie elementów równorzędnych lub nadrzędnych i przechodzenie do elementów 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 zostanie przyciągnięty do wiersza kodu zawierającego wybrany element.
Element członkowski: okno po prawej stronie ułatwia wyświetlanie i przechodzenie do atrybutu lub elementów podrzędnych.
W szczególności zostanie wyświetlona lista właściwości w kodzie. Po wybraniu z listy fokus w edytorze kodu zostanie przyciągnięty 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 znajdziesz 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ć:
Umieść kursor na instrukcji using, wybierz ikonę żarówki, a następnie wybierz pozycję Usuń niepotrzebne użycie z listy rozwijanej.
Wybierz, czy chcesz naprawić wszystkie wystąpienia w dokumencie, projekcie, czy rozwiązaniu.
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>funkcję IntelliSense>Usuń i sortuj przy użyciu.
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.
Aby wyłączyć i włączyć tę funkcję, zmień opcję Śledź zmiany w ustawieniach Edytora tekstu (Narzędzia>Opcje>Edytor tekstu).
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 funkcji na stronie edytora kodu programu Visual Studio.
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.
- Wyświetl Projektant — 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 — refaktoryzacje, generowanie lub modyfikowanie kodu w inny sposób za pomocą jednej akcji. 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. - Zmienić nazwę... — Zmienia tylko nazwy przestrzeni nazw. Jeśli nie masz przestrzeni nazw do zmiany nazwy, zostanie wyświetlony komunikat o błędzie z komunikatem "Można zmienić nazwy tylko prefiksów 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. - Otaczaj... — Użyj fragmentów kodu otoczego z fragmentami kodu, które są dodawane wokół wybranego bloku kodu.
Zobacz również: Fragmenty kodu rozszerzenia i pośród fragmentów kodu. - Wstaw fragment kodu — wstawia fragment kodu w lokalizacji kursora.
- Wytnij — objaśnienia
- Kopiowanie — objaśnienia
- Wklej — objaśnianie
- Konspektowanie — rozwiń i zwiń sekcje kodu.
Zobacz również: Konspektowanie. - Kontrola źródła — wyświetlanie historii współtworzenia kodu w repozytorium open source.
Środkowe okienko, pasek przewijania
Pasek przewijania może wykonywać więcej czynności niż 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 jakie dodatkowe funkcje zawiera. Na przykład 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 położenie karetki.
Inni doceniają korzystanie z trybu mapy, który wyświetla wiersze kodu w miniaturze na pasku przewijania. Deweloperzy, którzy mają dużo kodu w pliku, 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 K, Ctrl++X). Ulepszyliśmy funkcję IntelliSense tak, aby obsługiwała 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 #region XAML
W programie Visual Studio obsługa #region jest dostępna dla deweloperów XAML w środowiskach WPF, UWP i Xamarin.Forms. W programie Visual Studio 2019 nadal wprowadzamy przyrostowe ulepszenia obsługi #region. Na przykład w wersji 16.4 lub nowszej #region opcje są wyświetlane podczas wpisywania <!.
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 (odwołanie w C#). Aby uzyskać więcej informacji na temat rozszerzania i zwijania sekcji kodu, zobacz stronę konspektowania .
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 klawisze Ctrl K, Ctrl++C. Aby usunąć komentarz z zaznaczonego kodu, naciśnij klawisze Ctrl+K, Ctrl+U.
Aby uzyskać więcej informacji na temat używania komentarzy w kodzie C#, który znajduje się na karcie MainWindow.xaml.cs , zobacz stronę Komentarzy 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 w wygaszony 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, który można usunąć.
Zmień nazwę przestrzeni nazw. Ta funkcja, dostępna w menu kontekstowym prawym przyciskiem myszy po wyróżnieniu przestrzeni nazw, ułatwia zmianę wielu wystąpień ustawienia jednocześnie. Dostęp do tej funkcji można również uzyskać, używając paska menu, edytuj>nazwę refaktoryzatora>lub naciskając klawisze Ctrl+R, a następnie ponownie naciśnij klawisze Ctrl+R.
Aby uzyskać więcej informacji, zobacz stronę Refaktoryzacji zmienianie nazwy symbolu kodu.
Warunkowy kod XAML dla platformy UWP
Warunkowy kod XAML umożliwia użycie metody ApiInformation.IsApiContractPresent w znaczników XAML. Dzięki temu można ustawić właściwości i utworzyć wystąpienie obiektów w adiustacji na podstawie obecności interfejsu API bez konieczności używania kodu.
Aby uzyskać więcej informacji, zobacz stronę Warunkowe XAML i kontrolki XAML platformy UWP hosta w aplikacjach klasycznych (Wyspy XAML).
Wizualizator struktury XAML
Funkcja Wizualizator struktury w edytorze kodu pokazuje linie prowadnic struktury, które są pionowymi liniami przerywanym, które wskazują pasujące otwarte i zamknięte elementy tagu 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 wpiseniu 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ć okna dialogowego Opcje , aby zmienić ustawienia domyślne edytora kodu XAML. Aby wyświetlić ustawienia, wybierz pozycję Narzędzia>Opcje>Edytor>tekstu XAML.
Uwaga
Możesz również użyć skrótów klawiaturowych, aby uzyskać dostęp do okna dialogowego Opcje. Oto jak: naciśnij klawisze Ctrl+Q, aby wyszukać środowisko IDE, wpisz Opcje, a następnie naciśnij klawisz Enter. Następnie naciśnij klawisze Ctrl+E, aby wyszukać okno dialogowe Opcje, wpisz Edytor tekstów, naciśnij klawisz Enter, wpisz XAML, a następnie naciśnij klawisz 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
W oknie dialogowym Opcje dla języka XAML następujące trzy pierwsze elementy są uniwersalne dla wszystkich języków programowania obsługiwanych przez środowisko IDE programu Visual Studio. Zapoznaj się z połączonymi informacjami w poniższej tabeli, aby dowiedzieć się więcej o tych opcjach i sposobie ich używania.
| Nazwisko | Więcej informacji |
|---|---|
| Ogólne | Opcje — okno dialogowe: Edytor > tekstu — wszystkie języki |
| Paski przewijania | Opcje, Edytor tekstu, Wszystkie języki, Paski przewijania |
| Karty | Opcje, Edytor tekstów, Wszystkie języki, Karty |
Opcje edytora tekstu specyficzne dla języka XAML
W poniższej tabeli wymieniono ustawienia w oknie dialogowym Opcje , które mogą poprawić środowisko edycji podczas opracowywania aplikacji opartych na języku XAML. Odwiedź połączone informacje, aby dowiedzieć się więcej o tych opcjach i sposobie ich używania.
| Nazwisko | Więcej informacji |
|---|---|
| Formatowanie | Opcje, Edytor tekstów, XAML, Formatowanie |
| Różne | Opcje, Edytor tekstu, XAML, różne |
Napiwek
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, aby ustawić je na wartość włączone , aby obsługiwać odpowiednie wielkości liter w kodzie.
Następne kroki
Aby dowiedzieć się więcej na temat edytowania kodu w czasie rzeczywistym podczas uruchamiania aplikacji w trybie debugowania, zobacz stronę Przeładowywanie na gorąco XAML.