Kezdőlap > Windows 8 > Windows Store App – Stílusok

Windows Store App – Stílusok

2013. január 10. csütörtök Hozzászólás Go to comments

A Windows Store-os alkalmazásaink vezérlőit elláthatjuk stílusokkal és témákkal. Ez tulajdonképpen hasonló analógiával működik, mint a webes világban a CSS. Nézzünk egy egyszerű példát, ahol egy gomb stílusát definiáljuk!

A példa kedvéért most inline módon határozzuk meg ezt a stílust. (Általában erőforrásokban kezeljük.) A stílus meghatározásánál a Setter elementnél egy Property-t és egy Value-t kell meghatároznunk. A Property mondja meg, hogy a vezérlő melyik tulajdonságát szeretnénk meghatározni, míg a Value-nál megmondjuk, hogy ennek a tulajdonságnak mi lesz az értéke. Ebben a példában a gomb háttér színét és az előtér színét változtatjuk meg.

<Button Content="Sample">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="BorderBrush" Value="Green" />
        </Style>
    </Button.Style>
</Button>

Figyeljük meg, hogy a Style elementnél megmondtuk, hogy mi a TargetType, ami most értelemszerűen a Button! Ezt most mindenképp meg kell adnunk! Ennek a példának az eredménye most egy mérsékelten szép gomb.

image

Figyeljük meg, hogy mi történik, ha a gombnál explicit módon meghatározzuk a Foreground tulajdonságot!

<Button Content="Sample" Foreground="Yellow">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="BorderBrush" Value="Green" />
        </Style>
    </Button.Style>
</Button>

Ebben az esetben a gomb előtér színe (azaz a Content színe) sárga színű lesz. Ugyanis a stílus az alap stílust határozza meg. Ha a fejlesztő direkt módon meghatározza, akkor annak lesz nagyobb súlya és az érvényesül.

image

Reklámok
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: