Kezdőoldal > Windows 8 > Windows Store App – Adatkötés

Windows Store App – Adatkötés

2013. január 9. szerda Hozzászólás Go to comments

Az adatkötés nagyon fontos témakör minden fejlesztő számára. Képzeljük el, hogy van egy objektum, amiben vannak tulajdonságok (Name, Age, Address) stb! Ha ezt meg akarjuk jeleníteni a felhasználói felületen akkor, legegyszerűbb esetben kiíratjuk az adott objektum tulajdonságának tartalmát. Igen ám, de ha a forrásadat változik akkor a felhasználói felületen ezt a változást nekünk manuálisan ki kell eszközölni. Szólni kell a UI-nak, hogy “Hello, a bennem lévő tulajdonság változott!”. Ezt persze nem szeretnénk minden esetben külön manuálisan kieszközölni, mert sokkal több kódolást eredményez, a lehetséges hibákról ne is beszéljünk, és még sorolhatnánk ennek a “manuális” módszernek a kényelmetlenségeit.

Első körben most egy UI Element-hez fogunk kötni, ezzen ugyanis nagyon egyszerű az adatkötés bemutatása. A felhasználói felületre dobjunk fel egy TextBox-ot és Slider vezérlőt. A Slider vezérlő neve legyen a slider1! Az adatkötést most XAML-ben fogom bemutatni. (Ezt a Visual Studio-ból is meg tudjuk tenni, de első körben jobb a XAML, mert sokkal jobban érthető, mint az IDE varázslata.)

Nézzük meg, hogy most mi található a XAML-ben! (Ennél több tulajdonságot láthatunk magunk előtt, de a számunkra felesleges tulajdonságokat eltávolítottam, hogy csak a lényeget lássuk.)

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Slider Name="slider1" />
    <TextBox Text="" />
</Grid>

A feladat tehát az, hogy van egy slider vezérlő. Ha annak a slider vezérlőnek (Forrás) változik az értéke, akkor a TextBoxban jelenjen meg! Ezt adatkötés nélkül kb úgy jeleníthetjük meg, hogy a slider1 ValueChanged eseményére feliratkozunk, és ott ahogy változik az értéke, a TextBox.Text tulajdonsága egyenlő lesz a slider1.Value-jával. Ez így nem igazi adatkötés és macerás.

Az adatkötést most Markup Extensionnel fogjuk megtenni.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Slider Name="slider1" />
    <TextBox Text="{Binding ElementName=slider1, Path=Value}" />
</Grid>

Ebben az esetben az eredmény ugyan az mint az előbb leírtak, csak épp adatkötve. Azaz, ha mozgatjuk a slidert abban a pillanatban a TextBox Text tulajdonsága is változni fog.

Figyeljük meg az adatkötés szintaktikáját! Az ElementName-nél adjuk meg azt a vezérlőt, amihez kötni szeretnénk, a Path-nál pedig a tulajdonság nevét, amihez kötni szeretnék. Ez pedig nem más, mint a slider1 Value tulajdonsága.

image

Advertisements
  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: