AntonioPelleriti.it [aka z9]

I code, therefore I am

NAVIGATION - SEARCH

Listbox con scrolling orizzontale in Windows Phone/Windows 8

Per realizzare una ListBox con scrolling in orizzontale basta modificare tramite codice XAML l'ItemsPanelTemplate utilizzato dal controllo standard.

Il primo accorgimento è quindi quello di utilizzare uno StackPanel (o VirtualizingStackPanel se preferite) con Orientation Horizontal e quindi impostare le proprietà ScrollViewer.HorizontalScrollBarVisibility="Auto" e Scrollviewer.VerticalScrollBarVisibility="Disabled".

<ListBox ItemsSource="{Binding MieiDati}" 
     ScrollViewer.HorizontalScrollBarVisibility="Auto" 
      Scrollviewer.VerticalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <itemspanelTemplate>
            <StackPanel Orientation="Horizontal">
        </StackPanel ></itemspaneltemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>            
            <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" 
             Text="{Binding Name}">
        </TextBlock ></DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Applicare un tema personalizzato alle applicazioni Windows Phone 8

volete modificare i temi di default all'interno delle vostre app Windows Phone 8, cambiando colori, font, sfondi, e così via?

Credo che la libreria wp-thememanager di Jeff Wilcox faccia al caso vostro!

Alal fine è una singola classe ThemeManager quindi potete importarla nel vostro progetto (anche se esiste il pacchetto nuget), quindi copiate il file ThemeResources.xaml dalla directory di installazione dell'SDK, in genere c:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Design\ e aggiunte anche questo al vostro progetto.

Modificate il file ThemeResources impostando i vostri colori, ecc.

Ora potete aggiungere alla sezione Application.Resources in App.xaml il ResourceDictionary del vostro nuovo tema:

<Application.Resources>       
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                  <ResourceDictionary Source="Common/ThemeResources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
...

per utilizzare il tema personalizzato, nel costruttore della classe App chiamate il metodo SetCustomTheme, indicando il ResourceDictionary da utilizzare, per esempio:

 

ThemeManager.SetCustomTheme(App.Current.Resources.MergedDictionaries[0], Theme.Light);

 La classe ThemeManager permette anche di impostare da codice il tema Dark o Light, o di invertire quello attuale.

VisualStateManager non funzionante in Blend o Visual Studio?

Qualche giorno fa mentre terminavo i dettagli di una Windows Store App, mi sono trovato a dover lavorare con le snapped view di una particolare pagina.

In genere Blend e Visual Studio offrono un eccellente supporto, mediante la tab Device, e possibile definire le diverse viste di una pagina per ogni orientamento e layout:

 

 

E' possibile quindi specificare il layout per ogni versione della pagina (Fullscreen, Snapped, ecc.) utilizzando il designer.

Il corrispondente codice XAML di gestione degli stati è simile al seguente:

 

<VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="ApplicationViewStates">
             <VisualState x:Name="FullScreenLandscapeOrWide"/>
             <VisualState x:Name="FilledOrNarrow" />
             <VisualState x:Name="FullScreenPortrait" />
             <VisualState x:Name="FullScreenPortrait_Detail" />
             <VisualState x:Name="Snapped" />
             <VisualState x:Name="Snapped_Detail" />
          </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 

Tutto bellissimo, ma per una particolare pagina non riuscivo a selezionare alcun valore dall'elenco Visual States, mi dava solo l'opzione (Base).

Cercando un pò in giro, ho trovato qualche possibile problema, per esempio il codice XAML precedente, deve essere inserito all'interno dell'elemento principale che contiene il resto della pagina, per esempio all'interno della Grid. Verifico che sia così, e quindi passo a cercare altre problematiche.

La pagina deve poi derivare da LayoutAwarePAge, che contiene il codice necessario a gestire i cambiamenti di orientation e layout. Anche questo però era ok.

Allora provo a creare un nuovo progetto Grid Application da zero, per confrontare il codice autogenerato e per verificare che in generale il designer funzioni correttamente.

E qui trovo l'inghippo, mancave l'attributo x:Name nel tag VisualStateGroup, che deve essere impostato nel seguente modo.

<VisualStateGroup x:Name="ApplicationViewStates">