XAML-code-editor

De XAML-code-editor in de Visual Studio IDE- bevat alle hulpprogramma's die u nodig hebt om WPF- en UWP-apps voor het Windows-platform te maken, en voor Xamarin.Forms of .NET MAUI. Dit artikel bevat een overzicht van de rol die de code-editor speelt bij het ontwikkelen van op XAML gebaseerde apps en de functies die uniek zijn voor de XAML-code-editor in Visual Studio 2019.

Laten we eerst eens kijken naar de IDE (integrated development environment) met een open WPF-project. In de volgende afbeelding ziet u verschillende van de belangrijkste IDE-hulpprogramma's die u samen met de XAML-code-editor gaat gebruiken.

Vanaf linksonder in de afbeelding, met de klok mee, zijn de belangrijkste IDE-hulpprogramma's als volgt:

• Het XAML-code-editor venster, het onderwerp van dit artikel, waarin u uw code maakt en bewerkt.
• Het XAML Designer-venster, waarin u de gebruikersinterface ontwerpt.
• Het Toolbox koppelvenster, waar u besturingselementen aan uw UI toevoegt.
• De Debug-knop, waar u uw code uitvoert en fouten opspoort.
  (U kunt uw code ook in realtime bewerken terwijl u fouten opspoort met XAML Hot Reload-.)
• Het Solution Explorer-venster, waarin u uw bestanden, projecten en oplossingen beheert.
• In het venster Eigenschappen wijzigt u de manier waarop uw gebruikersinterface eruitziet en hoe de besturingselementen voor de gebruikersinterface werken.

Laten we verdergaan met de XAML-code-editor.

Gebruikersinterface van XAML-code-editor

Hoewel het venster van de code-editor voor XAML-apps enkele UI-elementen (gebruikersinterface) deelt die ook worden weergegeven in onze standaard-IDE, bevat het ook enkele unieke functies waarmee het ontwikkelen van XAML-apps eenvoudiger wordt.

Hier volgt een overzicht van het venster van de XAML-code-editor zelf.

Laten we nu eens kijken naar de functies van elk van de UI-elementen in de code-editor.

Eerste rij

In de eerste rij boven aan het XAML-codevenster, aan de linkerkant, bevindt zich een tabblad Ontwerpen, een knop Deelvensters wisselen, een tabblad XAML, en een knop Pop Out XAML.

Dit werkt als volgt:

• Het tabblad Ontwerpen verandert de focus van de XAML-code-editor in de XAML Designer.
• Met de wisselvensters knop wordt de locatie van de XAML Designer en de XAML-code-editor in de IDE omgekeerd.
• Op het tabblad XAML wordt de focus teruggezet naar de XAML-code-editor.
• Met de pop-outknop XAML maakt u een afzonderlijk XAML-codeeditorvenster dat zich buiten de IDE bevindt.

Verder aan de rechterkant bevindt zich een knop Verticaal splitsen, een knop Horizontaal splitsen en een knop Deelvensters samenvouwen.

Dit werkt als volgt:

• Met de knop Verticaal splitsen verandert de locatie van de XAML Designer en de XAML-code-editor in de IDE van een horizontale uitlijning naar een verticale uitlijning.
• Met de knop Horizontaal splitsen wijzigt u de locatie van de XAML Designer en de XAML-code-editor in de IDE van een verticale uitlijning naar een horizontale uitlijning.
• Met de knop Deelvenster samenvouwen kunt u samenvouwen wat zich in het onderste deelvenster bevindt, ongeacht of dat de code-editor of de ontwerpfunctie is. (Als u het onderste deelvenster wilt herstellen, kiest u nogmaals dezelfde knop. Deze heeft nu de naam deelvenster uitvouwen knop.)

Tweede rij

In de tweede rij boven aan het XAML-codevenster zijn er twee vervolgkeuzelijsten voor vensters. Als u echter de Tooltips voor deze UI-elementen bekijkt, worden deze verder geïdentificeerd als het 'Element: Venster' en het 'Lid: Venster'.

De vervolgkeuzelijsten Vensters hebben de volgende functies:

• Het -element: Venster aan de linkerkant helpt u bij het weergeven en navigeren naar elementen op hetzelfde niveau of bovenliggende elementen.

  In het bijzonder ziet u een overzichtsweergave die de tagstructuur van uw code weergeeft. Wanneer u in de lijst selecteert, wordt de focus in de code-editor uitgelijnd op de coderegel die het element bevat dat u hebt geselecteerd.

  

