Archivio Categoria: uwp

Un nuovo mediacenter per Xbox su ioprogrammo

E’ stato pubblicato su ioprogrammo numero 2012 di aprile 2017 il mio articolo su come scrivere il proprio mediacenter per Xbox utilizzando tutta la potenza delle app UWP

4-212g

Utilizzare il ProgressRing nell’ActivityIndicator in Xamarin Forms

Su Xamarin forms per le app UWP il componente ActivityIndicator è mappato sulla classe ProgressBar e come è possibile potete vedere nello screen non è un comportamento congruente con le altre piattaforme e la momento non c’è modo di cambiarlo con un ProgressRing.

activityindicatorCon il meccanismo dei CustomRenderer possiamo ovviare a questo problema in modo molto semplice inserendo una semplice classe nel nostro progetto UWP

[assembly: ExportRenderer(typeof(ActivityIndicator), typeof(RingActivityIndicatorRenderer))]
namespace DoGethersApp.UWP
{
    public class RingActivityIndicatorRenderer : ViewRenderer<ActivityIndicator, Windows.UI.Xaml.Controls.ProgressRing>
    {
        private Brush foregroundDefault;
        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)

            {
                if (Control == null)
                {
                    SetNativeControl(new Windows.UI.Xaml.Controls.ProgressRing());
                    Control.Loaded += OnControlLoaded;
                }
                UpdateIsRunning();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == ActivityIndicator.IsRunningProperty.PropertyName)
            {
                UpdateIsRunning();
            }

            else if (e.PropertyName == ActivityIndicator.ColorProperty.PropertyName)
            {
                UpdateColor();
            }
        }

        void OnControlLoaded(object sender, RoutedEventArgs routedEventArgs)
        {
            foregroundDefault = Control.Foreground;
            UpdateColor();
        }

        void UpdateColor()
        {
            Color color = Element.Color;
            if (color == Color.Default)
            {
                Control.Foreground = foregroundDefault;
            }
            else
            {
                Control.Foreground = color.ToBrush();
            }
        }

        void UpdateIsRunning()
        {
            Control.IsActive = Element.IsRunning;
        }
    }

    internal static class ConvertExtensions
    {

        public static Brush ToBrush(this Color color)
        {
            return new SolidColorBrush(color.ToWindowsColor());
        }

        public static Windows.UI.Color ToWindowsColor(this Color color)
        {
            return Windows.UI.Color.FromArgb((byte)(color.A * 255), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
        }
    }
}

in questo modo verranno modificati tutti gli ActivityIndicator per utilizzare il ProgressRing, se vogliamo avere però maggior libertà e decidere se  e quando utilizzarlo ci basterà fare nel progetto comune una nuova classe che estende ActivityIndicator e modificare il CustomRender facendo riferimento a quest’ultima classe.

In questo modo potremo decidere su utilizzare una o l’altra a seconda delle esigenze, sulle altre piattaforme sarà visualizzato sempre lo stesso componente mentre su windows verrà visualizzato un tipo di progressbar o l’altra in base alla classe che utilizzeremo.

Buon coding!!!

 

UWP: ricreiamo la funzione ToTitleCase

Come ben sappiamo la piattaforma UWP non dispone di tutte le funzionalità presenti nella versione del .Net Framework versione desktop. Una funzione che può essere utile in alcuni casi è ToTitleCase che come possiamo intuire dal nome converte il testo in parole con iniziali maiuscole come è possibile vedere nella documentazione ufficiale

https://msdn.microsoft.com/en-us/library/system.globalization.textinfo.totitlecase%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396

La versione standard permette di fare controlli più fini anche in base alla lingua di sistema ma se abbiamo bisogno solo della sua funzione base possiamo utilizzare questo semplice metodo

public string toTitleCase(string value)
{
    if (value == null)
        return null;
    if (value.Length == 0)
        return value;

    StringBuilder result = new StringBuilder(value);
    result[0] = char.ToUpper(result[0]);
    for (int i = 1; i < result.Length; ++i)
    {
        if (char.IsWhiteSpace(result[i - 1]))
            result[i] = char.ToUpper(result[i]);
        else
            result[i] = char.ToLower(result[i]);
    }
    return result.ToString();
}

che converte in maiuscolo l’iniziale di ogni parola ed in minuscolo quelle seguenti.

Una piccola utility che a volte può tornare utile

Buon coding!!!

UWP: Utilizzare immagini diverse in base al tema corrente

Una delle esigenze che maggiormente occorre tenere in considerazione nello sviluppo di un’app, soprattutto in ambito mobile, è quella di essere coerenti con il tema che l’utente stà utilizzando, per visualizzare elementi grafici che siano ben visibili ed evitare ad esempio pulsanti con immagini che si confondono con il colore di base del tema e diventano praticamente invisibili.

Una delle funzionalità più comode del framework sono i qualificatori che permettono tramite una determinata formattazione del nome del file o della cartella in cui esso è inserito di specificare se e quando deve essere utilizzato. Lo standard da utilizzare è del tipo

[resourceName].[qualifierString].extension

Come abbiamo detto è possibile utilizzarlo in due diversi modi, o creando una cartella con l’apposito nome

xaml-layout-view-ex-2

oppure specificandolo nel nome del file

xaml-layout-view-ex-1

a questo indirizzo è disponibile un elenco dei qualificatori utilizzabili per discriminare in base alla lingua, risoluzione dello schermo ecc.

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.applicationmodel.resources.core.resourcecontext.qualifiervalues.aspx

Quello che a quanto pare non viene citato nella documentazione ufficiale è la possibilità di utilizzare anche un qualificatore per indicare il tipo di tema a cui la risorsa deve fare riferimento utilizzando

theme-[dark/light]

in questo esempio

theme-dark.PNG

verrà utilizzata normalmente l’icona delete.png quando vi sarà fatto riferimento e solo in caso di tema scuro essa verrà sostituita da delete.theme-dark.png

Una soluzione decisamente interessante, soprattutto se state realizzando una UWP con Xamarin dove sarà più difficile accedere alle impostazioni del tema.

Rigrazio Fela per avermi fatto scoprire questa soluzione dopo averla cercata per ore 😀 spero possa essere utile anche a voi.

Buon coding!!

Eliminare le lingue non inserite quando si invia un’app UWP allo store

Se state sviluppando un’app solo a livello nazione per cui non volete inserire la lingua inglese potreste ritrovarvi la richiesta , anche se non avete inserito i relativi file, di compilare i dati nello store anche per questa lingua nel momento in cui la invierete.

Questo problema si presenta quando una libreria che stiamo utilizzando contiene già alcuni file localizzati, ad esempio per gestire i messaggi di errore (es. MVVM Light), in questo caso Visual Studio generà erroneamente anche il pacchetto per la lingua inglese.

Per risolvere il problema basterà aprire il file di progetto ed aggiungere la seguente riga
<SkipIntermediatePriGenerationForResourceFiles>false</SkipIntermediatePriGenerationForResourceFiles>

subito dopo l’apertura del primo tag PropertyGroup che troverete in modo da avere una situazione del genere

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
 <PropertyGroup>
 <SkipIntermediatePriGenerationForResourceFiles>false</SkipIntermediatePriGenerationForResourceFiles>
 <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>

Se avete dei problemi a trovare il file di progetto potete scaricare il progetto facendo tasto destro sull’elemento

unload_menu

e poi editarlo sempre utilizzando il tasto destro sul progetto scaricato

edit_project

una volta modificato il file, sempre con il tasto destro, sarà possibile ricaricarlo.

NB: Potreste ritrovarvi con un messaggio di errore simile a questo

err_1potete tranquillamente ignorarlo e caricare il vostro progetto.

Se adesso genererete il vostro pacchetto e lo invierete allo store vedrete che verranno richiesti i dettagli esclusivamente per le lingue effettivamente incluse nella vostra app

Grazie a Fela per il tip!!!

Buon coding!!

Due utili estensioni per generare gli asset delle nostre UWP

A tutti sarà successo di dover creare i vari asset per le nostre app e di aver perso molto tempo con i vari photoshop  o simili per ridimensionare tutte le immagini nelle giuste dimensioni, voglio quindi segnalarvi due estensioni per Visual Studio che possono permetterci di risparmiare un pò di tempo facendo il lavoro per noi.

UWP Tile Generator

E’ l’estensione più semplice da usare. Permette partendo da un file immagine PNG o SVG di generare tutte le immagini di cui abbiamo bisogno.

Una volta installata facendo click con il tasto detro del mouse su un file compatibile avremo a disposizione due nuove voci nel menù contestuale

uwp20context

che ci permetteranno di generare tutti i file per le nostre Tile oppure per lo splash screen.

I sorgenti del progetto sono anche disponibili su GitHub, quindi se volete potete partecipare allo sviluppo potete farvi avanti 😀

UWP Visual Assets Generator

