Megosztás a következőn keresztül:

Hozzon létre egy "Hello, World!" UWP-alkalmazás a C++/CX-ben

Fontos

Ez az oktatóanyag C++/CX-et használ. A Microsoft kiadta a C++/WinRT: egy teljesen standard modern C++17 nyelvi előrejelzést Windows Runtime (WinRT) API-khoz. További információ erről a nyelvről: C++/WinRT.

A Microsoft Visual Studióval a C++/CX használatával olyan alkalmazást fejleszthet, amely Windows rendszeren fut az Extensible Application Markup Language (XAML) nyelven definiált felhasználói felülettel.

Megjegyzés:

Ez az oktatóanyag a Visual Studio Community 2019-et használja. Ha a Visual Studio egy másik verzióját használja, az kissé másnak tűnhet.

Mielőtt elkezdenéd

  • Az oktatóanyag elvégzéséhez a Visual Studio Communityt vagy a Visual Studio egyik nem közösségi verzióját kell használnia egy Windows rendszerű számítógépen. A letöltéshez tekintse meg az eszközök beszerzését.
  • Ahhoz, hogy követhesse, alapszintű ismeretekkel kell rendelkeznie a C++/CX, az XAML és az XAML áttekintőfogalmakról.
  • Ennek követéséhez a Visual Studióban az alapértelmezett ablakelrendezést kell használnia. Az alapértelmezett elrendezés visszaállításához a menüsávon válassza az Ablak>alaphelyzetbe állítása ablakelrendezés lehetőséget.

C++ asztali alkalmazások összehasonlítása UWP-alkalmazásokkal

Ha a Windows asztali programozás C++-beli hátteréből származik, akkor valószínűleg azt fogja tapasztalni, hogy az UWP-hez készült alkalmazások írásának bizonyos aspektusai ismerősek, más szempontok azonban némi tanulást igényelnek.

Mi ugyanaz?

  • Használhatja az STL-t, a CRT-t (néhány kivétellel) és bármely más C++ kódtárat, amíg a kód csak a Windows futtatókörnyezetből elérhető Windows-függvényeket hívja meg.

  • Ha megszokta a vizuális tervezési felületeket, akkor továbbra is használhatja a Microsoft Visual Studióba beépített tervezőt, vagy használhatja a teljes funkcionalitású Blend for Visual Studiót. Ha megszokta a felhasználói felület kézzel történő kódolását, akkor kézzel is kódolhatja az XAML-t.

  • Továbbra is windowsos operációsrendszer-típusokat és saját egyéni típusokat használó alkalmazásokat hoz létre.

  • Továbbra is használja a Visual Studio hibakeresőt, profilkészítőt és egyéb fejlesztői eszközöket.

  • Továbbra is olyan alkalmazásokat hoz létre, amelyeket a Visual C++ fordító natív gépi kódra fordít. A C++/CX rendszerű UWP-alkalmazások nem futnak felügyelt futtatókörnyezetben.

Mi újság?

  • Az UWP-alkalmazások tervezési alapelvei nagyon eltérnek az asztali alkalmazásokétól. Az ablakszegélyek, címkék, párbeszédpanelek stb. kevésbé hangsúlyosak. A tartalom elsősorban. A nagyszerű UWP-alkalmazások már a tervezési szakasz kezdetétől tartalmazzák ezeket az alapelveket.

  • Az XAML használatával definiálja a teljes felhasználói felületet. A felhasználói felület és az alapvető programlogika elkülönítése sokkal egyértelműbb az UWP-alkalmazásokban, mint egy MFC- vagy Win32-alkalmazásban. Mások is dolgozhatnak a felhasználói felület megjelenésén az XAML-fájlban, miközben a kódfájl viselkedésén dolgozik.

  • Elsősorban egy új, könnyen navigálást lehetővé tévő, objektumorientált API-val, a Windows-futtatókörnyezetgel programozási, bár Windows rendszerű eszközökön a Win32 továbbra is elérhető bizonyos funkciókhoz.

  • A C++/CX használatával windowsos futtatókörnyezeti objektumokat használhat és hozhat létre. A C++/CX lehetővé teszi a C++ kivételkezelést, a meghatalmazottakat, az eseményeket és a dinamikusan létrehozott objektumok automatikus hivatkozásszámlálását. A C++/CX használata esetén a mögöttes COM- és Windows-architektúra részletei el vannak rejtve az alkalmazás kódjában. További információ: C++/CX Language Reference.

  • Az alkalmazás egy olyan csomagba van lefordítva, amely metaadatokat is tartalmaz az alkalmazás által tartalmazott típusokról, az általa használt erőforrásokról és a szükséges képességekről (fájlhozzáférés, internet-hozzáférés, kamerahozzáférés stb.).

  • A Microsoft Store-ban és a Windows Phone Store-ban az alkalmazás biztonságosnak minősül egy minősítési folyamattal, és több millió potenciális ügyfél számára lesz felderíthető.

Hello World Store alkalmazás a C++/CX-ben

Az első alkalmazás egy "Hello World" amely bemutatja az interaktivitás, az elrendezés és a stílusok néhány alapvető funkcióját. Létrehozunk egy alkalmazást a Windows Univerzális alkalmazás projektsablonjából. Ha korábban már fejlesztett alkalmazásokat a Windows 8.1-hez és a Windows Phone 8.1-hez, bizonyára emlékszik, hogy három projekttel kellett rendelkeznie a Visual Studióban, egyet a Windows alkalmazáshoz, egyet a telefonos alkalmazáshoz, egy másikat pedig megosztott kóddal. A Windows Univerzális Windows Platform (UWP) lehetővé teszi, hogy csak egy projekt legyen, amely minden eszközön fut, beleértve a Windows rendszerű asztali és laptop számítógépeket, például táblagépeket, mobiltelefonokat, VR-eszközöket stb.

Kezdjük az alapokkal:

  • Univerzális Windows-projekt létrehozása a Visual Studióban.

  • A létrehozott projektek és fájlok megismerése.

  • A Visual C++ összetevőbővítmények (C++/CX) bővítményeinek ismertetése és használatuk.

Először hozzon létre egy megoldást a Visual Studióban

  1. A Visual Studióban a menüsávon válassza azÚj> projekt fájlja>... lehetőséget.

  2. Az Új projekt létrehozása párbeszédpanelen válassza az Üres alkalmazás (Univerzális Windows – C++/CX) lehetőséget. Ha nem látja ezt a beállítást, győződjön meg arról, hogy telepítve vannak az univerzális Windows-alkalmazásfejlesztési eszközök. Lásd a Beállítási útmutató részt további információkért.

C++/CX projektsablonok az Új projekt létrehozása párbeszédpanelen

  1. Válassza a Tovább lehetőséget, majd adja meg a projekt nevét. HelloWorld-nek fogjuk nevezni.

  2. Válassza a létrehozása gombot.

Megjegyzés:

Ha most először használta a Visual Studiót, előfordulhat, hogy megjelenik egy Beállítások párbeszédpanel, amely a fejlesztői mód engedélyezését kéri. A fejlesztői mód egy speciális beállítás, amely bizonyos funkciókat, például az alkalmazások közvetlen futtatásának engedélyezését teszi lehetővé, és nem csak az Áruházból. További információért kérjük, olvassa el a Eszköz fejlesztési célra történő engedélyezésecímű cikket. Az útmutató folytatásához válassza a Fejlesztői mód lehetőséget, kattintson az Igen gombra, és zárja be a párbeszédpanelt.

A projektfájlok létrejöttek.

Mielőtt továbblépnénk, nézzük meg, mi van a megoldásban.

Univerzális alkalmazásmegoldás összecsukott csomópontokkal

Tudnivalók a projektfájlokról

A projektmappák minden .xaml fájljában található egy .xaml.h fájl és .xaml.cpp fájl ugyanabban a mappában, és egy .g fájl és egy .g.hpp fájl a Generált fájlok mappában, amely lemezen található, de nem része a projektnek. Az XAML-fájlokat úgy módosíthatja, hogy felhasználói felületi elemeket hozzon létre, és azokat adatforrásokhoz (DataBinding) csatlakoztassa. A .h és .cpp fájlokat úgy módosíthatja, hogy egyéni logikát adjon hozzá az eseménykezelőkhöz. Az automatikusan létrehozott fájlok a XAML jelölés C++/CX-vé való átalakítását képviselik. Ne módosítsa ezeket a fájlokat, de tanulmányozhatja őket, hogy jobban megértse a kód mögötti működést. A létrehozott fájl alapvetően egy XAML-gyökérelem részleges osztálydefinícióját tartalmazza; ez ugyanaz az osztály, amelyet a *.xaml.h és .cpp fájlokban módosít. A létrehozott fájlok osztálytagokként deklarálják az XAML felhasználói felület gyermekelemét, hogy hivatkozni tudja rájuk az ön által írt kódban. A build folyamat során a generált kódot és az Ön kódját összevonjuk egy teljes osztálydefinícióvá, majd lefordítjuk.

