Disposition contrainte ou non contrainte

La mise en page dans Silverlight se produit toujours dans l'un des deux modes, contraint ou non contraint. Une disposition contrainte en est une, où un conteneur impose la largeur ou la hauteur. Par exemple, le navigateur Web, généralement avec CSS, détermine toujours les dimensions globales des plug-ins Silverlight.

Certaines caractéristiques importantes sont -

• La disposition des éléments de niveau supérieur est contrainte à la fois horizontalement et verticalement. Quelle que soit la mise en page qu'il produit, il doit toujours aboutir à des résultats de la taille imposée par le navigateur.

• Certains éléments finissent par UnconstrainedMise en page, ce qui signifie que les éléments sont libres de choisir leur propre taille. Par exemple, des éléments à l'intérieur d'une verticaleStackPanel sont verticalement sans contrainte.

• Le StackPanel leur donnera autant de hauteur que nécessaire. En fait, il le fera même s'il n'y a pas assez d'espace. Il indiquera aux éléments qu'ils ont la hauteur dont ils ont besoin, puis recadrera tout ce qui ne convient pas.

• La plupart des interfaces utilisateur Silverlight contiennent un mélange de ces deux styles de disposition. Que son parent impose des contraintes ou non, unStackPanel performera toujours UnconstrainedDisposition dans le sens de l'empilement. Il en va de même pour une ligne ou une colonne de grille lorsque la hauteur ou la largeur est définie surAuto.

Supposons que vous ayez un élément, qui se trouve à l'intérieur d'un conteneur qui impose une largeur horizontale fixe. Par défaut, votre élément sera étiré pour remplir l'espace. Si vous définissez l'alignement sur Gauche, Droite ou Centre, cela supprimera la contrainte.

L'élément ne prendra que la largeur dont il a besoin. Bien sûr, vous pouvez introduire une contrainte avec une largeur ou une hauteur fixe.

• La mise en page sans contrainte est parfois appelée Size to Content, car la taille d'un élément sans contrainte est généralement déterminée par son contenu.

• La taille au contenu est une idée importante dans la mise en page Silverlight. C'est ce qui permet à la mise en page de s'adapter à toutes les informations affichées.

Sr. No.	Commandes et description
1	GridSplitter Les contraintes peuvent provenir du navigateur contenant ou de dimensions fixes dans votre conception. Cependant, il est parfois utile de laisser l'utilisateur imposer des contraintes.
2	ScrollViewer Certaines interfaces utilisateur ont besoin d'afficher plus d'informations que l'espace disponible. Une solution courante à cela consiste à fournir une région déroulante. Silverlight rend cela très facile avec ScrollViewer.
3	Frontière Un autre élément utile à garder à l'esprit lors de la présentation de l'interface utilisateur est Border.

Mode plein écran

Le plug-in Silverlight est capable de prendre en charge la totalité de l'écran. Il existe une propriété que vous pouvez définir sur une classe d'assistance pour passer en mode plein écran. Cependant, il existe quelques contraintes pour des raisons de sécurité. Pour empêcher un site Web de pouvoir prendre le contrôle de l'écran à volonté et faire quelque chose de mal, comme simuler une invite demandant le mot de passe de l'utilisateur.

Pour entrer en mode plein écran, vous devez obtenir la propriété Host.Content de l'objet d'application et définir sa propriété IsFullScreen sur true.

Jetons un coup d'œil à un exemple simple qui bascule la propriété, de sorte qu'elle basculera entre le plein écran et la 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>

Voici un code en C # qui initie le retour du plein écran à la normale. Vous pouvez savoir quand cela se produit en manipulant leHost.Content objets FullScreenChanged un événement.

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; 
      } 
		
   } 
}

Lorsque le code ci-dessus est compilé et exécuté, vous verrez la sortie suivante.

Lorsque l'utilisateur clique sur le Go Full Screen bouton, puis il passera en mode plein écran.

Notez que le texte du bouton a changé. Il dit maintenantReturn to Normal. Si vous cliquez à nouveau dessus ou en appuyant sur Echap, il reviendra hors du mode plein écran.