Ha sostanzialmente le stesse funzioni di UWP Tile Generator ma con molte più opzioni che permettono di selezionare quali file generare e che caratteristiche devono avere e come potete vedere nella schermata è un pò più complessa nell’utilizzo.

screenshot

Questa estensione oltre ai file SVG e PNG permette di aprire anche file JPG e GIF ma di contro non dispone della possibilità di essere lanciata con il tasto destro su un’ immagine ma dovremmo lanciare la relativa finestra da

View -> Other Windows -> UWP Visual Assets Generator

Quale utilizzare?

Come sempre non c’è una scelta giusta ma occorre sempre decidere quale è più è utile nel nostro caso.

Se non volete preoccuparvi dei dettagli ma solo avere le vostre icone generate in automatico UWP Tile Generator è forse la scelta migliore, se invece volete avere controllo su tutti i file generati UWP Visual Assets Generator farà al vostro caso.

Voi quale avete scelto? Ne conoscete altre? Fatemi sapere nei commenti

Buon coding!!

Windows 10 Anniversary Update è arrivato

Da pochissimi giorni è disponibile l’aggiornamento di Windows 10 chiamato Anniversary Update sulle varie piattaforme (XBox, PC, Iot,Hololens) al momento manca all’appello solo la versione per mobile ma dovrebbe essere questione di pochissime settimane.

Questo aggiornamento introduce importanti novità sia per gli utenti (basta citare l’inserimento della Shell Bash 😀 ) che per gli sviluppatori come l’apertura dello store alle app convertite con il Desktop Bridge o le nuove api per Cortana e Windows Ink

Per tutti i dettagli sull’aggiornamento e per i link per scaricare l’SDK aggiornato è possibile far riferimento alla pagina ufficiale del rilascio https://blogs.windows.com/buildingapps/2016/08/02/windows-10-anniversary-update-sdk-14393

Per utilizzare il nuovo SDK vi basterà cambiare la versione Target nelle impostazioni del progetto, ma se avete qualche dubbio in merito è stata creata anche una pagina apposita con tutte le istruzioni passo passo

https://blogs.msdn.microsoft.com/visualstudio/2016/08/02/universal-windows-apps-targeting-windows-10-anniversary-sdk/

Se siete arrivati a questo punto della lettura non posso far altro che augurarvi buon coding 😀

UWP: ListView con larghezza degli elementi al 100%

Se volete che in una vostra app gli elementi di una ListView occupino il 100% dello spazio disponibile orizzontalmente dovrete andare a modificare il tema del controllo ListView e non sarà sufficiente utilizzare la solita proprietà HorizontalAlignment=”Stretch” del controllo in questione.

Lo stile che andrà modificato è più precisamente l’ItemContainerStyle.

E’ possibile farlo in modo molto semplice utilizzando le seguenti righe da codice da inserire all’interno del tag <ListView><ListView> della vostra app

<ListView.ItemContainerStyle>
 <Style TargetType="ListViewItem">
 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
 </Style>
 </ListView.ItemContainerStyle>

Buon coding!!

UWP: Lavorare con i file – i permessi

Riscrivendo come UWP la mia app Your Files e volendo trasformarla anche in un file manager ho avuto (e stò avendo) molto a che fare con la gestione dei files. Ho deciso quindi di scrivere questa serie di post cercherò di condividere  quello che ho imparato in modo che possa essere utile anche ad altri.

Questi post hanno come riferimento le app UWP per windows 10 ma visti i punti in comune con la versione RT della piattaforma (Windows 8/8.1 e Windows Phone 8.1 RT) quanto sarà descritto potrà essere applicato anche ad essa.

Permessi per accedere ai file

Le app UWP per poter essere controllate e non fare danni o accedere a file sensibili sono confinate in una sandbox e hanno necessità che gli vengano forniti i permessi per poter accedere ai file sul file system.

L’accesso ai file può avvenire in due modi:

  • Attraverso il file di manifest
  • Attraverso una richiesta programmatica all’utente (FilePicker)

Permessi attraverso il file di manifest

Tramite il file di manifest possiamo selezionare due permessi di accesso alla raccolta musicale ed alle immagini che ci permettono di avere accesso diretto alle due cartelle relative

manifest

 

Per tutti gli altri file e cartelle (compresa quella dei documenti) occorre fare esplicita richiesta all’utente

Permessi tramite esplicita richiesta

Per poter richiedere il permesso di poter accedere a qualsiasi file o cartella (non protetta) del file system Windows 10 ci mette a disposizione gli oggetti FileOpenPicker e FileSavePicker per i file e FolderPicker per le directory

Iniziamo a vedere un esempio di come ottenere l’accesso ad un file

// Configurazione
 FileOpenPicker fop = new FileOpenPicker();
 fop.FileTypeFilter.Add(".png");
 fop.FileTypeFilter.Add(".jpeg");
 fop.FileTypeFilter.Add(".jpg");
 
 // Interazione con l'utente
 StorageFile sf=await fop.PickSingleFileAsync();
 // controllo se il file è stato selezionato
 if (sf != null)
 

Come potete vedere una volta creato l’oggetto FileOpenPicker è necessario popolare la lista FileTypeFilter con le estensioni tra cui vogliamo che l’utente possa scegliere.

Considerazione importante è che non è possibile aggiungere il filtro .* o simili sempre per motivi di sicurezza, quindi è necessario sempre inserire la lista completa delle estensioni che si vogliono gestire

Se vogliamo invece avere accesso a tutti i file di una cartella (e di tutte le relative sottocartelle) possiamo utilizzare il FolderPicker in modo molto simile a come visto precedentemente

FolderPicker fp = new FolderPicker();
StorageFolder folder=await fp.PickSingleFolderAsync();
if(folder!=null)

Mantenere i permessi ricevuti

Utilizzando il codice che abbiamo visto negli scorsi paragrafi saremo costretti a richiedere i permessi ogni volta che andiamo ad utilizzare una cartella, anche se l’utente li aveva già dati in una sessione precedente. Per risolvere il problema possiamo utilizzare l’oggetto FutureAccessList che ci permette di memorizza cartelle e file con relativi permessi per un utilizzo futuro.

In più ad ogni oggetto possiamo assegnare un token per una ricerca più veloce.

L’utilizzo è decisamente semplice

// Aggiunta di una cartella o file alla lista
 StorageApplicationPermissions.FutureAccessList.Add(folderOrFile, metadata);
 
// Ripristino di un file o folder con i relativi permessi
StorageFile sf=await StorageApplicationPermissions.FutureAccessList.GetFileAsync(token);
 StorageFolder folder = await StorageApplicationPermissions.FutureAccessList.GetFolderAsync(token);

La classe mette a disposizione anche ulteriori metodi come CheckAccess per controllare se sono presenti i permessi per una determinata cartella.

Conclusioni

In questo post abbiamo visto come vengono devono essere gestiti i permessi per accedere ai file nelle nostre app.

Rispetto alla normale programmazione desktop occorre avere qualche accortezza in più, ma è lo scotto da pagare per avere una piattaforma più sicura.

Nei prossimi articoli vedremo come visualizzare modificare tutti i dettagli dei file e come utilizzarli per scrivere e leggere le informazioni in essi contenute

Se avete qualche dubbio lasciate pure un commento! Buon coding!!

UWP: Come modificare il FontSize in alcuni controlli bloccati

Lavorando ad una app una delle modifiche grafiche più comuni che si vuole eseguire è quella della modifica della dimensione del font utilizzato.

Questa operazione di solito è eseguita semplicemente tramite la property FontSize, ma in alcuni casi potremmo trovarci davanti ad alcuni controlli come il CalendarDatePicker e l’AutoSuggestBox in cui anche andandola ad impostare non avremo nessuna effetto.

Per riuscire nel nostro scopo quello che dobbiamo fare è andare a modifiche direttamente la stile per quel controllo, per farlo basta creare un nuovo templare da poter modificare. Visual Studio ci permette in modo molto semplice di avere una copia già pronta su cui poter lavorare, è sufficiente selezionare con il tasto destro il controllo e utilizzare il menu Edit Template -> Edit a Copy

edit_template
Avremo adesso a disposizione tutto lo stile da poter modificare.

Quello che dobbiamo fare è cercare il controllo TextBlock o TextBox che viene utilizzato per mostrare il testo ed andare a modificarlo.

Ad esempio per il CalendarDatePicker dovremo modificare lo style nel seguente modo andando a cambiare il FontSize già presente

 <!-- change FontSize property-->
<TextBlock x:Name="DateText" Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" FontSize="40" HorizontalAlignment="Left" Padding="12, 0, 0, 2" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" VerticalAlignment="Center"/>

Mentre nel caso dell’AutoSuggestBox dovremo procedere aggiungendo il FontSize che non è presente nello style

 <!-- Add FontSize property-->
<TextBox x:Name="TextBox" FontSize="40" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/>

E’ possibile trovare un esempio completo nel mio repository github nel progetto di esempi per le api UWP QUI

Buon coding!!!  😀

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi