Silverlight - Diseños fijos
La disposición de los controles es muy importante y fundamental para la usabilidad de la aplicación. Se utiliza para organizar un grupo de elementos GUI en su aplicación. Hay ciertas cosas importantes a considerar al seleccionar paneles de diseño. Ellos son -
- Posiciones de los elementos secundarios.
- Tamaños de los elementos secundarios.
- Colocación de elementos secundarios superpuestos uno encima del otro.
Una disposición de controles de píxeles fijos no funciona si la aplicación se ha utilizado en diferentes resoluciones de pantalla. XAML proporciona un amplio conjunto de paneles de diseño integrados para organizar los elementos de la GUI de forma adecuada.
Empezaremos mirando simple fixeddiseños. Entonces veremos elDynamicescenarios de diseño, que Silverlight ha diseñado para admitir. Veremos las propiedades y conceptos relacionados con el diseño que impregnan todos los elementos de la interfaz de usuario.
Diseño fijo
El tipo de diseño más simple lo ofrece el Canvaselemento. losCanvas panel es el panel de diseño básico en el que los elementos secundarios se pueden colocar explícitamente utilizando las coordenadas relativas a cualquier lado del lienzo, como la izquierda, la derecha, la parte superior e inferior.
Normalmente, el Canvasse utiliza para elementos gráficos 2D (como Elipse, Rectángulo, etc.). No se usa para elementos de la interfaz de usuario porque especificar coordenadas absolutas genera problemas al cambiar el tamaño, localizar o escalar la aplicación XAML.
A continuación se muestran los properties de Canvas clase.
| No Señor. | Descripción de propiedad |
|---|---|
| 1 | Background Obtiene o establece un Pincel que llena el área de contenido del panel. (Heredado del Panel) |
| 2 | Children Obtiene un UIElementCollection de elementos secundarios de este Panel. (Heredado de Panel.) |
| 3 | Height Obtiene o establece la altura sugerida del elemento. (Heredado de FrameworkElement). |
| 4 | ItemHeight Obtiene o establece un valor que especifica el alto de todos los elementos contenidos en un WrapPanel. |
| 5 | ItemWidth Obtiene o establece un valor que especifica el ancho de todos los elementos contenidos en un WrapPanel. |
| 6 | LogicalChildren Obtiene un enumerador que puede iterar los elementos secundarios lógicos de este elemento Panel. (Heredado de Panel.) |
| 7 | LogicalOrientation La Orientación del panel, si el panel admite el diseño en una sola dimensión. (Heredado de Panel.) |
| 8 | LeftProperty Identifica la propiedad adjunta Canvas.Left XAML. |
| 9 | Margin Obtiene o establece el margen exterior de un elemento. (Heredado de FrameworkElement). |
| 10 | Name Obtiene o establece el nombre de identificación del elemento. El nombre proporciona una referencia para que el código subyacente, como el código del controlador de eventos, pueda hacer referencia a un elemento de marcado después de que se construya durante el procesamiento por un procesador XAML. (Heredado de FrameworkElement). |
| 11 | Orientation Obtiene o establece un valor que especifica la dimensión en la que se organiza el contenido secundario. |
| 12 | Parent Obtiene el elemento padre lógico de este elemento. (Heredado de FrameworkElement). |
| 13 | Resources Obtiene o establece el diccionario de recursos definido localmente. (Heredado de FrameworkElement). |
| 14 | Style Obtiene o establece el estilo que usa este elemento cuando se representa. (Heredado de FrameworkElement). |
| 15 | TopProperty Identifica la propiedad adjunta Canvas.Top XAML. |
| dieciséis | Width Obtiene o establece el ancho del elemento. (Heredado de FrameworkElement). |
| 17 | ZIndexProperty Identifica la propiedad adjunta Canvas.ZIndex XAML. |
A continuación se muestran los methods de Canvas.
| No Señor. | Método y descripción |
|---|---|
| 1 | GetLeft Obtiene el valor de la propiedad adjunta XAML Canvas.Left para el elemento de destino. |
| 2 | GetTop Obtiene el valor de la propiedad adjunta XAML Canvas.Top para el elemento de destino. |
| 3 | GetZIndex Obtiene el valor de la propiedad adjunta XAML Canvas.ZIndex para el elemento de destino. |
| 4 | SetLeft Establece el valor de la propiedad adjunta Canvas.Left XAML para un elemento de destino. |
| 5 | SetTop Establece el valor de la propiedad adjunta Canvas.Top XAML para un elemento de destino. |
| 6 | SetZIndex Establece el valor de la propiedad adjunta Canvas.ZIndex XAML para un elemento de destino. |
El siguiente ejemplo muestra cómo agregar elementos secundarios en un Canvas. A continuación se muestra la implementación de XAML en la que se crea una elipse dentro de un lienzo con diferentes propiedades de desplazamiento.
<UserControl x:Class = "FirstExample.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">
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas Width = "380" Height = "280" >
<Ellipse Canvas.Left = "30" Canvas.Top = "30"
Fill = "Gray" Width = "200" Height = "120" />
</Canvas>
</Grid>
</UserControl>Cuando se compile y ejecute el código anterior, verá el siguiente resultado.
