Kā daļa no mūsu Windows Phone apmācības sērijas, tagad mēs iemācīsimies izveidot lietotāja interfeisa elementus HelloPhone pieteikums. Pieteikums ir ļoti vienkāršs. Pēc pabeigšanas lietojumprogrammas lietotāja interfeiss satur parakstu, teksta lodziņu un pogu.
Lai lietotu programmu, teksta lodziņā ievadāt kādu tekstu, un tad, noklikšķinot uz pogas, programma parādīs reklāmkarogu ar ievadīto tekstu. Tas izskatīsies šādi.
1. In Solution Explorer, dubultklikšķi MainPage.xaml lai atvērtu šo failu dizainerā.
Projektētājs nodrošina divus atsevišķus skatus, lai rediģētu XAML failus, Dizains un XAML skats Dizains režīmā jums ir emulatora dizains, kurā jūs varat vilkt un nometiet vadīklas no rīkjoslas, kā arī atlasīt, mainīt izmērus, pārvietot un iestatīt esošo vadības rekvizītu. XAML režīmā jums ir iezīmēšanas redaktors, kas ļauj rediģēt XAML kodu lapā. Jūs varat strādāt ar kādu no režīmiem. Jums ir arī sadalīts režīms, un redaktora logs vienlaicīgi parāda abus skatus.
2. Šajā uzdevumā mēs galvenokārt koncentrējamies uz manuālo XAML rediģēšanu. Kad kodēšanas daļa ir pabeigta, jūs varat atgriezties pie dizainera skatījuma, lai redzētu rezultātus. Varat arī redzēt pilnekrāna XAML skatu.
3. XAML marķējumā, kas izveidots pēc noklusējuma Windows tālruņa lietojumprogrammas veidnes, atrodiet Režģis konteinera elements nosaukts LayoutRoot. Tās mērķis ir organizēt lapas elementus. Tās iekšpusē RowDefinition īpašumu, ievietojiet papildu rindu starp divām esošajām rindām un iestatiet tā vērtību Augstums īpašums uz Auto. Šajā rindā drīzumā būs tekstlodziņš un poga.
4. Sakne Režģis elementā ir arī daži ligzdoti elementi, no kuriem katrs tiek piešķirts citai ārējās režģa rindai, definējot a Grid.Row īpašums. Tagad atrodiet tīkla elementu ar nosaukumu TitleGrid un Iestatiet pirmā teksta bloka elementa teksta īpašību iekšējā režģī, lai " Windows Phone 7 sērija ". Līdzīgi Sveiks, tālrunis tiek pievienots nākamajam teksta blokam.
5. Tagad atrodiet Režģis elementa nosaukums ContentGrid piešķirt to rindai 1, kas sākotnēji parasti ir tukšs, un ielīmējiet tālāk minēto XAML marķējumu šajā elementā.
6. Lai pabeigtu lapas dizainu, pievienojiet trešo rindu, lai ietvertu reklāmkarogu ar lietotāja ievadīto ziņojumu. Lai izveidotu šo rindu, ievietojiet sekojošo XAML marķējumu tieši pirms ārējā režģa gala atzīmes.
7. Noklikšķiniet uz Dizains apskatīt un pārbaudīt lapas vadību.
Mūsu nākamajā apmācībā mēs iemācīsimies "Rīkt notikumus no lietotāja interfeisa".