Diseño restringido versus no restringido

El diseño en Silverlight siempre ocurre en uno de los dos modos, ya sea restringido o no restringido. Un diseño restringido es uno, donde un contenedor impone el ancho o alto. Por ejemplo, el navegador web, generalmente con CSS, siempre determina las dimensiones generales de los complementos de Silverlight.

Algunas características importantes son:

El diseño de los elementos de nivel superior está restringido tanto horizontal como verticalmente. Cualquiera que sea el diseño que produzca, siempre debe terminar con resultados del tamaño impuesto por el navegador.
Algunos elementos terminan con UnconstrainedDiseño, lo que significa que los elementos pueden elegir libremente su propio tamaño. Por ejemplo, elementos dentro de una verticalStackPanel están verticalmente sin restricciones.
El StackPanel les dará tanta altura como requieran. De hecho, hará esto incluso si no hay suficiente espacio. Le dirá a los elementos que tienen la altura que necesitan y luego recortará cualquier cosa que no encaje.
La mayoría de las interfaces de usuario de Silverlight contienen una combinación de estos dos estilos de diseño. Independientemente de si su padre impone restricciones o no, unStackPanel siempre actuará UnconstrainedDisposición en la dirección de apilamiento. Lo mismo es cierto para una fila o columna de cuadrícula cuando la altura o el ancho se establecen enAuto.

Suponga que tiene un elemento, que está dentro de un contenedor que impone un ancho horizontal fijo. De forma predeterminada, su elemento se estirará para llenar el espacio. Si establece la alineación en Izquierda, Derecha o Centro, eliminará la restricción.

El elemento tomará solo el ancho que necesita. Por supuesto, puede introducir una restricción con un ancho o alto fijo.

El diseño sin restricciones a veces se llama Size to Content, porque el tamaño de un elemento no restringido suele estar determinado por su contenido.
El tamaño del contenido es una idea importante en el diseño de Silverlight. Es lo que permite que el diseño se adapte a cualquier información que se muestre.

No Señor.	Controles y descripción
1	GridSplitter Las restricciones pueden provenir del navegador que las contiene o de dimensiones fijas en su diseño. Sin embargo, a veces es útil dejar que el usuario imponga restricciones.
2	ScrollViewer Algunas interfaces de usuario terminan necesitando mostrar más información de la que cabe en el espacio disponible. Una solución común a esto es proporcionar una región desplazable. Silverlight lo hace muy fácil con ScrollViewer.
3	Frontera Un elemento más útil a tener en cuenta al diseñar la interfaz de usuario es Border.

Modo de pantalla completa

El complemento Silverlight puede ocupar toda la pantalla. Hay una propiedad que puede establecer en una clase de ayuda para entrar en modo de pantalla completa. Sin embargo, existen algunas limitaciones por motivos de seguridad. Para evitar que un sitio web pueda tomar el control de la pantalla a voluntad y hacer algo malvado, como fingir un mensaje pidiendo la contraseña del usuario.

Para ingresar al modo de pantalla completa, debe obtener la propiedad Host.Content del objeto de la aplicación y establecer su propiedad IsFullScreen en true.

Echemos un vistazo a un ejemplo simple que alterna la propiedad, por lo que cambiará entre pantalla completa y normal.

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

Aquí hay un código en C # que inicia el regreso de la pantalla completa a la normalidad. Puede averiguar cuándo sucede esto manejando elHost.Content objetos 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; 
      } 
		
   } 
}

Cuando se compile y ejecute el código anterior, verá el siguiente resultado.

Cuando el usuario hace clic en el Go Full Screen , luego cambiará al modo de pantalla completa.

Observe que el texto del botón ha cambiado. Ahora diceReturn to Normal. Si vuelve a hacer clic en él o pulsa Escape, saldrá del modo de pantalla completa.

↰ Previous page Next page ↱