• Het -lid: Het venster aan de rechterkant helpt u bij het weergeven en navigeren naar kenmerk- of onderliggende elementen.

  In het bijzonder ziet u een lijst met de eigenschappen in uw code. Wanneer u in de lijst selecteert, wordt de focus in de code-editor uitgelijnd op de coderegel die de eigenschap bevat die u hebt geselecteerd.

  

Middelste deelvenster, code-editor

Het middelste deelvenster is het onderdeel 'code' van de XAML-code-editor. Het bevat de meeste functies die u vindt in de IDE-code-editor. We zullen enkele van de universele IDE-functies aanraken waarmee u uw XAML-code kunt ontwikkelen. We zullen ook de specifieke XAML-functies in de IDE benadrukken.

Snelle acties

U kunt Snelle acties gebruiken om code met één actie te herstructureren, genereren of anderszins te wijzigen.

Een handige taak die u kunt uitvoeren met snelle acties, is bijvoorbeeld om onnodige verwijderen uit de C#-code op het tabblad MainWindow.xaml.cs te.

U doet dit als volgt:

1. Beweeg de muisaanwijzer over een using-verklaring, kies het gloeilamppictogram en kies vervolgens Onnodig gebruik verwijderen uit de keuzelijst.

   

2. Kies of u alle exemplaren in het Document, het Projectof de Oplossingwilt herstellen.

3. Bekijk het dialoogvenster Voorbeeld van en kies vervolgens toepassen.

U kunt deze functie ook openen via de menubalk. Kies hiervoor Bewerken>IntelliSense>Verwijderen en sorteren met behulp van.

Zie de pagina Sorteren met behulp van voor meer informatie over het gebruik van instellingen. Zie de pagina IntelliSense in Visual Studio voor meer informatie over IntelliSense. Zie de pagina Algemene snelle acties voor meer informatie over enkele van de gebruikelijke manieren waarop ontwikkelaars Snelle acties gebruiken.

Wijzigingen bijhouden

Met de kleur van de linkermarge kunt u de wijzigingen bijhouden die u in een bestand hebt aangebracht. De kleuren hebben als volgt betrekking op de acties die u uitvoert:

• Wijzigingen die u hebt aangebracht sinds het bestand is geopend, maar niet zijn opgeslagen, worden aangeduid met een gele balk aan de linkerkant (ook wel de selectiemarge genoemd).

  

• Nadat u de wijzigingen hebt opgeslagen (maar voordat u het bestand sluit), wordt de balk groene.

  

Als u deze functie wilt in- en uitschakelen, wijzigt u de optie Wijzigingen bijhouden in de instellingen van Teksteditor (Extra>Opties>Teksteditor).

Raadpleeg de Editor-functies sectie van de Functies van de Visual Studio-code-editor pagina voor meer informatie over het bijhouden van wijzigingen, inclusief de golvende lijnen (ook wel 'squiggles' genoemd) die onder codetekenreeksen verschijnen.

Contextmenu met de rechtermuisknop

Wanneer u uw code bewerkt in de XAML-code-editor, zijn er verschillende functies die u kunt openen met behulp van het snelmenu. De meeste van deze functies zijn universeel beschikbaar in de Visual Studio IDE, terwijl sommige specifiek zijn voor het gebruik van een code-editor samen met een ontwerpvenster.

Hier ziet u wat elke functie doet en hoe deze nuttig is:

• Code weergeven : hiermee opent u het codevenster van de programmeertaal. Dit venster wordt meestal op tabbladen naast de standaardweergave weergegeven met het venster Ontwerpen en de XAML-code-editor.
• View Designer - Hiermee opent u de standaardweergave met het venster Ontwerpen en de XAML-code-editor. (Als u zich al in de standaardweergave bevindt, gebeurt er niets.)
• Snelle acties en herstructureringen: code herstructureren, genereren of anderszins wijzigen met één actie. Wanneer u de muisaanwijzer over code beweegt, ziet u een gloeilamppictogram wanneer er een snelle actie of herstructurering beschikbaar is.
  Zie ook: Snelle acties en code herstructureren.
• Naamwijziging... - Wijzigt alleen naamruimten. Als u geen naamruimte hebt om de naam te wijzigen, krijgt u een foutbericht met de tekst 'Alleen naamruimtevoorvoegsels kunnen worden gewijzigd'.
• Naamruimten verwijderen en sorteren: verwijdert ongebruikte naamruimten en sorteert deze naamruimten die blijven.
• Definitie bekijken: bekijkt een voorbeeld van de definitie van een type zonder de huidige locatie in de editor te verlaten.
  Zie ook: Definitie bekijken en Code weergeven en bewerken met behulp van Definitie bekijken.
• Naar definitie gaan : hiermee gaat u naar de bron van een type of lid en wordt het resultaat geopend op een nieuw tabblad.
  Zie ook: Naar definitie gaan.
• Surround met... - Gebruik surround-with-codefragmenten die worden toegevoegd rond een geselecteerd codeblok.
  Zie ook: uitbreidingsfragmenten en omring-met-fragmenten.
• Fragment invoegen - Hiermee voegt u een codefragment in op de cursorlocatie.
• Snijden - Zelfverklarend
• Kopiëren - Zelfverklarend
• Plak - Zelfverklarend
• Structureren - Secties van code uit- en invouwen.
  Zie ook: schets.
• broncodebeheer: bekijk de geschiedenis van codebijdragen aan een opensource-opslagplaats.

Middelste deelvenster, schuifbalk

De schuifbalk kan meer doen dan door uw code schuiven. U kunt het ook gebruiken om een ander deelvenster van de code-editor te openen. En u kunt de schuifbalk gebruiken om u te helpen efficiënter code te coden door er aantekeningen aan toe te voegen of door verschillende weergavemodi te gebruiken.

Het codevenster splitsen

Rechtsboven in de schuifbalk van de code-editor bevindt zich een knop Splitsen. Wanneer u deze optie kiest, kunt u een ander deelvenster van de code-editor openen. Dit is handig omdat ze onafhankelijk van elkaar werken, zodat u ze kunt gebruiken om op verschillende locaties aan code te werken.

Zie de pagina Editorvensters beheren voor meer informatie over het splitsen van een editorvenster.

Aantekeningen of kaartmodus gebruiken

U kunt ook wijzigen hoe de schuifbalk eruitziet en welke extra functies deze bevat. Veel mensen willen bijvoorbeeld aantekeningen opnemen in de scrollbalk, die visuele aanwijzingen bieden zoals codewijzigingen, onderbrekingspunten, bladwijzers, fouten en cursormarkering.

Anderen waarderen het gebruik van kaartmodus, waarin regels code in miniatuur op de schuifbalk worden weergegeven. Ontwikkelaars die veel code in een bestand hebben, kunnen merken dat de kaartmodus effectiever aansluit bij de regels code dan in de standaard schuifbalk.

Zie de De schuifbalk aanpassen pagina voor meer informatie over het wijzigen van de standaardinstellingen van de schuifbalk.

XAML-specifieke functies

De meeste van de volgende functies zijn universeel beschikbaar in de Visual Studio IDE, maar er zijn dimensies toegevoegd aan sommige functies die het coderen eenvoudiger maken voor XAML-ontwikkelaars.

XAML-codefragmenten

Codefragmenten zijn kleine blokken herbruikbare code die u in een codebestand kunt invoegen met behulp van de snelmenuopdracht Fragment invoegen of een combinatie van sneltoetsen (Ctrl+K, Ctrl+X). We hebben IntelliSense- uitgebreid, zodat deze ondersteuning biedt voor het weergeven van XAML-fragmenten, die werken voor zowel ingebouwde fragmenten als aangepaste fragmenten die u handmatig toevoegt. Sommige gebruiksklare XAML-fragmenten bevatten #region, Column definition, Row definition, Setteren Tag.

Zie de Codefragmenten en C#-codefragmenten pagina's voor meer informatie.

Ondersteuning voor XAML-#region

In Visual Studio is #region ondersteuning beschikbaar voor XAML-ontwikkelaars in WPF, UWP, Xamarin.Formsen .NET MAUI. In Visual Studio 2019 blijven we stapsgewijze verbeteringen aanbrengen in de ondersteuning voor #region. In versie 16.4 en hoger worden #region opties bijvoorbeeld weergegeven terwijl u <!begint te typen.

U kunt regio's gebruiken als u secties van uw code wilt groeperen die u ook wilt uitvouwen of samenvouwen.

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

Zie de pagina #region (C#-verwijzing) voor meer informatie over regio's. Zie voor meer informatie over het uitbreiden en samenvouwen van codegedeelten de pagina Overzicht van.

XAML-opmerkingen

Ontwikkelaars geven er vaak de voorkeur aan om hun code te documenteren met behulp van opmerkingen. U kunt opmerkingen toevoegen aan de XAML-code op de volgende manieren op het tabblad MainWindow.xaml:

• Voer <!-- in vóór een opmerking en voeg --> toe na de opmerking.

• Voer <! in en kies !-- in de lijst met opties.

  

