Maak een 'Hallo wereld!' UWP-app in C++/CX

Belangrijk

In deze zelfstudie wordt gebruikgemaakt van C++/CX. Microsoft heeft C++/WinRT uitgebracht: een volledig standaard moderne C++17-taalprojectie voor Windows Runtime -API's (WinRT). Zie C++/WinRT voor meer informatie over deze taal.

Met Microsoft Visual Studio kunt u C++/CX gebruiken om een app te ontwikkelen die wordt uitgevoerd in Windows met een gebruikersinterface die is gedefinieerd in Extensible Application Markup Language (XAML).

Opmerking

In deze zelfstudie wordt Visual Studio Community 2019 gebruikt. Als u een andere versie van Visual Studio gebruikt, ziet deze er mogelijk iets anders uit.

Voordat je begint

• Als u deze zelfstudie wilt voltooien, moet u Visual Studio Community of een van de niet-Community-versies van Visual Studio gebruiken op een computer met Windows. Voor downloaden, zie Download de hulpprogramma's.
• Als u wilt volgen, moet u basiskennis hebben van C++/CX, XAML en de concepten in het XAML-overzicht.
• Als u wilt volgen, moet u de standaardvensterindeling in Visual Studio gebruiken. Als u de standaardindeling opnieuw wilt instellen, kiest u op de menubalk de optie Venster>opnieuw instellen.

C++ desktop-apps vergelijken met UWP-apps

Als u afkomstig bent van een achtergrond in het programmeren van Windows-desktops in C++, zult u waarschijnlijk merken dat sommige aspecten van het schrijven van apps voor uw UWP bekend zijn, maar dat andere aspecten enige leertrajecten vereisen.

Wat is hetzelfde?

• U kunt de STL, de CRT (met enkele uitzonderingen) en elke andere C++-bibliotheek gebruiken zolang de code alleen Windows-functies aanroept die toegankelijk zijn vanuit de Windows Runtime-omgeving.

• Als u gewend bent aan visuele ontwerpoppervlakken, kunt u nog steeds de ontwerpfunctie gebruiken die is ingebouwd in Microsoft Visual Studio, of u kunt de meer full-featured Blend voor Visual Studio gebruiken. Als u gewend bent om de gebruikersinterface handmatig te coderen, kunt u uw XAML met de hand coderen.

• U maakt nog steeds apps die gebruikmaken van typen Windows-besturingssystemen en uw eigen aangepaste typen.

• U gebruikt nog steeds het Visual Studio-foutopsporingsprogramma, profiler en andere ontwikkelhulpprogramma's.

• U maakt nog steeds apps die zijn gecompileerd naar systeemeigen computercode door de Visual C++-compiler. UWP-apps in C++/CX worden niet uitgevoerd in een beheerde runtime-omgeving.

Wat is er nieuw?

• De ontwerpprincipes voor UWP-apps verschillen van die voor desktop-apps. Vensterranden, etiketten, dialoogvensters, enzovoort, worden minder benadrukt. Inhoud is vooral belangrijk. Geweldige UWP-apps bevatten deze principes vanaf het begin van de planningsfase.

• U gebruikt XAML om de volledige gebruikersinterface te definiëren. De scheiding tussen ui- en kernprogrammalogica is veel duidelijker in een UWP-app dan in een MFC- of Win32-app. Andere personen kunnen werken aan het uiterlijk van de gebruikersinterface in het XAML-bestand terwijl u aan het gedrag in het codebestand werkt.

• U programmeert voornamelijk met een nieuwe, eenvoudig te navigeren, objectgeoriënteerde API, de Windows Runtime, hoewel Win32 op Windows-apparaten nog steeds beschikbaar is voor bepaalde functionaliteit.

• U gebruikt C++/CX om Windows Runtime-objecten te gebruiken en te maken. Met C++/CX kunnen exceptionafhandeling, delegaten, gebeurtenissen en automatisch referentietellen van dynamisch gemaakte objecten worden uitgevoerd. Wanneer u C++/CX gebruikt, worden de details van de onderliggende COM- en Windows-architectuur verborgen in uw app-code. Zie C++/CX Language Reference voor meer informatie.

• Uw app wordt gecompileerd in een pakket dat ook metagegevens bevat over de typen die uw app bevat, de resources die de app gebruikt en de mogelijkheden die nodig zijn (bestandstoegang, internettoegang, cameratoegang, enzovoort).

• In de Microsoft Store en Windows Phone Store wordt uw app als veilig gecertificeerd door een certificeringsproces en wordt deze toegankelijk gemaakt voor miljoenen potentiële klanten.

Hello World Store-app in C++/CX

Onze eerste app is een 'Hallo wereld' die enkele basisfuncties van interactiviteit, indeling en stijlen demonstreert. We maken een app op basis van de projectsjabloon voor universele Windows-apps. Als u eerder apps voor Windows 8.1 en Windows Phone 8.1 hebt ontwikkeld, herinnert u zich misschien dat u drie projecten in Visual Studio, een voor de Windows-app, een voor de telefoon-app en een andere met gedeelde code moet hebben. Het Windows Universal Windows Platform (UWP) maakt het mogelijk om slechts één project te hebben, dat wordt uitgevoerd op alle apparaten, waaronder desktop- en laptopcomputers met Windows, apparaten zoals tablets, mobiele telefoons, VR-apparaten enzovoort.

We beginnen met de basisbeginselen:

• Een Universeel Windows-project maken in Visual Studio.

• Hoe u de projecten en bestanden begrijpt die worden gemaakt.

• Meer informatie over de extensies in Visual C++-onderdeelextensies (C++/CX) en wanneer u ze moet gebruiken.

Maak eerst een oplossing in Visual Studio

1. Kies in Visual Studio op de menubalk de optie Bestand>nieuw>project....

2. In het dialoogvenster Een nieuw project maken selecteert u Lege app (Universal Windows - C++/CX). Als u deze optie niet ziet, controleert u of de Universal Windows App Development Tools is geïnstalleerd. Zie Klaar maken voor meer informatie.

3. Kies Volgende en voer een naam in voor het project. We noemen het HelloWorld.

4. Kies de knop maken.

Opmerking

Als dit de eerste keer is dat u Visual Studio hebt gebruikt, ziet u mogelijk een dialoogvenster Instellingen waarin u wordt gevraagd om de ontwikkelaarsmodus in te schakelen. De ontwikkelaarsmodus is een speciale instelling waarmee bepaalde functies, zoals machtigingen voor het rechtstreeks uitvoeren van apps, in plaats van alleen vanuit de Store worden ingeschakeld. Voor meer informatie, lees Uw apparaat inschakelen voor ontwikkelingsdoeleinden. Als u wilt doorgaan met deze handleiding, selecteert u de ontwikkelaarsmodus, klikt u op Ja en sluit u het dialoogvenster.

Uw projectbestanden zijn gemaakt.

Voordat we verder gaan, gaan we kijken wat er in de oplossing zit.

Over de projectbestanden

Elk .xaml-bestand in een projectmap heeft een corresponderend .xaml.h-bestand en .xaml.cpp bestand in dezelfde map en een G-bestand en een G.hpp-bestand in de map Gegenereerde bestanden, die zich op schijf bevindt, maar geen deel uitmaakt van het project. U wijzigt de XAML-bestanden om UI-elementen te maken en deze te verbinden met gegevensbronnen (DataBinding). U wijzigt de .h- en .cpp-bestanden om aangepaste logica toe te voegen voor gebeurtenis-handlers. De automatisch gegenereerde bestanden vertegenwoordigen de transformatie van de XAML-markering in C++/CX. Wijzig deze bestanden niet, maar u kunt ze bestuderen om beter te begrijpen hoe de code-behind werkt. In principe bevat het gegenereerde bestand een gedeeltelijke klassedefinitie voor een XAML-hoofdelement; deze klasse is dezelfde klasse die u wijzigt in de bestanden *.xaml.h en .cpp. De gegenereerde bestanden declareren de onderliggende elementen van de XAML-gebruikersinterface als klasseleden, zodat u ernaar kunt verwijzen in de code die u schrijft. Tijdens het bouwen worden de gegenereerde code en uw code samengevoegd in een volledige klassedefinitie en vervolgens gecompileerd.

Laten we eerst de projectbestanden bekijken.

