![](img/tr.png)
V dnešním článku vás naučím, jak přidat zdroj dat v XML do našeho projektu a jak následně tato data zpracovat a použít.
Jako vždy začneme vytvořením nového projektu. O XML bylo napsáno již dost článků. Vznik XML je webovými vývojáři přirovnáván k vynálezu knihtisku. WPF má výbornou podporu pro XML, takže blend nám ulehčí spoustu práce.
Pro náš příklad si vytvoříme následující XML soubor, který bude obsahovat seznam zboží s odkazy na obrázky:
<?xml version="1.0" encoding="UTF-8"?>
<pc>
<notebooks>
<notebook>
<kod>LX.ALC0Y.621</kod>
<nazev>Acer Aspire 5315</nazev>
<popis>Intel Celeron M560 2.13GHz, paměť 1024MB DDR2 RAM, 15.4" WXGA displej, 160GB disk, DVD-RW/+RW mechanika, sdílená grafika Intel GMA X3100, kamera, WiFi, Windows Vista Home Basic.</popis>
<img>image/56697.jpg</img>
<cena>9776,-Kč</cena>
</notebook>
<notebook>
<kod>APMCPRO15</kod>
<nazev>Apple MacBook Pro 15"</nazev>
<popis>MacBook s procesorem Intel Core 2 Duo T9300 (2.5GHz, 6MB L2 Cache, 800MHz FSB), 2GB RAM, pevný disk 250 GB, 15.4" WXGA+ displej 1440x900, grafika GeForce 8600M GT, DVD/RW DL mechanika, AirPort, BT, dálkový ovladač, Mac OS X.</popis>
<img>image/54816m.jpg</img>
<cena>62 584,-Kč</cena>
</notebook>
<notebook>
<kod>R61e - NG1DPCV</kod>
<nazev>Lenovo ThinkPad</nazev>
<popis>Intel Celeron M 550, paměť 1024MB RAM, 15.4" WXGA displej, 160GB disk, DVD/RW mechanika, grafika integrovaná Intel X3100 až 256MB, WiFi-abg, GLAN, Windows Vista Business.</popis>
<img>image/53767m.jpg</img>
<cena>13 497,-Kč</cena>
</notebook>
</notebooks>
</pc>
Soubor uložte pod názvem notebook.xml někam na váš disk, ale tak, abyste ho za chvíli našli. Nyní se přepneme do spuštěného Blendu s nově vytvořeným projektem a zaměříme se v pravém sloupci na část Data.
Jak je z obrázku patrné, máme dvě možnosti, jak data do naší WPF aplikace přidat. Data můžeme číst ze souboru XML, nebo pomocí CLR objektu. My se zaměříme na variantu první, tou je právě XML.
- Do našeho projektu přidáme námi vytvořený XML soubor. V Solution explorer klikneme pravým tlačítkem myši na naši aplikaci a zvolíme
Add Existing Item…
, pomoci Open dialogu najdeme a otevřeme náš XML soubor. - Teď klikneme na tlačítko
+ XML
, které se nachází v části Data. Po kliknutí se nám zobrazí dialog, kde vyplnímeConnection Name
aURL for XML data
. Do položky Connection Name vyplníme Notebook a do položky URL for XML data zapíšeme název souboru XML, který jsme vložili do projektu, v našem případě tedy notebook.xml. URL vyplníme ručně, tlačítko Browse nebudeme používat, jeho použitím by nám vedl na soubor XML absolutní odkaz, my potřebujeme relativní. - Jako další rozbalíme strukturu dat uzlu pc.
- Pokud jsme strom rozbalili, chytneme myší uzel notebook(Array) a přetáhneme ho do okna naší WPF aplikace. Pokud tlačítko uvolníme, vyskočí nabídka s akcemi, které můžeme provést. My zvolíme ListBox.
- Po uvolnění tlačítka se zobrazí okno, kde můžeme nastavit detaily výpisu dat z XML v ListBox. Zaškrtnutím/odškrtnutím můžeme určit, zda se daný uzel zobrazí, v select boxu můžeme určit typ uzlu a pomocí šípek ve spodní části okna můžeme určit pořadí uzlů.
- Pokud jste dodrželi předchozí kroky, měli byste po stisknutí klávesy F5 vidět to samé, co já.
- Zavřeme naší aplikaci a v Blendu vytvoříme vedle
ListBox
novouGrid
. - Nyní nastavíme akci při kliknutí na položku v
ListBox
pro aktualizaci obsahuGrid
. To uděláme tak, že vyberemeGrid
a v paneluProperties
v sekci Comon Properties nastavíme vlastnostDataContext
. Její vyhledání si usnadním zapsáním slovaData
do políčkaSearch
. - Klikneme na čtvereček, který se nachází za tlačítkem
New
, a vybereme položkuData Binding…
- Zobrazí se nám okno, ve kterém se přepneme na záložku
Element Property
. V částiScene elements
rozbalímeLayoutRoot
. Vybereme[System.Windows.Controls.ListBox]
. - Pokud jste úspěšně provedli předchozí bod, nyní nastavíme v
Properties
vlastnostSelectedItem : (Object)
a klikneme na tlačítkoFinish
. - Nyní dvojklikem na
Gird
ve stromu prvkůGrid
vybereme. Po vybrání se kolemGrid
zobrazí žlutý rámeček. - Nyní si vytvoříme prostor pro zobrazení názvu z našeho zdroje dat. V panelu nástrojů vybereme
TextBlock
a umístíme do plochyGrid
. - Námi vytvořený
TextBlock
vybereme pomocí nástrojeSelection
. Přejdeme na panelProperties
. V částiCommon Properties
klikneme na čtvereček vedle vlastnosti Text a vyberemeData Binding…
. - Na záložce
Explicit Data Context
rozbalíme položkupc → notebooks → notebook(Array)
. Vyberemenazev : (String)
a klikneme naFinish
. - Pokud vše dobře nastavíte a stisknete F5, uvidíte výsledek podobný tomu mému. Při klikání na jednotlivé položky se budou měnit i názvy v TextBlock.
- Nyní náš postup zopakujeme pro položky kód, popis a cena. Vytvoření obrázku si popíšeme dále.
- Stejně jako přidání XML souboru do našeho projektu, vytvoříme novou složku (
Add New Folder
), kterou pojmenujemeimage
. - Složku nyní naplníme obrázky, které si můžete stáhnout zde.
- Obrázky po stažení rozbalte na disk a přidejte do projektu pomocí
Add Existing Item…
. - Nyní si otevřeme
Asset Library
a vyhledáme prvek Image, který přidáme doGrid
. - Data do prvku opět načteme pomocí
Common Properties
, s tím rozdílem, že místo vlastnostiText
použijeme vlastnostSource
, pomocí malého čtverečku opět zvolímeData Binding…
a zvolíme uzelimg
. - Po stisku F5 máme před sebou hotovou aplikaci.
Závěr
Dnes jsme se naučili používat jednu z mocných stránek WPF. Jestliže jste došli až do těchto míst, gratuluji. U dalšího dílu na shledanou.