.Net Windows Phone 8.1 impostare una schermata iniziale e logo

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_windows-phone-81-impostare-una-schermata_1397.aspx

In questo articolo vediamo come impostare la schermata iniziale con una nostra immagine ed il logo che verrà visualizzato nel dispositivo mobile, il tutto utilizzando le funzionalità ed opzioni offerte dall'ambiente di sviluppo Visual Studio.

Creazione del progetto


Si crea un progetto di tipo Windows Phone, il linguaggio di programmazione è indifferente.

Apriamo Visual Studio 2013, e nella finestra di esplora soluzione (Figura 1 ) facciamo doppio click sulla voce “Package.appmanifest”.


Figura 1 – La finestra Esplora soluzioni.

Dopo aver aperto la finestra di dettaglio del file “Pachage.appmanifest”, dobbiamo fare click sulla voce “Asset Visivi” (figura 2) in questo modo possiamo impostare l’immagine ed il logo per la nostra applicazione. Per le immagini, abbiamo la possibilità di impostarle in diversi formati, questo per i vari dispositivi in cui girerà la nostra applicazione.


Figura 2 – Le impostazioni per la schermata di inizio.

Facciamo click sulla voce “Schermata Iniziale” e poi sulla figura con la dimensione 1152x1920, in particolare dove si trova il pulsante dei tre puntini.
Dobbiamo selezionare un file immagini con dimensione 1152x1920, altrimenti ci verrà visualizzato un avviso, come quello mostrato in figura 3.


Figura 3 – Il messaggio relativo alle informazioni delle dimensioni dell'immagine.


Altrimenti viene visualizzato un messaggio di conferma se sostituire l’immagine presente, come mostrato in figura 4.


Figura 4 – Il messaggio di conferma per l’immagine esistente.

A questo punto se viene effettuato il rilascio sul device, noteremo che nel caricamento dell’applicazione verrà visualizzata la nostra immagine.
 Possiamo modificare anche il logo dell’applicazione, ossia l’immagine che viene rappresentata nel dispositivo tra le app installate o nello store.
Sempre nella pagina Asset Visivi, facciamo click su quello relativo logo quadrato 44x44
A questo punto sempre tramite il pulsante dei tre puntini modifichiamo l’immagine.
I vari formati dei logo, riguardano le varie situazioni, come la visualizzazione nella home per questo conviene modificare tutte le varie voci in modo da avere il logo per ogni situazione.

Conclusione

L'articolo ha voluto introdurre il lettore alle impostazionij dello sviluppo per le applicazioni mobile, in particolare modo nel settare un determato logo e schermata iniziale. La flessibilità dell'ambiente di sviluppo Windows Studio 2013 Express offre all'utilizzatore validi strumenti per realizzare applicazioni mobile di una certa complessità con strumenti che semplificano di molto il lavoro.

Windows Phone rilevare la posizione tramite C# e VB.Net

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_windows-phone-81-rilevamento-della-posiz_1394.aspx


In questo nuovo articolo sulla programmazione di Windows Phone 8.1 tramite l’ambiente di sviluppo Visual Studio 2013 express per Windows, vedremo in maniera introduttivo la gestione del rilevamento della posizione, il tutto con il linguaggio di programmazione VB.Net e C#.
Creazione del progetto
Si crea un nuovo progetto per Windows Phone 8.1, applicazione vuota.
Nell’interfaccia grafica, inseriamo tre caselle di testo, ed un pulsante, il tutto come riportato in questo frammento di codice di tipo XAML.

    <Grid>

        <Button Content="Button" HorizontalAlignment="Left" Margin="20,24,0,0" VerticalAlignment="Top" Click="Button_Click"/>

        <TextBox HorizontalAlignment="Left" Margin="25,90,0,0" TextWrapping="Wrap" Name="textLatitudine" Text="" VerticalAlignment="Top" Width="350"/>

        <TextBox HorizontalAlignment="Left" Margin="25,145,0,0" TextWrapping="Wrap" Name="textLongitudine" Text="" VerticalAlignment="Top" Width="350"/>

        <TextBox HorizontalAlignment="Left" Margin="25,195,0,0" TextWrapping="Wrap" Name="textPosizione" Text="" VerticalAlignment="Top" Width="350"/>

 

    </Grid>

A questo punto, dobbiamo rendere il tipo di applicazione abilitata al rilevamento della posizione.
Nel file “Package.appManifest”, facciamo click sulla paginetta “Funzionalità” e poi mettiamo la spunta sulla voce “Percorso”, il tutto come mostrato in figura 1.



Figura 1 - le impostazione per settare la posizione.

Stesura del codice

Passiamo in visualizzazione codice, in particolare nell’evento click.
Prima di tutto, dobbiamo inserire lo spazio dei nomi, per la geolocalizzazione.
Qui di seguito il frammento di codice

VB.Net

Imports Windows.Devices.Geolocation

C#