Először nézzük meg a projektfájlokat.

  • App.xaml, App.xaml.h, App.xaml.cpp: Az alkalmazásobjektumot jelöli, amely egy alkalmazás belépési pontja. Az App.xaml nem tartalmaz lapspecifikus felhasználói felületi korrektúrát, de hozzáadhat felhasználói felületi stílusokat és egyéb elemeket, amelyeket bármely oldalról el szeretne érni. A kód mögötti fájlok az OnLaunched és az OnSuspending események kezelőit tartalmazzák. Általában itt ad hozzá egyéni kódot az alkalmazás inicializálásához, amikor az elindul, és elvégzi a tisztítást, amikor felfüggesztik vagy leállítják.
  • MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Az alkalmazás alapértelmezett "start" oldalához tartozó XAML-korrektúrát és kód mögötti kódot tartalmazza. Nem rendelkezik navigációs támogatással vagy beépített vezérlőkkel.
  • pch.h, pch.cpp: Egy előre összeállított fejlécfájl és a projektbe belefoglaló fájl. A pch.h-ban minden olyan fejlécet felvehet, amely nem változik gyakran, és amelyek a megoldás más fájljaiban is szerepelnek.
  • Package.appxmanifest: Az alkalmazás által igényelt eszközképességeket, valamint az alkalmazás verzióadatait és egyéb metaadatait leíró XML-fájl. Duplán kattintson rá a Jegyzéktervezőprogramban való megnyitáshoz.
  • HelloWorld_TemporaryKey.pfx: Egy kulcs, amely lehetővé teszi az alkalmazás telepítését ezen a gépen a Visual Studióból.

Első pillantás a kódra

Ha megvizsgálja a kódot az App.xaml.h-ban, App.xaml.cpp a megosztott projektben, láthatja, hogy ez többnyire ismerősnek tűnő C++ kód. Előfordulhat azonban, hogy egyes szintaxiselemek nem annyira ismerősek, ha még csak most ismerkedik a Windows Runtime-alkalmazásokkal, vagy a C++/CLI-vel dolgozott. A C++/CX fájlban a leggyakoribb nem szabványos szintaxiselemek láthatók:

Referencia osztályok

Szinte az összes Windows-futtatókörnyezeti osztály, amely tartalmazza a Windows API-XAML vezérlők összes típusát, az alkalmazás lapjait, magát az alkalmazásosztályt, az összes eszköz- és hálózati objektumot, valamint az összes tárolótípust, ref osztályként van deklarálva. (Néhány Windows típus a értékosztály vagy a értékstruktúra). A ref osztály bármilyen nyelvről használható. A C++/CX esetében az ilyen típusú objektumok élettartamát automatikus hivatkozásszámlálás (nem szemétgyűjtés) szabályozza, így ezek az objektumok soha nem törölhetők explicit módon. Saját ref osztályokat is létrehozhat.

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();
   };
}

Minden Windows futtatókörnyezet-típust névtéren belül kell deklarálni, és az ISO C++ szabványtól eltérően maguk a típusok is rendelkeznek akadálymentességi módosítóval. A nyilvános módosító láthatóvá teszi az osztályt a Névtéren kívüli Windows Futtatókörnyezet-összetevők számára. A lezárt kulcsszó azt jelenti, hogy az osztály nem szolgálhat alaposztályként. Szinte minden ref osztály lezárva; az osztályöröklést nem használják széles körben, mert a JavaScript nem érti.

új és ^ (kalap)

A ^ (hat) operátorral deklarálhat egy ref osztály változóját, és az objektumot az új ref kulcsszóval példányosíthatja. Ezt követően az objektum példánymetódusai a C++ mutatóhoz hasonlóan a -> operátorral érhetők el. A statikus metódusok a :: operátorral érhetők el, ugyanúgy, mint az ISO C++-ban.

Az alábbi kódban a teljes névvel példányosítunk egy objektumot, és a -> operátor használatával meghívunk egy példánymetódust.

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