• App.xaml, App.xaml.h, App.xaml.cpp: Vertegenwoordig het toepassingsobject, het toegangspunt van een app. App.xaml bevat geen paginaspecifieke ui-markeringen, maar u kunt UI-stijlen en andere elementen toevoegen die u vanaf elke pagina toegankelijk wilt maken. De code-behind-bestanden bevatten handlers voor de onLaunched - en OnSuspending-gebeurtenissen . Normaal gesproken voegt u hier aangepaste code toe om uw app te starten wanneer deze wordt gestart en op te schonen wanneer deze wordt onderbroken of beëindigd.
• MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Bevat de XAML-markeringen en codeachter voor de standaardpagina 'start' in een app. Het heeft geen navigatieondersteuning of ingebouwde besturingselementen.
• pch.h, pch.cpp: Een vooraf gecompileerd headerbestand en het bestand dat het in uw project bevat. In pch.h kunt u headers opnemen die niet vaak veranderen en die zijn opgenomen in andere bestanden in de oplossing.
• Package.appxmanifest: Een XML-bestand dat de mogelijkheden van het apparaat beschrijft die uw app nodig heeft, en de versiegegevens van de app en andere metagegevens. Als u dit bestand wilt openen in manifestontwerper, dubbelklikt u erop.
• HelloWorld_TemporaryKey.pfx: Een sleutel die implementatie van de app op deze computer mogelijk maakt vanuit Visual Studio.

Een eerste blik op de code

Als u de code in App.xaml.h bekijkt, App.xaml.cpp in het gedeelde project, zult u merken dat het voornamelijk C++-code is die er bekend uitziet. Sommige syntaxiselementen zijn echter mogelijk niet zo bekend als u geen ervaring hebt met Windows Runtime-apps of als u met C++/CLI hebt gewerkt. Dit zijn de meest voorkomende niet-standaard syntaxiselementen die u ziet in C++/CX:

Referentieklassen

Bijna alle Windows Runtime-klassen, die alle typen in de Windows API--XAML-besturingselementen, de pagina's in uw app, de App-klasse zelf, alle apparaat- en netwerkobjecten, alle containertypen bevatten, worden gedeclareerd als een ref-klasse. (Een aantal Windows-typen zijn waardeklasse of waarde-struct). Een referentieklasse is bruikbaar in elke taal. In C++/CX wordt de levensduur van deze typen bepaald door het automatisch tellen van verwijzingen (niet garbagecollection), zodat u deze objecten nooit expliciet verwijdert. U kunt ook uw eigen ref-klassen maken.

namespace HelloWorld
{
   /// <summary>
   /// An empty page that can be used on its own or navigated to within a Frame.
   /// </summary>
   public ref class MainPage sealed
   {
      public:
      MainPage();
   };
}

Alle Windows Runtime-typen moeten worden gedeclareerd binnen een naamruimte en in tegenstelling tot in ISO C++ hebben de typen zelf een toegankelijkheidsaanpassing. De openbare wijzigingsfunctie maakt de klasse zichtbaar voor Windows Runtime-onderdelen buiten de naamruimte. Het verzegelde trefwoord betekent dat de klasse niet als basisklasse kan fungeren. Bijna alle refklassen zijn verzegeld; overname van klassen wordt niet breed gebruikt omdat JavaScript deze niet begrijpt.

ref nieuwe en ^(hoeden)

U declareert een variabele van een referentieklasse met behulp van de operator ^ (dakje) en u instantieert het object met het ref nieuw sleutelwoord. Daarna opent u de exemplaarmethoden van het object met de operator -> net als een C++-aanwijzer. Statische methoden worden geopend met de operator :: net als in ISO C++.

In de volgende code gebruiken we de volledig gekwalificeerde naam om een object te instantiëren en gebruiken we de operator -> om een instantiemethode aan te roepen.

Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
     ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

bitmapImage->SetSource(fileStream);

Normaal gesproken voegen we in een .cpp bestand een using namespace Windows::UI::Xaml::Media::Imaging instructie en het automatische trefwoord toe, zodat dezelfde code er als volgt uitziet:

auto bitmapImage = ref new BitmapImage();
bitmapImage->SetSource(fileStream);