• Selecteer code die u wilt omsluiten met een opmerking en kies vervolgens de knop Opmerking op de werkbalk in de IDE. Als u de actie wilt omkeren, kiest u de knop opmerking verwijderen.

  

• Selecteer de code die u wilt omsluiten met een opmerking en druk vervolgens op Ctrl+K, Ctrl+C-. Als u opmerkingen bij geselecteerde code wilt verwijderen, drukt u op Ctrl+K, Ctrl+U-.

Zie de pagina Documentatieopmerkingen voor meer informatie over het gebruik van opmerkingen in de C#-code op het tabblad MainWindow.xaml.cs.

XAML gloeilampen

Gloeilamppictogrammen die in uw XAML-code worden weergegeven, maken deel uit van de Snelle acties die u kunt gebruiken om code te herstructureren, genereren of anderszins te wijzigen.

Hier volgen enkele voorbeelden van hoe ze kunnen profiteren van uw XAML-coderingservaring:

• Overbodige naamruimten verwijderen. In de XAML-code-editor worden overbodige naamruimten weergegeven in grijs weergegeven tekst. Als u de cursor boven een onnodige 'using' plaatst, verschijnt er een gloeilampje. Wanneer u de optie Onnodige naamruimten verwijderen in de vervolgkeuzelijst kiest, ziet u een voorbeeld van de naam die u kunt verwijderen.

  

• naamruimtenaam wijzigen. Met deze functie, die beschikbaar is in het snelmenu met de rechtermuisknop nadat u een naamruimte hebt gemarkeerd, kunt u eenvoudig meerdere exemplaren van een instelling tegelijk wijzigen. U kunt deze functie ook openen met behulp van de menubalk, Bewerken>Herstructureren>herstructurerenof door op Ctrl+R-te drukken en vervolgens Ctrl+R- opnieuw.

  

  Zie de pagina Hernoem een codesymbool refactoren voor meer informatie.

Voorwaardelijke XAML voor UWP

Voorwaardelijk XAML biedt een manier om de methode ApiInformation.IsApiContractPresent te gebruiken in XAML-opmaak. Hiermee kunt u eigenschappen instellen en objecten instantiëren in markeringen op basis van de aanwezigheid van een API zonder code achter te hoeven gebruiken.

Zie voor meer informatie de pagina Voorwaardelijke XAML en de pagina UWP XAML-besturingselementen hosten in bureaublad-apps (XAML-eilanden).

XAML-structuur visualiseren

De functie Structure Visualizer in de code-editor toont structuurhulplijnen, die verticale stippellijnen zijn die overeenkomen met open en gesloten tag-elementen in uw code. Deze verticale lijnen maken het gemakkelijker om te zien waar logische blokken beginnen en eindigen.

Zie de pagina Navigate-code voor meer informatie.

IntelliCode voor XAML

Wanneer u een XAML-tag aan uw code toevoegt, begint u meestal met een haakje links <. Wanneer u die hoekhaak typt, wordt er een IntelliCode-menu weergegeven met een aantal van de populairste XAML-tags. Kies degene die je snel aan je code wilt toevoegen.

U kunt de IntelliCode-selecties herkennen, omdat deze boven aan de lijst worden weergegeven en als ster worden weergegeven.

Zie de pagina Overzicht van IntelliCode voor meer informatie.

Instellingen

Voor meer informatie over alle instellingen in de Visual Studio IDE, zie de functies van de code-editor pagina.

Optionele XAML-instellingen

U kunt het dialoogvenster Opties gebruiken om de standaardinstellingen voor de XAML-code-editor te wijzigen. Om de instellingen te bekijken, kiest u Extra>Opties>Teksteditor>XAML.

Opties voor universele teksteditor

In het dialoogvenster Opties voor XAML zijn de volgende drie items universeel voor alle programmeertalen die de Visual Studio IDE ondersteunt. Ga naar de gekoppelde informatie in de volgende tabel voor meer informatie over deze opties en hoe u deze kunt gebruiken.

Opties voor XAML-specifieke teksteditor

De volgende tabel bevat de instellingen in het dialoogvenster Opties waarmee u uw bewerkingservaring kunt verbeteren wanneer u op XAML gebaseerde apps ontwikkelt. Ga naar de gekoppelde informatie voor meer informatie over deze opties en hoe u deze kunt gebruiken.

Volgende stappen

Zie de pagina XAML Hot Reload voor meer informatie over het bewerken van uw code in realtime terwijl u uw app uitvoert in de foutopsporingsmodus.

Zie ook

• Functies van de Visual Studio-code-editor
• XAML in UWP-apps
• XAML in Xamarin.Forms-apps
• XAML in .NET MAUI-apps