Guida [DEV-GUIDE] Windows Phone 8 - Creare la tua prima Applicazione - Parte 2/4

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
M

Max Fridman

Community Manager
Amministratore
8 Agosto 2010
7,147
692
6,958
3,233
Ultima modifica da un moderatore:
general-site-start-screen-green-608x240.png

CREATE THE UI

In questo tutorial esamineremo come creare una UI per la nostra Applicazione , inserendo le corrette stringhe di codice all'interno di Visual Studio.

Quando avremo finito il risultato dovrebbe essere simile a questo :
IC619109.png

​
TO CREATE THE UI


  1. Apri la scheda Properties , se non è ancora aperta seleziona VIEW | Properties Window , nel menù dei comandi. La finestra Properties si aprirà nella parte bassa della finestra di Visual Studio.
  2. Nel Visual Studio Designer , clicca MY APPLICATIONTextBlock control. Le proprietà dei controlli sono visualizzabili nella finestra Properties.
IC619110.png



  1. Nel campo Text , cambia il nome in MY FIRST APPLICATION per modificare il nome della finestra App.
  2. Se nella finestra Properties ci sono dei sottogruppi , il campo Text è sotto la categoria "Common".
  3. Nel designer , cliccate per selezionare il PageNameTextblock control.
  4. E cambiate il Text property in Mini Browser per rinominare la vostra prima pagina dell'Applicazione.
  5. Nella finestra del codice XAML , cliccate la prima linea del codice. Le properties della Phone Application Page sono visualizzate nella finestra Properties.
  6. Cambiate la Supported Orientation a ProtraitOrLandscape per attivare contemporaneamente il supporto per la visualizzazione sia in orizzontale che in verticale. Supported Orientation si trova nella sottogruppo Common.
  7. Aprite la Toolbox su Visual Studio , se la finestra non è aperta selezionate VIEW | Toolbox nel menù dei comandi.
  8. Dal Common Windows Phone Controls group nella Toolbox aggiungete una Textbox control sulla superficie del design , prendendola e trascinandola sulla superficie dello stesso. Posizionate questa TextBox come nell'immagine all'inizio di questo tutorial. Cliccate il bottone "Go" sulla destra per lasciare la pagina.

Nella finestra Properties selezionate questi valori per la nuova Text Box.
Name : URL
Text : www.inforge.net
Height : Auto
Width : Auto
HorizontalAlignment : Stretch
VerticalAlignment : Top

Con questi settaggi , l'applicazione controllerà tutto e posizionerà la pagina correttamente in entrambe le modalità di visualizzazione.

Dalla Common Windows Phone Controls , nella Toolbox , aggiungete un Bottone , sulla destra della vostra Text Box che avete appena aggiunto , come nell'immagine all'inizio di questo tutorial.
Se è necessario ridimensionate il bottone.

Nella finestra Properties per questo nuovo elemento selezionate questi valori.
Name : Go
Content : Go
Height : Auto
Width : Auto
HorizontalAlignment : Right
VerticalAlignment : Top

Con questi settaggi , l'applicazione controllerà e posizionerà il tutto correttamente , in entrambe le modalità di visualizzazione.

Da All Windows Phone Controls group nella Toolbox , aggiungete WebBrowser come spiegato nei passaggi precedenti.

E nella finestra Properties per questo nuovo elemento selezionate questi valori.
Name : MiniBrowser
Height : Auto
Width : Auto
HorizontalAlignment : Stretch
VerticalAlignment : Stretch

Con questi controlli , l'applicazione controllerà tutto e posizionerà gli elementi in maniera corretta in entrambe le modalità di visualizzazione.

Il vostro Layout sarà ora completo. Guardate nella finestra XAML code , nella pagina MainPage.xaml , guardate nella griglia dove vengono contenuti i comandi. Se volete un layout come quello nell'immagine copiate e incollate per rimpiazzare la griglia di stile nel vostro File , MainPage.xaml

Codice: 
[COLOR=blue][FONT=Consolas]<[/FONT][/COLOR][COLOR=#A31515][FONT=Consolas]Grid[/FONT][/COLOR][COLOR=red][FONT=Consolas]x:Name[/FONT][/COLOR][COLOR=blue][FONT=Consolas]=[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]"[/FONT][/COLOR][COLOR=blue][FONT=Consolas]ContentPanel[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]" [/FONT][/COLOR][COLOR=red][FONT=Consolas]Grid.Row[/FONT][/COLOR][COLOR=blue][FONT=Consolas]=[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]"[/FONT][/COLOR][COLOR=blue][FONT=Consolas]1[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]" [/FONT][/COLOR][COLOR=red][FONT=Consolas]Margin[/FONT][/COLOR][COLOR=blue][FONT=Consolas]=[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]"[/FONT][/COLOR][COLOR=blue][FONT=Consolas]12,0,12,0[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]"[/FONT][/COLOR][COLOR=blue][FONT=Consolas]>[/FONT][/COLOR]

    [COLOR=blue]<[/COLOR][COLOR=#A31515]TextBox[/COLOR] [COLOR=red]x:Name[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]URL[/COLOR]" [COLOR=red]Margin[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]0,0,120,0[/COLOR]" [COLOR=red]Text[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]http://www.inforge.net[/COLOR]" [COLOR=red]VerticalAlignment[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]Top[/COLOR]"[COLOR=blue]/>[/COLOR]    
[COLOR=blue]
<[/COLOR][COLOR=#A31515]Button[/COLOR] [COLOR=red]x:Name[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]Go[/COLOR]" [COLOR=red]Content[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]Go[/COLOR]" [COLOR=red]VerticalAlignment[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]Top[/COLOR]" [COLOR=red]HorizontalAlignment[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]Right[/COLOR]"[COLOR=blue]/>[/COLOR]    
[COLOR=blue]
<[/COLOR][COLOR=#A31515]phone[/COLOR][COLOR=blue]:[/COLOR][COLOR=#A31515]WebBrowser[/COLOR] [COLOR=red]x:Name[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]MiniBrowser[/COLOR]" [COLOR=red]Margin[/COLOR][COLOR=blue]=[/COLOR]"[COLOR=blue]0,84,0,0[/COLOR]"[COLOR=blue]/> 
[/COLOR][COLOR=blue][FONT=Consolas]</[/FONT][/COLOR][COLOR=#A31515][FONT=Consolas]Grid[/FONT][/COLOR][COLOR=blue][FONT=Consolas]>[/FONT][/COLOR]
 
Stato
Discussione chiusa ad ulteriori risposte.
Top Bottom
Indietro