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>

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"> 

Blend 2012: Invalid Markup e [Type] is not supported in a Windows App project

Ho passato un paio di giorni a combattere contro Blend for Visual Studio 2012, che non ne voleva più saperne di aprire in design i file xaml di una soluzione abbastanza complessa.

Il bello è che aveva sempre funzionato, fino a quando senza un motivo apparente, il designer dell'IDE Blend ha iniziato a dare degli errori di Invalid Markup e nella finestra Errors svariate decine di errori del tipo:

Page is not supported in a Windows App project

Window is not supported in a Windows App project

ResourceDictionary is not supported in a Windows App project

Grid is not supported in a Windows App project

 

ecc. ecc.

Ho googolato un pò, ma niente, nessuna soluziona utile, nemmeno una riparazione di Visual Studio ha aiutato.

Fra l'altro Visual Studio 2012 invece apriva correttamente il design e per un pò mi sono adeguato.

Poi ho notato dal Configuration Manager che per uno dei tanti progeti, in particolare una Portable Class Library, non riuscivo più a impostare la modalità di compilazione x86 (rimaneva e potevo selezionare solo Any CPU).

Allora ho pensato di eliminare la configurazione x86 e ricrearla da zero, ed ecco che si è sistemato tutto!

Ora Blend funziona perfettamente!