Il modello funzionale delle Windows Store app prevede che le applicazioni siano aperte in Full Screen oppure in modalità Snapped o Filled in modo che due app possano essere visualizzate affiancate.
Oltre ad esse, nel contesto di un tablet è previsto che possano adattarsi all'orientamento Portrait o Landscape del device, il tutto in modo dinamico e responsivo.
In WinRT possiamo conoscere a runtime lo stato corrente attraverso la classe ApplicationView e la sua proprietà Value, un enum ApplicationViewState che infatti assume i valori FullScreenLandscape, Filled, Snapped e FullScreenPortrait.
Per conoscere realmente lo stato visuale corrente è importante interrogare la classe ApplicationView nel metodo gestore dell'evento SizeChanged della Window corrente.
Window.Current.SizeChanged += Current_SizeChanged; void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) { ApplicationViewState viewState = ApplicationView.Value; }
Il template di Visual Studio di un progetto per una Windows Store app in XAML inserisce una classe LayoutAwarePage ad estenzione di Page; tale classe incapsula l'accesso ad ApplicationViewState e ne trasmette le variazioni alla View attraverso il VisualStateManager.
<VisualStateManager.VisualStateGroups> <!-- Visual states reflect the application's view state --> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape" /> <VisualState x:Name="Filled" /> <!-- The entire page respects the narrower 100-pixel margin convention for portrait --> <VisualState x:Name="FullScreenPortrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="100,126,90,0" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- The back button and title have different styles when snapped, and the list representation is substituted for the grid displayed in all other view states --> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>
Se una nostra Page eredita da questa LayoutAwarePage, nel suo VisualStateManager possiamo gestire la visibilità e anche comporre gli elementi dell'interfaccia nel modo più consono ad una corretta visualizzazione nei vari stati visuali.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Le novità di Angular: i miglioramenti alla CLI
Configurare policy CORS in Azure Container Apps
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
.NET Conference Italia 2023
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare i primary constructor in C#
Implementare l'infinite scroll con QuickGrid in Blazor Server
Creare un'applicazione React e configurare Tailwind CSS
Criptare la comunicazione con mTLS in Azure Container Apps
Usare le variabili per personalizzare gli stili CSS