Eigenschappen

Een ref-klasse kan eigenschappen hebben, die, net als in beheerde talen, speciale lidfuncties zijn die verschijnen als velden voor de gebruikende code.

public ref class SaveStateEventArgs sealed
{
   public:
   // Declare the property
   property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
   {
      Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
   }
   ...
};

   ...
   // consume the property like a public field
   void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
   {    
      if (mruToken != nullptr && !mruToken->IsEmpty())
   {
      e->PageState->Insert("mruToken", mruToken);
   }
}

gedelegeerden

Net als in beheerde talen is een gemachtigde een verwijzingstype dat een functie inkapselt met een specifieke handtekening. Ze worden meestal gebruikt met gebeurtenissen en event-handlers

// Delegate declaration (within namespace scope)
public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);

// Event declaration (class scope)
public ref class NavigationHelper sealed
{
   public:
   event LoadStateEventHandler^ LoadState;
};

// Create the event handler in consuming class
MainPage::MainPage()
{
   auto navigationHelper = ref new Common::NavigationHelper(this);
   navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
}

Inhoud toevoegen aan de app

Laten we wat inhoud toevoegen aan de app.

Stap 1: De startpagina wijzigen

1. Open MainPage.xaml in Solution Explorer.

2. Maak UI-elementen door de volgende XAML toe te voegen aan de root Grid, vlak voor de afsluitende tag. Het bevat een StackPanel met een TextBlock waarmee de naam van de gebruiker wordt gevraagd, een tekstvakelement dat de naam van de gebruiker, een knop en een ander TextBlock-element accepteert.

   <StackPanel x:Name="contentPanel" Margin="120,30,0,0">
       <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
       <TextBlock Text="What's your name?"/>
       <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
           <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
       </StackPanel>
       <TextBlock x:Name="greetingOutput"/>
   </StackPanel>
   

3. Op dit moment hebt u een zeer eenvoudige Universele Windows-app gemaakt. Als u wilt zien hoe de UWP-app eruitziet, drukt u op F5 om de app te bouwen, implementeren en uitvoeren in de foutopsporingsmodus.

Het standaard welkomstscherm wordt eerst weergegeven. Het bevat een afbeelding( Assets\SplashScreen.scale-100.png) en een achtergrondkleur die is opgegeven in het manifestbestand van de app. Zie Een welkomstscherm toevoegen voor meer informatie over het aanpassen van het welkomstscherm.

Wanneer het welkomstscherm verdwijnt, wordt uw app weergegeven. De hoofdpagina van de app wordt weergegeven.

Het doet nog niet veel, maar gefeliciteerd, u hebt uw eerste universele Windows-platform-app gebouwd.

Als u de foutopsporing wilt stoppen en de app wilt sluiten, gaat u terug naar Visual Studio en drukt u op Shift+F5.

Zie Een Store-app uitvoeren vanuit Visual Studio voor meer informatie.

In de app kunt u typen in het tekstvak, maar wanneer u op de knop klikt, gebeurt er niets. In latere stappen maakt u een event handler voor de Klik gebeurtenis, waarin een gepersonaliseerde begroeting wordt weergegeven.

Stap 2: Een gebeurtenis-handler maken

1. Selecteer in MainPage.xaml in de XAML- of ontwerpweergave de knop 'Hallo zeggen' in de StackPanel die u eerder hebt toegevoegd.

2. Open het venster Eigenschappen door op F4 te drukken en kies vervolgens de knop ).

3. Zoek de gebeurtenis Klik . Typ in het tekstvak de naam van de functie die de Klik op gebeurtenis verwerkt. Typ voor dit voorbeeld 'Button_Click'.

   

4. Druk op Enter. De gebeurtenis-handlermethode wordt gemaakt in MainPage.xaml.cpp en geopend, zodat u de code kunt toevoegen die wordt uitgevoerd wanneer de gebeurtenis plaatsvindt.

Tegelijkertijd wordt in MainPage.xaml de XAML voor de - knop bijgewerkt om de Klik-gebeurtenishandler voor als volgt te declareren:

<Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

