Megjelenített elemek és stílusozás

XAML főbb elemek
1) StackLayout - Elemek gyűjteménye
2) ScrollView - Lefelé görgethető elem, csak egy gyereke lehet
3) Frame - Keret, csak egy gyereke lehet
4) Label - Szöveg
5) Entry - Bemeneti mező, egy soros
6) Editor - Bementi mező, több soros
7) Button - Gomb
8) Picker - Kiválasztó
9) DatePicker - Dátumválasztó
10) Grid - Rács
11) Image - Kép
12) ListView - Lista
 
XAML esetén fontos attríbutumok
- x:Name: Egyedi azonosító, amire a C#-on belül egyből lehet hivatkozni
- HorizontalOptions: Horizontális elhelyezkedés
- VerticalOptions: Vertikális elhelyezkedés
- Margin: Margó (bal, fent, jobb, lent)
- Padding: Belső távolság (bal, fent, jobb, lent)
- Style: Stílus 
- WidthRequest: Szélesség
- HeightRequest: Magasság
- BackgroundColor: Háttérszín
- IsVisible: Láthatóság (true/false)
- Text: Szöveg
- TextColor: Szöveg színe
- HorizontalTextAlignment: Szöveg horizontális elhelyezkedése
- VerticalTextAlignment: Szöveg vertikális elhelyezkedése
- FontAttributes: Betű tulajdonsága (Bold/Italic/None)
- FontSize: Betű nagysága
- IsPassword: Jelszómező // Entry
- Keyboard: Billentyűzet típusa // Entry, Editor
- MaxLength: Karakterek maximális száma // Entry, Editor
- Placeholder: Hiánypótló szöveg // Entry, Editor
- PlaceholderColor: Hiánypótló szöveg színe // Entry, Editor
- HasShadow: Árnyék (true/false) // Frame
- CornerRadius: Sarkok lekerekítése // Frame
- BorderColor: Szélek színe
- Aspect: Kép elhelyezkedése // Image
- Source: Kép forrása (fájl neve kiterjesztéssel) // Image
- MaxLines: Sorok maximális száma // Label
 
Képek feltöltése Android alatt
- Kép felmásolása Fodg-és-Vidd módszerrel a Solution Explorer > Projekt.Android > Resources > Drawable könyvtárba.
- Fájl neve csak kis betűt, _ jelet és számokat tartalmazhat, az első karakter pedig nem lehet szám.
 
Képek feltöltése iOS alatt
- Solution Explorer > Projekt.iOS > Asset Catalogs > Assets-re dupla kattintás.
- Bal oldalt felül a plusz jelre való kattintás.
- Add Image Set
- Asset átnevezése dupla kattintás során - a neve legyen ugyanaz, mint az Android esetén a fájl neve.
- 1x-hez tartozó ...-ra való kattintás, majd pedig a fájl feltöltése.
 
Stíluslap (App.xaml fájl esetén az üresen hagyott rész)
<Color x:Key="blackColor">#000000</Color>
<Style x:Key="entryLabelBlack" TargetType="Label" BasedOn="{StaticResource entryLabel}">
     <Setter Property="BackgroundColor" Value="{StaticResource blackColor}"/>
</Style>
- x:Key: Azonosító
- Color: Szín
- Style: Stílus
- TargetType: Elem típusa (Kötelező! Ha x:Key nincs megadva, akkor minden ilyen típusú elemre igaz!)
- BasedOn: Szülő stílus, így minden eddigi beállítást örököl a szülőtől
- Setter: Stílus elem
- Property: Stílus attríbútum neve
- Value: Érték
- {StaticResource xxxxx}: hivatkozás arra a Color vagy Style elemre, aminek az x:Name értéke xxxxx - Elemek Style attríbútuma esetén is ugyanezt a módszert kell alkalmazni
 
Hozzárendelések C# esetén
button.TextColor = (Color)App.Current.Resources["whiteColor"];
button.Style = (Style)App.Current.Resources["buttonBlack"];

 

Új elem létrehozása C# alatt

// Új szöveg létrehozása - Külön
Label label = new Label();
label.Text = "Szöveg";
label.FontSize = 20;
label.BackgroundColor = Color.Red;
label.TextColor = Color.Green;
 
// Új szöveg hozzárendelése a Container végére
Container.Children.Add(label);
 
// Új szöveg létrehozása - Egybe
Label error = new Label
{
    Text = "Hiba",
    FontSize = 30,
    BackgroundColor = Color.Yellow,
    TextColor = Color.Black
};
 
// Új szöveg legyen a Container második eleme
Container.Children.Insert(1, error);
 
Betűtípus
App.xaml fájl esetén
<OnPlatform x:TypeArguments="x:String" x:Key="Oswald">
    <On Platform="Android" Value="oswaldregular.ttf#oswaldregular" />
    <On Platform="iOS" Value="oswaldregular" />
</OnPlatform>
Használat
<Label Text="Szöveg" FontFamily="{StaticResource Oswald}"/>
Android esetén a fontok helye az Projekt.Android > Assets, iOS esetén pedig a Projekt.iOS > Resources könyvtár

 

Mobilos kategóriák: