Programmare App Per Windows Phone

[Teotheboss]

Dal momento che questo OS sta rapidamente espandendosi, ho deciso di riadattare questa guida per tutti coloro che vogliano creare app per il proprio Windowsphonino.

L’applicazione “prova” che andremo a sviluppare, è quella scelta da Microsoft nella propria guida (in inglese), e cioè un Mini Browser. Per comodità divideremo la guida nelle stesse quattro sezioni di Microsoft.

OCCORRENTE:
- Visual Studio (Express 2012 o simili)
- Windows Phone SDK

FASI:
1) Creare il progetto
2) Creare l’UI
3) Aggiungere il codice
4) Creare l’app

- CREARE IL PROGETTO

1. Scaricare e installare il Windows Phone SDK

2. Aprire Visual Studio

3. Creare un nuovo progetto da File > Nuovo progetto

4. Espandere i templates Visual C# installati e selezionare la categoria Windows Phone

5. Nella lista che si aprirà, selezionare il template per Applicazioni Windows Phone

6. In fondo alla finestra del nuovo progetto, digitare il nome del progetto (in questo caso MiniBrowser)

7. Cliccare Ok. Apparirà la schermata di selezione dell’OS (l’applicazione sarà supportata da versioni uguali o superiori, perciò se si seleziona, ad esempio, WP8, solo terminali WP8 potranno supportarla, mentre se si seleziona WP7.1, sia i WP7.1 che WP8 la supporteranno)

8. Cliccare Ok. Il progetto viene creato e si apre in Visual Studio il display MainPage.xaml, che contiene l’user interface dell’app.

- CREARE L’UI

L’UI finale sarà simile a questo screen:

1. Aprire la finestra Proprietà, se non è già aperta, selezionando Vista > Finestra proprietà.

2. Nel designer, cliccare per selezionare il controllo TextBlock “My application” (il testo “My application nel visualizzatore grafico dell’app, per intenderci). Le sue proprietà verranno mostrate nella finestra delle proprietà.

3. Nelle proprietà del testo (nella categoria “Comune/Common”) cambiare il nome in “MY FIRST APPLICATION” (o in qualsivoglia altro nome) per rinominare il titolo della finestra dell’app.

4. Sempre nel designer, selezionare il controllo del nome principale dell’app, e nelle proprietà del testo rinominarla in “Mini Browser”

5. Nella finestra del codice Xaml, selezionare la prima riga del codice. Vengono mostrate le proprieta della pagina dell’applicazione nella finestra delle proprietà.

6. Cambiare le proprietà del Supporto Orientamento (SupportedOrientation) in PortraitOrLandscape per aggiungere il supporto ad entrambi gli orientamenti.

7. Aprire il ToolBox dal menu Vista > Toolbox

8. Dal gruppo “Controlli comuni WP (Common Windows Phone Controls), aggiungere un TextBox nella finestra del designer trascinandolo dal ToolBox direttamente sull’interfaccia del designer. Posizionarlo sotto il testo Mini Browser. Usare il mouse per dimensionare il controllo approssimatamente nelle dimensioni della prima immagine all’inizio. Lasciare dello spazio per il tasto “Go”.

9. Nella finestra delle proprietà, selezionare le seguenti proprietà (a sinistra la proprietà, a destra l’impostazione) per posizionare correttamente il controllo in entrambe le visuali:
Nome : URL
Testo: http://www.xbox.com
Altezza: Auto
Larghezza: Auto
Allineamento Orizzontale: Stretch
Allineamento Verticale: Top

10. Aggiungere allo stesso modo un tasto a destra del box appena aggiunto. Ridimensionare all’incirca come l’immagine iniziale.

11. Settare le seguenti proprietà
Nome: Go
Contenuto: Go
Altezza: Auto
Larghezza: Auto
Allineamento Orizzontale: destra
Allineamento Verticale: Top

12. Aggiungere un controllo WebBrowser (per maggiori informazioni, in inglese, qui) nella stessa maniera dei precedenti, riempiendo tutto lo spazio.

13. Impostare le seguenti proprietà:
Nome: MiniBrowser
Altezza: Auto
Larghezza: Auto
Allineamento Orizzontale: Stretch
Allineamento Verticale: Stretch

Ora il layout è completo.

- AGGIUNGERE IL CODICE

Prima di sviluppare l’app, è necessario aggiungere un codice al bottone Go.

1. Fare doppio click sul pulsante Go nel designer per creare un gestore di eventi vuoto per il pulsante. Si troverà in una pagina del codice C# nella pagina MainPage.xaml.cs simile al seguente:

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Shell;
using MiniBrowser.Resources;

namespace MiniBrowser
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}

private void Go_Click(object sender, RoutedEventArgs e)
{

}
}
}

Quando si cliccherà sul pulsante, Visual Studio aggiornerà anche il codice Xaml per connettere il pulsante con l’evento

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox x:Name="URL" Margin="0,0,120,0" Text="http://www.xbox.com" VerticalAlignment="Top" />
<Button x:Name="Go" Content="Go" VerticalAlignment="Top" HorizontalAlignment="Right" Click="Go_Click"/>
<phone:WebBrowser x:Name="MiniBrowser" Margin="0,84,0,0"/>
</Grid>

Aggiungere le seguenti righe al codice C# per far si che il pulsante permetta di navigare all’URL digitato.

C#

private void Go_Click(object sender, RoutedEventArgs e)
{
string site = URL.Text;
MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
}

- TESTARE L’APP

1. Costruire l’app dal menu Build > Build Solution

2. Nella toolbar standard, selezionare uno degli emulatori.

3. Far partire l’app premendo F5. Si aprirà l’emulatore e verrà lanciata l’app.

4. Verificare che il tasto Go rimandi al sito specificato nella casella di testo

5. Testare la modalità landscape usando uno dei seguenti pulsanti

6. Per fermare il Debug, selezionare “Stop Debugging” dal menù debug.

Ora tocca a voi. Create la vostra prima app Windows Phone!

Per eventuali chiarimenti, rimando alla guida ufficiale in inglese, sul sito Microsoft

[Kirenenko]

Magari sarebbe il caso in un secondo momento di aggiungere anche il codice di esempio VB.NET per completezza, affinché tutti possano trarne vantaggio

[Francesco Fiorillo]

non riesco a vedere le immagini sono importanti

[CusiUBS]

non riesco a vedere le immagini sono importanti

Questa e' la guida originale in inglese, le immagini sono le stesse http://msdn.microsoft.com/library/windowsphone/develop/ff402526(v=vs.105).aspx