Ako súčasť našich sérií Windows Phone tutorial, teraz sa naučíme vytvárať prvky UI pre HelloPhone aplikácie. Aplikácia je veľmi jednoduchá. Po dokončení bude používateľské rozhranie aplikácie obsahovať nadpis, textové pole a tlačidlo.
Ak chcete použiť aplikáciu, zadáte nejaký text do textového poľa a potom po kliknutí na tlačidlo aplikácia zobrazí banner s textom, ktorý ste zadali. Vyzerá to niečo ako nasledujúci obrázok.
1. V Solution Explorer, dvojité kliknutie MainPage.xaml otvoriť tento súbor v návrhárovi.
Návrhár poskytuje dva samostatné pohľady na úpravu súborov XAML, dizajn a XAML vyhliadka. V režime Design máte návrh emulátora, v ktorom môžete presúvať ovládacie prvky z panelu nástrojov, ako aj vybrať, zmeniť veľkosť, presunúť a nastaviť vlastnosti existujúcich ovládacích prvkov. V režime XAML máte editor značiek, ktorý vám umožňuje upraviť kód XAML na stránke. Môžete pracovať s ktorýmkoľvek z režimov. Tiež máte rozdelený režim, pričom okno editora zobrazuje súčasne obidva pohľady.
2. V tejto úlohe sa zameriavame hlavne na manuálnu úpravu XAML. Po dokončení kódovania sa môžete vrátiť k návrhovému zobrazeniu, aby ste videli výsledky. Môžete mať tiež zobrazenie XAML na celej obrazovke.
3. V značke XAML vygenerovanej predvolenou šablónou aplikácie Windows Phone nájdite mriežka názov kontajnera LayoutRoot, Jeho účelom je usporiadať prvky na stránke. Vo svojom RowDefinition vlastnosť, vložte ďalší riadok medzi dva existujúce riadky a nastavte hodnotu jeho výška majetok do auto, Tento riadok bude čoskoro obsahovať textové pole a tlačidlo.
4. Kořen mriežka prvok obsahuje aj niektoré vnorené elementy, pričom každý z nich je priradený inému riadku vonkajšej mriežky definovaním znaku a Grid.Row vlastnosť. Teraz nájdite prvok Grid s názvom TitleGrid a Nastavte vlastnosť textu prvého elementu bloku textu vo vnútornej mriežke na hodnotu " Windows Phone 7 Series ". podobne Dobrý telefón sa pridá do ďalšieho bloku textu.
5. Teraz Nájdite mriežka názov prvku ContentGrid, priraďte ho do riadku 1, ktorý je zvyčajne prázdny na začiatku a vložte do tohto prvku nasledujúcu značku XAML.
6. Ak chcete dokončiť návrh stránky, pridajte tretí riadok, ktorý obsahuje banner so správou zadanou používateľom. Ak chcete vytvoriť tento riadok, vložte nasledujúcu značku XAML bezprostredne pred koncovú značku vonkajšej mriežky.
7. Kliknite na tlačidlo dizajn zobraziť a preskúmať rozloženie ovládacích prvkov na stránke.
V našom ďalšom tutoriáli sa naučíme "Riešenie udalostí z používateľského rozhrania".
