Windows Dev Center

Progettazione dell'app con XAML: ridimensionamento

Progetta la tua app C#/XAML in modo che risponda nel modo previsto al ridimensionamento.

Una funzionalità interessante di Windows 8 è la possibilità di visualizzare due o più app sullo schermo contemporaneamente. Con il trascinamento verso il basso dall'alto dello schermo, l'utente può spingere un'app sul lato sinistro o destro dello schermo e creare spazio per la visualizzazione di una nuova app. La tua app deve essere pronta per questo tipo di operazione e, se necessario, modificare gli elementi sullo schermo e il modo in cui sono visualizzati.

Schermata che mostra un'app visualizzata con spazio per l'apertura e la visualizzazione di una seconda app

Se hai usato una griglia XAML per posizionare i controlli, l'aspetto potrebbe essere già corretto per impostazione predefinita, ma potresti volere mettere a punto alcuni dettagli. È meglio rispondere agli stessi messaggi e usare Visual State Manager, come descritto in Progettazione dell'app con XAML: orientamento. Ad esempio, potresti voler creare un nuovo stato visivo chiamato Narrow per nascondere alcuni controlli in modo da lasciare più spazio per i rimanenti. Ecco come fare.

Rilevamento della modifica delle dimensioni dello schermo

Per prima cosa, aggiungiamo il gestore al codice nel file con estensione .cs per la pagina (se non l'hai già fatto) per gestire le modifiche di orientamento:


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



Usiamo una seconda proprietà in questo gestore, ApplicationView.GetForCurrentView().IsFullScreen, che indica se l'app è a schermo intero o meno. Se non lo è, deve essere divisa e possiamo quindi decidere di attivare il nuovo stato visivo se la larghezza diventa molto stretta.

Supporto del nuovo stato visivo

Definiamo il nuovo stato visivo come prima, con gli stati verticale e orizzontale. In questo esempio, nasconderemo una delle colonne di informazioni visualizzate per creare un po' più di spazio.


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

Per vedere come funziona, ecco l'app prima della divisione dello schermo:

Tre colonne di dimensioni normali

Ed ecco l'app dopo che l'utente ha diviso lo schermo in due, senza alcun supporto extra per lo schermo più stretto. Nota come lo stesso contenuto viene compresso in uno spazio più piccolo.

Tre colonne compresse

Ed ecco come, visualizzando solo le informazioni più importanti, tutto diventa molto più accessibile.

Una sola colonna senza compressione

Larghezza minima

Puoi specificare un valore di larghezza minima. Per impostazione predefinita, questo valore è 500. Se la visualizzazione è più piccola delle dimensioni minime, l'app in pratica si rifiuta di funzionare in quelle condizioni e viene sospesa. Puoi modificare il valore su un minimo di 320, in modo da consentire all'app di rimanere in una colonna sottile su un lato dello schermo. Si tratta di un'opzione potenzialmente utile per app che rappresentano utilità onnipresenti per gli utenti.

Importante  La modifica della larghezza dell'app è avviata dall'utente e non può essere forzata a livello di programmazione.

Argomenti correlati

Progettazione dell'app con XAML: la griglia
Progettazione dell'app con XAML: orientamento
Linee guida per le dimensioni delle finestre e il ridimensionamento in base allo schermo (app di Windows Store)
Guida introduttiva: Progettazione di app per diverse dimensioni di finestra
Linee guida per il ridimensionamento dei layout alti e stretti
Guida introduttiva: Definizione di layout dell'app (app di Windows Store in JavaScript e HTML)

 

 

Mostra:
© 2015 Microsoft