bitmapImage->SetSource(fileStream);

Egy .cpp fájlban általában egy direktívát és egy automatikus kulcsszót adunk hozzá using namespace Windows::UI::Xaml::Media::Imaging , hogy ugyanaz a kód a következőképpen nézzen ki:

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

Tulajdonságok

A ref osztályoknak lehetnek tulajdonságai, melyek, a felügyelt nyelvekhez hasonlóan, olyan speciális tagfüggvények, amelyek mezőkként jelennek meg a kihívott kód számára.

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);
   }
}

meghatalmazottak

A felügyelt nyelvekhez hasonlóan, a delegátus olyan referenciatípus, amely egy adott szignatúrájú függvényt foglal magában. Leggyakrabban eseményekhez és eseménykezelőkhöz használják őket

// 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);
}

Tartalom hozzáadása az alkalmazáshoz

Adjunk hozzá néhány tartalmat az alkalmazáshoz.

1. lépés: A kezdőlap módosítása

  1. Megoldáskezelőbennyisd meg a MainPage.xaml fájlt.

  2. A felhasználói felület vezérlőinek létrehozásához adja hozzá a következő XAML-t a gyökér Gridközvetlenül a záró címke előtt. Tartalmaz egy StackPanelt , amely egy TextBlock-et tartalmaz, amely megkérdezi a felhasználó nevét, egy TextBox-elemet , amely elfogadja a felhasználó nevét, egy gombot és egy másik TextBlock-elemet .

    <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. Ezen a ponton létrehozott egy nagyon egyszerű univerzális Windows-alkalmazást. Az UWP-alkalmazás megjelenésének megtekintéséhez nyomja le az F5 billentyűt az alkalmazás hibakeresési módban történő létrehozásához, üzembe helyezéséhez és futtatásához.

Először az alapértelmezett kezdőképernyő jelenik meg. Rendelkezik az alkalmazás jegyzékfájljában megadott képpel (Assets\SplashScreen.scale-100.png) és háttérszínnel. A kezdőképernyő testreszabásáról a Kezdőképernyő hozzáadása című témakörben olvashat.

Amikor a kezdőképernyő eltűnik, megjelenik az alkalmazás. Megjeleníti az alkalmazás főoldalát.

UWP-alkalmazás képernyője vezérlőkkel

Még nem sok mindenre képes , de gratulálunk, elkészítette az első Univerzális Windows Platform-alkalmazást!

A hibakeresés leállításához és az alkalmazás bezárásához térjen vissza a Visual Studióba, és nyomja le a Shift+F5 billentyűkombinációt.

További információért lásd a Visual Studio alkalmazásból megnyitott Store-alkalmazás futtatása.

Az alkalmazásban beírhatja a Szövegdoboz, de a gombra kattintva nem történik semmi. A későbbi lépésekben létrehoz egy eseménykezelőt a gomb Kattintás eseményéhez, amely személyre szabott üdvözlést jelenít meg.

2. lépés: Eseménykezelő létrehozása

  1. A MainPage.xaml fájlban, XAML vagy tervező nézetben válassza ki a korábban hozzáadott StackPanel-ben található "Say Hello" gombot.

  2. Nyissa meg a Tulajdonságok ablakot az F4 billentyű lenyomásával, majd válassza az Események gombot (Események gomb).

  3. Keresse meg a Kattintson eseményre. A szövegmezőbe írja be annak a függvénynek a nevét, amely a Click eseményt kezeli. Ebben a példában írja be a következőt: "Button_Click".

    Tulajdonságok ablak, Események nézet

  4. Nyomja le az Enter billentyűt. Az eseménykezelő metódus a MainPage.xaml.cpp fájlban van létrehozva, és nyitva van, hogy hozzáadhassa a kódot, amely az esemény bekövetkezésekor végrehajtódik.

Ugyanakkor a MainPage.xaml fájlban a gomb XAML-jének frissítése a Click eseménykezelő deklarálásához az alábbi módon történik:

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

Ezt manuálisan is hozzáadhatta volna az XAML-kódhoz, ami hasznos lehet, ha a tervező nem töltődik be. Ha ezt manuálisan adja meg, írja be a "Click" kifejezést, majd hagyja, hogy az IntelliSense felajánlja egy új eseménykezelő hozzáadásának lehetőségét. Így a Visual Studio létrehozza a szükséges metódusdeklarációt és -csonkot.

A tervező nem töltődik be, ha a renderelés során nem kezelt kivétel történik. A tervezőeszközben történő renderelés magában foglalja a lap tervezési idejű verziójának futtatását. Hasznos lehet letiltani a futó felhasználói kódot. Ezt az Eszközök, beállítások párbeszédpanel beállításának módosításával teheti meg. Az XAML Designerterületen vegye ki a jelölést az alól: Projektkód futtatása XAML-tervezőben (ha támogatott).

  1. A MainPage.xaml.cpp adja hozzá az alábbi kódot az imént létrehozott Button_Click eseménykezelőhöz. Ez a kód lekéri a felhasználó nevét a nameInputTextBox vezérlőből, és egy üdvözlés létrehozásához használja. A greetingOutputTextBlock megjeleníti az eredményt.
void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    greetingOutput->Text = "Hello, " + nameInput->Text + "!";
}
  1. Állítsa be a projektet indításként, majd nyomja le az F5 billentyűt az alkalmazás létrehozásához és futtatásához. Amikor beír egy nevet a szövegmezőbe, és a gombra kattint, az alkalmazás személyre szabott üdvözlést jelenít meg.

alkalmazás képernyő üzenet megjelenítéssel

3. lépés: A kezdőlap stílusa

Téma kiválasztása

Egyszerűen testre szabhatja az alkalmazás megjelenését és hangulatát. Az alkalmazás alapértelmezés szerint világos stílusú erőforrásokat használ. A rendszererőforrások egy világos témát is tartalmaznak. Próbáljuk ki, és nézzük meg, hogy néz ki.

Váltás a sötét témára

  1. Nyissa meg az App.xaml fájlt.

  2. A nyitó Alkalmazás címkén szerkessze a RequestedTheme tulajdonságot, és állítsa be az értékét Sötét"-re.

    RequestedTheme="Dark"

    Itt található a teljes alkalmazás címke a sötét témával:

    <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. Nyomja meg az F5-öt a fordításhoz és futtatáshoz. Figyelje meg, hogy a sötét témát használja.

    Alkalmazás képernyője sötét témával

Melyik témát érdemes használnia? Amelyiket szeretné. A következőkben bemutatjuk: a többnyire képeket vagy videókat megjelenítő alkalmazások esetében a sötét témát javasoljuk; A sok szöveget tartalmazó alkalmazások esetében a világos témát javasoljuk. Ha egyéni színsémát használ, használja azt a témát, amely a legjobban megfelel az alkalmazás megjelenésének és hangulatának. Az oktatóanyag többi részében a Világos témát használjuk képernyőképeken.

Jegyzet A téma az alkalmazás indításakor lesz alkalmazva, és nem módosítható az alkalmazás futtatása közben.

Rendszerstílusok használata

Jelenleg a Windows alkalmazásban a szöveg nagyon kicsi és nehezen olvasható. Ezt egy rendszerstílus alkalmazásával javítjuk ki.

Elem stílusának módosítása

  1. A Windows-projektben nyissa meg a MainPage.xaml fájlt.

  2. XAML vagy tervezési nézetben válassza ki a korábban hozzáadott "Mi a neve?"TextBlock elemet.

  3. A Tulajdonságok ablakban (F4) válassza a Tulajdonságok gombot (Tulajdonságok gomb) a jobb felső sarokban.

  4. Bontsa ki a Szöveg csoportot, és állítsa a betűméretet 18 képpontra.

  5. Bontsa ki a Vegyes csoportot, és keresse meg a Style tulajdonságot.

  6. Kattintson a tulajdonságjelölőre (a Stílus tulajdonságtól jobbra lévő zöld mezőre), majd a menüben válassza a System Resource>BaseTextBlockStyle lehetőséget.

    BaseTextBlockStyle egy erőforrás, amely a ResourceDictionary<gyökér>\Program Files\Windows Kits\10\Include\winrt\xaml\design\generic.xaml fájlban van definiálva.

    Tulajdonságok ablak, Tulajdonságok nézet

    Az XAML tervezési felületén megváltozik a szöveg megjelenése. Az XAML-szerkesztőben a TextBlock XAML-fájlja frissül:

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

  1. Ismételje meg a folyamatot a betűméret beállításához, és rendelje hozzá a BaseTextBlockStyle-t a greetingOutputTextBlock elemhez.

    Tipp Bár ebben a TextBlocknem található szöveg, amikor az XAML tervezőfelület fölé viszi az egérmutatót, egy kék körvonal jelzi, hogy hol van, hogy kijelölhesse.  

    Az XAML a következőképpen néz ki:

<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>
  1. Az alkalmazás létrehozásához és futtatásához nyomja le az F5 billentyűt. A következőhöz hasonlóan néz ki:

Alkalmazás képernyője nagyobb szöveggel

4. lépés: A felhasználói felület adaptálása különböző ablakméretekhez

Most a felhasználói felületet a különböző képernyőméretekhez igazítjuk, hogy jól nézzen ki a mobileszközökön. Ehhez hozzáad egy VisualStateManagert , és beállítja a különböző vizualizációs állapotokra alkalmazott tulajdonságokat.

A felhasználói felület elrendezésének módosítása

  1. Az XAML-szerkesztőben adja hozzá ezt az XAML-blokkot a gyökérrács elem nyitó címkéje után.
<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>
  1. Az alkalmazás hibakeresése a helyi gépen. Figyelje meg, hogy a felhasználói felület ugyanúgy néz ki, mint korábban, hacsak az ablak nem lesz szűkebb, mint 641 eszközfüggetlen képpont (DIP).
  2. Az alkalmazás hibakeresése a mobileszköz-emulátoron. Figyelje meg, hogy a felhasználói felület a megadott tulajdonságokat használja, narrowState és helyesen jelenik meg a kis képernyőn.

Mobilalkalmazás képernyője stílusszöveggel

Ha korábbi XAML verziókban használtál VisualStateManager-t, észreveheted, hogy az itt használt XAML egyszerűsített szintaxissal rendelkezik.

A nevű rendelkezik egy wideState elemmel, amelynek a MinWindowWidth tulajdonsága 641-re van beállítva. Ez azt jelenti, hogy az állapotot csak akkor kell alkalmazni, ha az ablak szélessége nem kisebb, mint a minimum 641 DIP. Ehhez az állapothoz nem határoz meg Setter-objektumokat , ezért az XAML-ben definiált elrendezési tulajdonságokat használja a lap tartalmához.

A második VisualState, narrowState, rendelkezik egy AdaptiveTrigger-vel, amelynek MinWindowWidth tulajdonsága 0-ra van állítva. Ezt az állapotot akkor alkalmazza a rendszer, ha az ablak szélessége 0-nál nagyobb, de 641-nél kisebb. (641 DIPs-nél a wideState kerül alkalmazásra.) Ebben az állapotban ténylegesen definiál néhány Setter objektumot a kezelőfelület vezérlőinek elrendezési tulajdonságainak módosítására:

  • Csökkenti a contentPanel elem bal margóját 120-ról 20-ra.
  • A elem inputPanel helyett Függőleges.
  • 4 DIP felső margóját adja hozzá az inputButton elemhez.

Összefoglalás

Gratulálunk, elvégezte az első oktatóanyagot! Megtanította, hogyan adhat hozzá tartalmakat a Windows Universal-alkalmazásokhoz, hogyan adhat hozzá interaktivitást hozzájuk, és hogyan módosíthatja azok megjelenését.

Következő lépések

Ha windowsos univerzális alkalmazásprojektje van, amely a Windows 8.1-et és/vagy a Windows Phone 8.1-et célozza, akkor a Windows 10-be vagy a Windows 11-be is portozhatja. Ehhez nincs automatikus folyamat, de manuálisan is megteheti. Kezdje egy új Univerzális Windows-projekttel a projektrendszer legújabb struktúrájának és jegyzékfájljainak beszerzéséhez, a kódfájlok másolásához a projekt címtárstruktúrájához, adja hozzá az elemeket a projekthez, és írja át az XAML-t a VisualStateManager használatával a jelen témakör útmutatása szerint. További információ: A Windows Runtime 8-projektek portolása univerzális Windows-platform (UWP) projektre és A univerzális Windows-platformra történő portolás (C++).

Ha már rendelkezik olyan C++ kóddal, amelyet integrálni szeretne egy UWP-alkalmazással, például új UWP felhasználói felületet szeretne létrehozni egy meglévő alkalmazáshoz, olvassa el a Hogyan: Meglévő C++ kód használata univerzális Windows-projektben.

  • Last updated on