U kunt dit ook handmatig aan de xaml-code hebben toegevoegd. Dit kan handig zijn als de ontwerpfunctie niet wordt geladen. Als u dit handmatig invoert, typt u 'Klikken' en laat u IntelliSense de optie weergeven om een nieuwe gebeurtenis-handler toe te voegen. Op die manier maakt Visual Studio de benodigde methodedeclaratie en stub.

De ontwerpfunctie kan niet worden geladen als er een onverwerkte uitzondering optreedt tijdens het weergeven. Rendering in de ontwerpfunctie omvat het uitvoeren van een ontwerptijdversie van de pagina. Het kan handig zijn om actieve gebruikerscode uit te schakelen. U kunt dit doen door de instelling te wijzigen in het dialoogvenster Extra, Opties. Schakel onder XAML Designer de optie Projectcode uitvoeren uit in XAML Designer (indien ondersteund).

5. Voeg in MainPage.xaml.cpp de volgende code toe aan de Button_Click gebeurtenis-handler die u zojuist hebt gemaakt. Met deze code wordt de naam van de gebruiker opgehaald uit het tekstvak van de besturing nameInput en gebruikt om een begroeting te maken. In de greetingOutputTextBlock wordt het resultaat weergegeven.

void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}

6. Stel het project in als het opstarten en druk vervolgens op F5 om de app te bouwen en uit te voeren. Wanneer u een naam in het tekstvak typt en op de knop klikt, wordt in de app een gepersonaliseerde begroeting weergegeven.

Stap 3: De startpagina stylen

Een thema kiezen

Het is eenvoudig om het uiterlijk van uw app aan te passen. Uw app maakt standaard gebruik van resources met een lichte stijl. De systeembronnen beschikken ook over een lichte thema. Laten we het uitproberen en kijken hoe het eruitziet.

Overschakelen naar het donkere thema

1. Open App.xaml.

2. Bewerk in de tag Application de eigenschap RequestedTheme en stel de waarde in op Donker:

   RequestedTheme="Dark"
   

   Hier ziet u de volledige Application-tag met het donkere thema:

   <Application
   x:Class="HelloWorld.App"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   RequestedTheme="Dark">
   

3. Druk op F5 om deze te bouwen en uit te voeren. U ziet dat het donkere thema wordt gebruikt.

   

Welk thema moet u gebruiken? Wat je ook wilt. Dit is onze take: voor apps die voornamelijk afbeeldingen of video's weergeven, raden we het donkere thema aan; voor apps die veel tekst bevatten, raden we het lichte thema aan. Als u een aangepast kleurenschema gebruikt, gebruikt u het thema dat het beste past bij het uiterlijk van uw app. In de rest van deze zelfstudie gebruiken we het Light-thema in schermopnamen.

Notitie Het thema wordt toegepast wanneer de app wordt gestart en kan niet worden gewijzigd terwijl de app wordt uitgevoerd.

Systeemstijlen gebruiken

Op dit moment is de tekst in de Windows-app erg klein en moeilijk te lezen. Laten we dit oplossen door een systeemstijl toe te passen.

De stijl van een element wijzigen

1. Open MainPage.xaml in het Windows-project.

2. Selecteer in de XAML- of ontwerpweergave de optie 'Wat is uw naam?' TextBlock die u eerder hebt toegevoegd.

3. Kies in het venster Eigenschappen (F4) de knop Eigenschappen () in de rechterbovenhoek.

4. Vouw de groep Tekst uit en stel de tekengrootte in op 18 px.

5. Vouw de groep Diverse uit en zoek de eigenschap Stijl.

6. Klik op de eigenschapsmarkering (het groene vak rechts van de eigenschap Stijl ) en kies in het menu System Resource>BaseTextBlockStyle.

   BaseTextBlockStyle- is een resource die is gedefinieerd in de ResourceDictionary- in de <rootmap>\Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml.

   

   Op het XAML-ontwerpoppervlak verandert het uiterlijk van de tekst. In de XAML-editor wordt de XAML voor de TextBlock bijgewerkt:

<TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>

7. Herhaal het proces om de tekengrootte in te stellen en de BaseTextBlockStyle toe te wijzen aan het greetingOutputTextBlock-element .

   Tip Hoewel er geen tekst in deze TextBlock-staat, wordt in een blauwe omtrek weergegeven waar de aanwijzer over het XAML-ontwerpoppervlak wordt verplaatst, zodat u deze kunt selecteren.  

   Uw XAML ziet er nu als volgt uit:

<StackPanel x:Name="contentPanel" Margin="120,30,0,0">
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="18" x:Name="greetingOutput"/>
</StackPanel>

8. Druk op F5 om de app te bouwen en uit te voeren. Het ziet er nu als volgt uit:

Stap 4: de gebruikersinterface aanpassen aan verschillende venstergrootten

Nu gaan we de gebruikersinterface aanpassen aan verschillende schermgrootten, zodat deze er goed uitziet op mobiele apparaten. Hiervoor voegt u een VisualStateManager toe en stelt u eigenschappen in die worden toegepast op verschillende visuele statussen.

De indeling van de gebruikersinterface aanpassen

1. Voeg in de XAML-editor dit blok XAML toe na de openingstag van het hoofdrasterelement .

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="contentPanel.Margin" Value="20,30,0,0"/>
                <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

2. Fouten opsporen in de app op de lokale computer. U ziet dat de gebruikersinterface er hetzelfde uitziet als voorheen, tenzij het venster smaller wordt dan 641 apparaatonafhankelijke pixels (DIPs).
3. Fouten opsporen in de app in de emulator van het mobiele apparaat. U ziet dat de gebruikersinterface gebruikmaakt van de eigenschappen die u in de narrowState gebruikersinterface hebt gedefinieerd en correct wordt weergegeven op het kleine scherm.

Als u een VisualStateManager in eerdere versies van XAML hebt gebruikt, ziet u mogelijk dat de XAML hier een vereenvoudigde syntaxis gebruikt.

De VisualState met de naam wideState heeft een AdaptiveTrigger waarvan de eigenschap MinWindowWidth is ingesteld op 641. Dit betekent dat de status alleen moet worden toegepast wanneer de breedte van het venster niet kleiner is dan het minimum van 641 DIPs. U definieert geen Setter-objecten voor deze status, dus deze maakt gebruik van de indelingseigenschappen die u hebt gedefinieerd in de XAML voor de pagina-inhoud.

De tweede VisualState, narrowState, heeft een AdaptiveTrigger met de eigenschap MinWindowWidth ingesteld op 0. Deze status wordt toegepast wanneer de vensterbreedte groter is dan 0, maar kleiner dan 641 DIPs. (Bij 641 DIPs wordt wideState toegepast.) In deze situatie definieert u enkele Setter-objecten om de indelingseigenschappen van elementen in de gebruikersinterface te wijzigen.

• U verlaagt de linkermarge van het contentPanel element van 120 tot 20.
• U wijzigt de afdrukstand van het inputPanel element van horizontaal naar verticale.
• U voegt een bovenmarge van 4 DIPs toe aan het inputButton element.

Samenvatting

Gefeliciteerd, u hebt de eerste zelfstudie voltooid. Het heeft geleerd hoe u inhoud toevoegt aan Universele Windows-apps, hoe u interactiviteit aan deze apps toevoegt en hoe u het uiterlijk ervan kunt wijzigen.

Volgende stappen

Als u een Windows Universal-app-project hebt dat is gericht op Windows 8.1 en/of Windows Phone 8.1, kunt u het overzetten naar Windows 10 of Windows 11. Er is hiervoor geen automatisch proces, maar u kunt dit handmatig doen. Begin met een nieuw Universeel Windows-project om de nieuwste projectsysteemstructuur en manifestbestanden op te halen, kopieer uw codebestanden naar de mapstructuur van het project, voeg de items toe aan uw project en herschrijf uw XAML met behulp van VisualStateManager volgens de richtlijnen in dit onderwerp. Zie Een Windows Runtime 8-project overzetten naar een UWP-project (Universal Windows Platform) en Porting to the Universal Windows Platform (C++) voor meer informatie.

Als u bestaande C++-code hebt die u wilt integreren met een UWP-app, zoals het maken van een nieuwe UWP-gebruikersinterface voor een bestaande toepassing, raadpleegt u Procedure: Bestaande C++-code gebruiken in een Universeel Windows-project.