using Windows.Devices.Geolocation;

A livello di classe oppure nell’evento click si crea un oggetto di tipo “Geolocator” che ci permette di gestire il posizionamento.

VB.Net

Dim geo As Geolocator = Nothing

C#

Geolocator geo = null;

Mentre nell’evento click scriviamo il seguente codice che rileva la latitudine, longitudine e l’accuratezza.

VB.Net

  Private Async Sub Button_Click(sender As Object, e As RoutedEventArgs)

 

        If geo Is Nothing Then

            geo = New Geolocator()

        End If

 

        Dim pos As Geoposition = Await geo.GetGeopositionAsync()

 

        textLatitudine.Text = "Latitudine: " + pos.Coordinate.Point.Position.Latitude.ToString()

        textLongitudine.Text = "Longitudine: " + pos.Coordinate.Point.Position.Longitude.ToString()

        textPosizione.Text = "Posiione: " + pos.Coordinate.Accuracy.ToString()

    End Sub

C#

private async void Button_Click(object sender, RoutedEventArgs e)

        {

            if (geo == null)

            {

                geo = new Geolocator();

            }

 

            Geoposition pos = await geo.GetGeopositionAsync();

            textLatitudine.Text = "Latitudine: " + pos.Coordinate.Point.Position.Latitude.ToString();

            textLongitudine.Text = "Longitudine: " + pos.Coordinate.Point.Position.Longitude.ToString();

            textPosizione.Text = "Posiione: " + pos.Coordinate.Accuracy.ToString();

       

        }

Se facciamo click sul pulsante, provandolo sull’emulatore o sul dispositivo fisico, vedremo che verranno valorizzate le caselle di testo con i valori rilevati.

Conclusioni

L’articolo ha voluto fornire al lettore una semplice introduzione al rilevamento della posizione, utilizzando le classi messi a disposizione dal Framework.
La gestione della posizione può tornare utile e si può utilizzare in vari contesti. Con le nuove classi ed il nuovo ambiente di sviluppo Visual Studio 2013 e versione successive, la creazione di applicazioni in ambito mobile è stato notevolmente sempliicato.

Introduzione alla prima applicazione Windows Phone 8.1

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_scrivere-la-prima-applicazione-per-windo_1391.aspx


In questo vedremo come realizzare la prima applicazione per Windows Phone 8.1 tramite il linguaggio di programmazione C# e l’ambiente di sviluppo Visual Studio 2013 Express.
Avviate Visual Studio 2013 Express Desktop, dopo aver aperto l’ambiente di sviluppo, fate click su “File” poi sulla voce di menu “Nuovo Progetto…”.
Nella finestra che viene aperta (Figura 1),  selezionate come linguaggio C# e nelle varie categorie selezionate  “Applicazioni Windows Phone”, mentre come progetto “Applicazione Vuota”.


Figura 1 – la finestra della scelta del progetto.


A questo punto, assegniamo un nome al nostro progetto e facciamo click sul pulsante “OK”.
L’ambiente di sviluppatore ci presenterà una parte relativa all’emulatore, una riguardante il codice XAML e la finestra di esplora soluzione.
Inserite un pulsante nella schermata relativa dell’emulatore (Figura 2)


Figura 2 – La progettazione dell’applicazione.

Facciamo doppio click sul pulsante oppure passiamo in visualizzazione codice.
Nell’evento click del pulsante, inserire il codice per visualizzare un messaggio a video.
Ricordiamo che essendo una particolare classe dobbiamo inserire lo spazio dei nomi “Windows.UI.Popups;    “ , mentre l’evento dev’essere impostato per gestire chiamate asincrone.
Qui di seguito si riporta il codice.
Spazio dei nomi:

using Windows.UI.Popups;

Evento click del pulsante.

private async void Button_Click(object sender, RoutedEventArgs e)

        {

            var dialog = new MessageDialog("Prima APP");

            await dialog.ShowAsync();

        }

A questo punto non ci resta che testare la nostra applicazione, possiamo farlo in due ambienti, o sull’emulatore, oppure direttamente nel dispositivo.
In quest’ultimo caso dobbiamo avere installato la versione Windows Phone 8.1, altrimenti verrà generato un errore.
Tramite il pulsante di esecuzione stabiliamo se eseguirlo su Emulatore o Device, selezionando opportunamente quale ambiente.
A questo punto non ci resta che testare la nostra applicazione.
Ricordiamo che per testare l'applicazione nei nostri emulatore per il sistema operativo Windows 8.1, dobbiamo avere la macchina configurata per supportare la virtualizzazione hyperV, tramite impostazioni nel BIOS.

Conclusioni

Con il rilascio della nuova versione di Windows Phone 8.1 avvenuta nell’agosto 2014, lo sviluppo di App rimane lo stesso della versione precedente, con ulteriori classi per la gestione delle novità preposte con questa nuova versione.
Per alcuni sviluppatori provenienti da altre architetture come web o windows application, potrebbero trovare inizialmente difficoltà nella stesura di codice, ma con una pratica costante risulterà famigliare lo sviluppo di applicazioni come per altri tipi di architettura.
L’articolo ha voluto fornire al lettore i primi passi per muoversi in questo nuovo modo di creare applicazioni per il mobile, anche se alcune classi differenziano dall'ambiente Windows.
Le applicazioni realizzate per gli store, come appunto Windows Phone, presentano qualche piccola differenza dal tradizionale sviluppo, un cambiamento non forte che qualunque programmatore saprà affrontare.
Nei prossimi articoli vedremo altri aspetti dello sviluppo mobile.

.Net Windows Phone 8.1 creare un pulsante glass tramite VB.Net e C#

Si porta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_creazione-di-un-pulsante-stile-glass-in-_1440.aspx

In questo articolo vedremo come realizzare un pulsante che ha lo stile di tipo “Glass” ossia con opacità nella parte superiore e trasparenza di sfondo.
A volte può capitare di realizzare nelle nostre applicazioni per ambiente mobile, in particolare per Windows Phone versione 8.1 per i linguaggi VB.Net e C# un’interfaccia accattivante che migliori anche l’usabilità.
In questo articolo vedremo come con poche semplice righe di codice, in particolare lato “XAML” si possono impostare degli stili che colpiscono subito l'utilizzo dell'app da parte dell'utente.
Stesura del codice
Si crea un nuovo progetto di tipo Windows Phone 8.1, selezionando il linguaggio di proprio interesse.
Nel file “XAML” e precisamente nel file chiamato “MaingPage.xaml” andiamo ad aggiungere un frammento di codice riguardante la formattazione.
Tra il tag di chiusura intestazione dove viene indicato lo sfondo ( Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" )
ed il tag di apertura grid (), dove vanno posizionati i controlli inseriremo il codice della risorsa.
Il codice di stile qui di seguito imposta un oggetto di tipo Button, con una determinata colorazione, apportando delle sfumature nella parte superiore.
Qui di seguito si riporta il codice completo

 

<UserControl.Resources>

        <Style x:Key="GlassButton" TargetType="Button">

            <Setter Property="Background" Value="#FF1F3B53"/>

            <Setter Property="Foreground" Value="#FF000000"/>

            <Setter Property="Padding" Value="3"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="BorderBrush">

                <Setter.Value>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFA3AEB9" Offset="0"/>

                        <GradientStop Color="#FF8399A9" Offset="0.375"/>

                        <GradientStop Color="#FF718597" Offset="0.375"/>

                        <GradientStop Color="#FF617584" Offset="1"/>

                    </LinearGradientBrush>

                </Setter.Value>

            </Setter>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                              <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

 

                                    <VisualState x:Name="MouseOver">

                                    </VisualState>

 

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 

                                                                           Storyboard.TargetName="glow" 

                                                                           Storyboard.TargetProperty="(UIElement.Opacity)">

                                                <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" 

                                                                      Value="1"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

 

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">

                                                <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>

                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

 

                            <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">

                                <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">

                                    <Grid>

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="0.507*"/>

                                            <RowDefinition Height="0.493*"/>

                                        </Grid.RowDefinitions>

                                        <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">

                                            

                                        </Border>

                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>

                                        <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">

                                            <Border.Background>

                                                <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">

                                                    <GradientStop Color="#99FFFFFF" Offset="0"/>

                                                    <GradientStop Color="#33FFFFFF" Offset="1"/>

                                                </LinearGradientBrush>

                                            </Border.Background>

                                        </Border>

                                    </Grid>

                                </Border>

                            </Border>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

    </UserControl.Resources>

Ora non ci resta che aggiungere alla nostra form un pulsante ed impostare lo stile appena creato.
Possiamo fare in due modi, o trasciniamo nell’immagine relativo all’emulatore del dispositivo mobile, un controllo button, oppure scriviamo il tag xml relativo a tale classe.
Qui di seguito si riporta il codice completo del tag XML relativo al pulsante che andremo ad inserire nel tag “GRID”.

<Grid>

        <Button Width="300" Height="100" Content="Button Glass" Foreground="Azure"

                                Style="{StaticResource GlassButton}"

</Grid>

Come si vede dal frammento di codice nella proprietà “Style” viene impostato il nome della risorsa che abbiamo appena creato.

Conclusioni

L’articolo ha voluto fornire spunti per arricchire le applicazioni in ambito mobile e precisamente per la piattaforma Windows Phone, con grafica che risalta alcuni particolari del programma.
Realizzare interfacce accattivante è importante, ma alla base di una buona programmazione, i programmatori devono soprattutto basarsi su una buona “interfaccia amichevole” che permette all’utente di utilizzare in maniera semplice e intuitiva l’app.
Nello realizzare l’interfaccia si devono tener conto anche delle dimensioni dello schermo e risorse hardware di cui dispone il dispositivo.