Vizuális vezérlők hozzáadása .NET MAUI-alkalmazásokhoz
Most, hogy a .NET MAUI-sablont használta az alkalmazás létrehozásához, a következő lépés a felhasználói felület hozzáadása és a kezdeti felhasználói felületi logika implementálása.
Ebben a leckében többet is megtudhat egy .NET MAUI-alkalmazás és navigációs struktúrák építőelemeiről.
Mi található a .NET MAUI-projektben?
Az összegzéshez egy .NET MAUI-projekt kezdetben a következőket tartalmazza:
Az alkalmazásobjektum létrehozásához és konfigurálásához szükséges kódot tartalmazó MauiProgram.cs fájl.
Az App.xaml és az App.xaml.cs fájlok, amelyek felhasználói felületi erőforrásokat biztosítanak, és létrehozzák az alkalmazás kezdeti ablakát.
Az AppShell.xaml és az AppShell.xaml.cs fájlok, amelyek meghatározzák az alkalmazás kezdeti lapját, és kezelik a navigációs útválasztáshoz szükséges oldalak regisztrációját.
A MainPage.xaml és a MainPage.xaml.cs fájlok, amelyek meghatározzák a lap elrendezését és felhasználói felületi logikáját, amelyek alapértelmezés szerint megjelennek a kezdeti ablakban.
Szükség szerint további lapokat is hozzáadhat az alkalmazáshoz, és további osztályokat hozhat létre az alkalmazás által igényelt üzleti logika implementálásához.
A .NET MAUI-projektek emellett olyan alapértelmezett alkalmazáserőforrásokat is tartalmaznak, mint a képek, ikonok és betűtípusok, valamint az egyes platformok alapértelmezett rendszerindító kódja.
Az alkalmazásosztály
Az App osztály a .NET MAUI-alkalmazás egészét jelöli. Örökli az alapértelmezett viselkedéskészletet a következőtől Microsoft.Maui.Controls.Application: . Az előző leckéből felidézheti, hogy a App bootstrap-kód az osztály, amelyet a rendszerindító kód példányosít és betölt az egyes platformokon. Az App osztálykonstruktor általában létrehozza az AppShell osztály egy példányát, és hozzárendeli a MainPage tulajdonsághoz. Ez a kód szabályozza, hogy a felhasználó melyik képernyőt látja a megadott módon AppShell.
Az alkalmazásosztály a következőket is tartalmazza:
Az életciklus-események kezelésére szolgáló módszerek, beleértve azt is, hogy az alkalmazás mikor kerül a háttérbe (vagyis amikor megszűnik az előtérbeli alkalmazás).
Az alkalmazás új
Windowslétrehozásának módszerei. A .NET MAUI-alkalmazás alapértelmezés szerint egyetlen ablakkal rendelkezik, de létrehozhat és elindíthat további ablakokat, ami asztali és táblagépes alkalmazásokban hasznos.
Felület
A .NET többplatformos alkalmazás felhasználói felülete (.NET MAUI) Rendszerhéj csökkenti az alkalmazásfejlesztés összetettségét azáltal, hogy biztosítja a legtöbb alkalmazás által igényelt alapvető funkciókat, többek között a következőket:
- Egyetlen hely egy alkalmazás vizuális hierarchiájának leírására.
- Gyakori navigációs felhasználói felület.
- URI-alapú navigációs séma, amely lehetővé teszi az alkalmazás bármely oldalára való navigálást.
- Integrált keresési kezelő.
A .NET MAUI Shell-alkalmazásokban az alkalmazás vizualizációs hierarchiáját egy olyan osztály írja le, amely a Shell osztályt alosztályozza. Ez az osztály három fő hierarchikus objektumból állhat:
FlyoutItemorTabBar. Az AFlyoutItemegy vagy több elemet jelöl a úszó ablakban, és akkor kell használni, ha az alkalmazás navigációs mintájának úszó panelre van szüksége. Az ATabBaraz alsó fülsávot jelöli, amelyet akkor érdemes használni, ha az alkalmazás navigációs mintája alsó lapokkal kezdődik, és nem igényel úszó panelt.Tab, amely csoportosított tartalmat jelöl, alsó fülek szerint navigálva.ShellContent, amely az egyes lapok ContentPage-objektumait jelöli.
Ezek az objektumok nem egyetlen felhasználói felületet sem képviselnek, hanem az alkalmazás vizuális hierarchiájának rendszerezését. A Shell felveszi ezeket az objektumokat, és létrehozza a tartalom navigációs felhasználói felületét.
Oldalak
A lapok a .NET MAUI felhasználói felületi hierarchiájának gyökerét képezik egy Shell. Az eddig látott megoldás tartalmazott egy úgynevezett MainPageosztályt. Ez az osztály a legegyszerűbb és leggyakoribb oldaltípusból ContentPageszármazik. A tartalomoldalak egyszerűen megjelenítik a tartalmát. A .NET MAUI számos más beépített oldaltípust is tartalmaz, beleértve a következőket:
TabbedPage: Ez a lapnavigációhoz használt gyökérlap. A többlapos lapok gyermekoldal-objektumokat tartalmaznak; minden laphoz egyet.FlyoutPage: Ez a lap lehetővé teszi egy mester/részlet stílusú bemutató implementálását. A szórólapok az elemek listáját tartalmazzák. Amikor kijelöl egy elemet, megjelenik egy nézet, amely megjeleníti az elem részleteit.
Más laptípusok is elérhetők, és többnyire különböző navigációs minták engedélyezésére használhatók többképernyős alkalmazásokban.
Nézetek
A tartalomoldalak általában megjelenítenek egy nézetet. A nézet lehetővé teszi az adatok meghatározott módon történő lekérését és megjelenítését. A tartalomoldalak alapértelmezett nézete egy ContentViewolyan nézet, amely az elemeket aktuális állapotban jeleníti meg. Ha zsugorítja a nézetet, előfordulhat, hogy az elemek eltűnnek a megjelenítésből, amíg át nem méretezi a nézetet. A ScrollView lehetővé teszi az elemek megjelenítését egy görgetőablakban; ha az ablakot zsugorítja, felfelé és lefelé görgetve jelenítheti meg az elemeket. Az A CarouselView egy görgethető nézet, amely lehetővé teszi, hogy a felhasználó pöccintsen egy elemgyűjteményen. A rendszer CollectionView lekérheti az adatokat egy elnevezett adatforrásból, és minden elemet sablonnal jeleníthet meg formátumként. Számos más nézet is elérhető.
Vezérlők és elrendezések
A nézetek egyetlen vezérlőt, például gombot, címkét vagy szövegdobozt tartalmazhatnak. (Szigorúan véve a nézet maga egy vezérlő, így egy nézet egy másik nézetet is tartalmazhat.) Az egyetlen vezérlőre korlátozott felhasználói felület azonban nem lenne túl hasznos, ezért a vezérlők elrendezésben vannak elhelyezve. Az elrendezés határozza meg azokat a szabályokat, amelyekkel a vezérlők egymáshoz képest jelennek meg. Az elrendezés is vezérlő, így hozzáadhatja egy nézethez. Ha megtekinti az alapértelmezett MainPage.xaml fájlt, a lap/nézet/elrendezés/vezérlőhierarchia működés közben jelenik meg. Ebben az XAML-kódban az VerticalStackLayout elem csak egy másik vezérlő, amely lehetővé teszi az egyéb vezérlők elrendezésének finomhangolását.
<ContentPage ...>
<ScrollView ...>
<VerticalStackLayout>
<Image ... />
<Label ... />
<Label ... />
<Button ... />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Az elrendezések definiálásához használt gyakori vezérlők némelyike a következő:
VerticalStackLayoutésHorizontalStackLayout, amelyek optimalizált veremelrendezések, amelyek egy felülről lefelé vagy balról jobbra verem vezérlőit helyezik el. Az AStackLayoutis elérhető, amelynek van egy tulajdonságaStackOrientation, amelyet beállíthat vagyVerticalmegadhatHorizontal. Táblagépen vagy telefonon a tulajdonság alkalmazáskódban való módosítása lehetővé teszi a kijelző beállítását, ha a felhasználó elforgatja az eszközt:
AbsoluteLayout, amely lehetővé teszi a vezérlők pontos koordinátáinak beállítását.FlexLayout, amely hasonló ahhoz a kivételhezStackLayout, hogy lehetővé teszi a gyermekvezérlők burkolásához, ha azok nem férnek el egyetlen sorban vagy oszlopban. Ez az elrendezés a különböző képernyőméretekhez való igazítást és igazítást is lehetővé teszi. A vezérlők példáulFlexLayoutfüggőleges elrendezés esetén balra, jobbra vagy középre igazíthatják a gyermekvezérlőt. Ha vízszintesen van igazítva, a vezérlőket a egyenletes térköz biztosítása érdekében meg lehet indokolni. Egy vízszintesFlexLayoutbelsőScrollViewkerettel vízszintesen görgethető képkockákat jeleníthet meg (mindegyik keret lehet függőlegesen elrendezettFlexLayout):
Grid, amely az általunk beállított oszlop- és sorhely szerint határozza meg a vezérlőit. Megadhatja az oszlop- és sorméreteket, valamint a spanokat, így a rácselrendezések nem feltétlenül rendelkeznek "ellenőrzőtábla-megjelenéssel".
Az alábbi képen az alábbi gyakori elrendezéstípusok kulcsattribútumait összegzi:
A veremelrendezés négy, függőlegesen elrendezett dobozt jelenít meg. Az abszolút elrendezés négy dobozt jelenít meg a képernyőn, pontosan ott, ahol a fejlesztő megadta. A Flex-elrendezés több, a képernyőn elhelyezett dobozt jelenít meg, hogy a legjobban kihasználhassa a képernyőterületet. A Rács elrendezés több dobozt jelenít meg a képernyőn egy rácsmintában.
Minden vezérlő rendelkezik tulajdonságokkal. Ezekhez a tulajdonságokhoz az XAML használatával állíthat be kezdeti értékeket. Ezeket a tulajdonságokat sok esetben módosíthatja az alkalmazás C#-kódjában. Az alapértelmezett .NET MAUI-alkalmazásban például a Kattintásra gomb eseményét kezelő Clicked kód a következőképpen néz ki:
int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
count+=5;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
Ez a kód módosítja a Text lap CounterBtn vezérlőelemének tulajdonságát. Akár teljes oldalakat, nézeteket és elrendezéseket is létrehozhat a kódban; nem kell XAML-t használnia. Vegyük például egy lap következő XAML-definícióját:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Phoneword.MainPage">
<ScrollView>
<VerticalStackLayout>
<Label Text="Current count: 0"
Grid.Row="0"
FontSize="18"
FontAttributes="Bold"
x:Name="CounterLabel"
HorizontalOptions="Center" />
<Button Text="Click me"
Grid.Row="1"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
A C# megfelelő kódja így néz ki:
public partial class TestPage : ContentPage
{
int count = 0;
// Named Label - declared as a member of the class
Label counterLabel;
public TestPage()
{
var myScrollView = new ScrollView();
var myStackLayout = new VerticalStackLayout();
myScrollView.Content = myStackLayout;
counterLabel = new Label
{
Text = "Current count: 0",
FontSize = 18,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
myStackLayout.Children.Add(counterLabel);
var myButton = new Button
{
Text = "Click me",
HorizontalOptions = LayoutOptions.Center
};
myStackLayout.Children.Add(myButton);
myButton.Clicked += OnCounterClicked;
this.Content = myScrollView;
}
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
counterLabel.Text = $"Current count: {count}";
SemanticScreenReader.Announce(counterLabel.Text);
}
}
A C#-kód részletesebb, de további rugalmasságot biztosít, amely lehetővé teszi a felhasználói felület dinamikus adaptációját.
Ha meg szeretné jeleníteni ezt a lapot, amikor az alkalmazás elindul, állítsa be az TestPage osztályt főként AppShellShellContent:
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:TestPage}"
Route="TestPage" />
Elrendezés finomhangolása
Hasznos, ha egy kis légzési helyet ad egy vezérlőhöz. Minden vezérlőnek van egy Margin tulajdonsága, amelyet az elrendezések tiszteletben tartanak. A margóra úgy gondolhat, mint a mások eltolását lehetővé taszító vezérlőelemre.
Minden elrendezésnek van egy Padding tulajdonsága is, amely megakadályozza, hogy gyermekeik közel kerülhessenek az elrendezés szegélyéhez. Ennek a koncepciónak az egyik módja, hogy az összes vezérlő egy dobozban van, és a doboz párnázott falakkal rendelkezik.
Egy másik hasznos whitespace beállítás a Spacing tulajdonsága VerticalStackLayout vagy HorizontalStackLayout. Ez a tér az elrendezés összes gyermeke között. Ez a vezérlő saját margójával rendelkező additív, így a tényleges térköz plusz margó lesz.