Layout vincolato e non vincolato

Il layout in Silverlight si verifica sempre in una delle due modalità, vincolato o non vincolato. Un layout vincolato è uno in cui un contenitore impone la larghezza o l'altezza. Ad esempio, il browser web, solitamente con CSS, determina sempre le dimensioni complessive dei plug-in Silverlight.

Alcune caratteristiche importanti sono:

• Il layout degli elementi di primo livello è vincolato sia orizzontalmente che verticalmente. Qualunque layout produca, deve sempre finire con i risultati che sono delle dimensioni imposte dal browser.

• Alcuni elementi finiscono con UnconstrainedLayout, il che significa che gli elementi sono liberi di scegliere la propria dimensione. Ad esempio, elementi all'interno di una verticaleStackPanel sono verticalmente libere.

• Lo StackPanel darà loro tutta l'altezza di cui hanno bisogno. In effetti, lo farà anche se non c'è abbastanza spazio. Dirà agli elementi che hanno l'altezza di cui hanno bisogno, quindi ritaglierà tutto ciò che non si adatta.

• La maggior parte delle interfacce utente di Silverlight contiene una combinazione di questi due stili di layout. Indipendentemente dal fatto che il suo genitore imponga o meno dei vincoli, aStackPanel funzionerà sempre UnconstrainedLayout in direzione di impilamento. Lo stesso vale per una riga o una colonna Grid quando l'altezza o la larghezza sono impostate suAuto.

Supponiamo di avere un elemento, che si trova all'interno di un contenitore che impone una larghezza orizzontale fissa. Per impostazione predefinita, il tuo elemento verrà allungato per riempire lo spazio. Se imposti l'allineamento su Sinistra, Destra o Centro, rimuoverà il vincolo.

L'elemento prenderà solo la larghezza di cui ha bisogno. Naturalmente, puoi introdurre un vincolo con una larghezza o altezza fissa.

• Talvolta viene chiamato layout non vincolato Size to Content, perché la dimensione di un elemento non vincolato è generalmente determinata dal suo contenuto.

• La dimensione in base al contenuto è un'idea importante nel layout di Silverlight. È ciò che consente al layout di adattarsi a qualsiasi informazione venga visualizzata.

Sr. No.	Controlli e descrizione
1	GridSplitter I vincoli possono provenire dal browser contenitore o da dimensioni fisse nel progetto. Tuttavia, a volte è utile lasciare che l'utente imponga dei vincoli.
2	ScrollViewer Alcune interfacce utente finiscono per aver bisogno di visualizzare più informazioni di quelle che si adattano allo spazio disponibile. Una soluzione comune a questo è fornire una regione scorrevole. Silverlight lo rende molto semplice con ScrollViewer.
3	Confine Un altro elemento utile da tenere a mente quando si dispone l'interfaccia utente è Border.

Modalità schermo intero

Il plug-in Silverlight è in grado di occupare l'intero schermo. C'è una proprietà che puoi impostare su una classe helper per entrare in modalità a schermo intero. Tuttavia, ci sono un paio di vincoli per motivi di sicurezza. Per impedire a un sito Web di essere in grado di assumere il controllo dello schermo a piacimento e di fare qualcosa di malvagio, come simulare un prompt che chiede la password dell'utente.

Per accedere alla modalità a schermo intero, è necessario ottenere la proprietà Host.Content dall'oggetto dell'applicazione e impostare la relativa proprietà IsFullScreen su true.

Diamo un'occhiata a un semplice esempio che alterna la proprietà, in modo che cambierà avanti e indietro tra schermo intero e normale.

<UserControl x:Class = "FullScreenExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400">
   
   <Border BorderBrush = "Gray" BorderThickness = "4" CornerRadius = "30" Padding = "20"> 
	
      <Border.Background> 
         <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1"> 
            <GradientStop Offset = "0" Color = "Wheat" /> 
            <GradientStop Offset = "1" Color = "BurlyWood" />
         </LinearGradientBrush> 
      </Border.Background> 
		
      <Grid x:Name = "LayoutRoot"> 
         <Button x:Name = "fullScreenButton" HorizontalAlignment = "Center" 
            VerticalAlignment = "Center" FontSize = "30" Width = "300" 
            Height = "100" Content = "Go Full Screen" Click = "Button_Click" /> 
      </Grid> 
		
   </Border> 
	
</UserControl>

Ecco un codice in C # che avvia il ritorno dallo schermo intero alla normalità. Puoi scoprire quando ciò accade gestendo il fileHost.Content oggetti FullScreenChanged evento.

using System; 
using System.Windows; 
using System.Windows.Controls;  

namespace FullScreenExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent();  
         App.Current.Host.Content.FullScreenChanged += Content_FullScreenChanged; 
      }
	  
      void Content_FullScreenChanged(object sender, EventArgs e) { 
		
         if (Application.Current.Host.Content.IsFullScreen) { 
            fullScreenButton.Content = "Return to Normal"; 
         } else { 
            fullScreenButton.Content = "Go Full Screen";
         } 
      }
	  
      private void Button_Click(object sender, RoutedEventArgs e) { 
         var content = Application.Current.Host.Content; 
         content.IsFullScreen = !content.IsFullScreen; 
      } 
		
   } 
}

Quando il codice sopra viene compilato ed eseguito, vedrai il seguente output.

Quando l'utente fa clic sul file Go Full Screen pulsante, quindi passerà alla modalità a schermo intero.

Notare che il testo del pulsante è cambiato. Ora diceReturn to Normal. Se fai clic di nuovo o premi Esc, uscirà dalla modalità a schermo intero.