Dall'archivio script > WinRT

Conoscere lo stato visuale di una Windows Store app in XAML

di Alessio LeonciniAlessio Leoncini, in WinRT,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi